如何在原型继承模式中访问方法

How to access method in prototypal inheritance pattern?

本文关键字:访问 方法 模式 继承 原型      更新时间:2023-09-26

我刚刚发现了这个资源jQuery原型继承锅炉板,我想用它作为一个自定义插件的基础,我正在为我的应用程序构建,但我很难理解如何访问这个对象本身的方法。(请参考下面我留下注释的代码片段/*这似乎不起作用*/)

我希望能够在同一个对象中调用一个方法,但是没有成功。我相信我有一些误解,这是如何工作的,所以希望有你的建议。谢谢!

/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */
// myObject - an object representing a concept that you want
// to model (e.g. a car)
var myObject = {
  init: function( options, elem ) {
    // Mix in the passed-in options with the default options
    this.options = $.extend( {}, this.options, options );
    // Save the element reference, both as a jQuery
    // reference and a normal reference
    this.elem  = elem;
    this.$elem = $(elem);
    // Build the DOM's initial structure
    this._build();
    // return this so that we can chain and use the bridge with less code.
    return this;
  },
  options: {
    name: "No name"
  },
  _build: function(){
    //this.$elem.html('<h1>'+this.options.name+'</h1>');
  },
  myMethod: function( msg ){
    // You have direct access to the associated and cached
    // jQuery element
    console.log("myMethod triggered");
    // this.$elem.append('<p>'+msg+'</p>');
  }
  myQuestion: function ( msg ) {
    /* ========================= */
    /* This doesn't seem to work */
    /* ========================= */
    this.myMethod( msg );
  }
};
// Object.create support test, and fallback for browsers without it
if ( typeof Object.create !== "function" ) {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
// Create a plugin based on a defined object
$.plugin = function( name, object ) {
  $.fn[name] = function( options ) {
    return this.each(function() {
      if ( ! $.data( this, name ) ) {
        $.data( this, name, Object.create(object).init(
        options, this ) );
      }
    });
  };
};
// Usage:
// With myObject, we could now essentially do this:
// $.plugin('myobj', myObject);
// and at this point we could do the following
// $('#elem').myobj({name: "John"});
// var inst = $('#elem').data('myobj');
// inst.myMethod('I am a method');

您的myMethod: function(msg);

像这样做;

/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */
// myObject - an object representing a concept that you want
// to model (e.g. a car)
var myObject = {
  init: function( options, elem ) {
    // Mix in the passed-in options with the default options
    this.options = $.extend( {}, this.options, options );
    // Save the element reference, both as a jQuery
    // reference and a normal reference
    this.elem  = elem;
    this.$elem = $(elem);
    // Build the DOM's initial structure
    this._build();
    // return this so that we can chain and use the bridge with less code.
    return this;
  },
  options: {
    name: "No name"
  },
  _build: function(){
    //this.$elem.html('<h1>'+this.options.name+'</h1>');
  },
  myMethod: function( msg ){
    // You have direct access to the associated and cached
    // jQuery element
    console.log("myMethod triggered");
    // this.$elem.append('<p>'+msg+'</p>');
  },                                        //<---- missing ,
  myQuestion: function ( msg ) {
    /* ========================= */
    /* This doesn't seem to work */
    /* ========================= */
    this.myMethod( msg );
  }
};
myObject.myQuestion()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

除了缺少",",这只会导致语法错误,而不是运行时错误。效果很好。只是简单的形式,你的对象下面的工作很好。

var myObject = {
  myMethod: function( msg ){
    console.log("myMethod triggered " + msg);
  },
  myQuestion: function ( msg ) {
    this.myMethod( msg );
  }
};
myObject.myQuestion("from myQuestion");