如何在原型继承模式中访问方法
How to access method in prototypal inheritance pattern?
我刚刚发现了这个资源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");
相关文章:
- 如何从对象的原型方法访问JavaScript对象属性
- 从vuejs中的组件模板访问父方法
- 访问对象的最简单方法'的单独财产
- 有没有一种方法可以从光滑的网格访问插件
- 尝试访问方法的 OOP JavaScript
- 从匿名函数层内访问方法变量
- jQuery控件之外的访问方法
- 访问方法内部的变量's函数
- Angular2:模板中类的访问方法
- 在javascript中使用对象访问方法
- 如何在原型继承模式中访问方法
- async模块内部类的访问方法或
- 当用作其他对象的事件处理程序时,访问方法中的成员
- 在javascript中访问方法skillet.toString()
- 为什么我的applet在通过JavaScript访问方法时不能加载本地库?
- 另一个插件的访问方法
- 使用jquery脚本时如何访问方法
- Javascript -如何在没有'this'的情况下改变作用域和访问方法?
- 为什么我的主干模型奇怪地嵌套在集合中,需要钻取才能访问方法/属性?
- Javascript OOP -从原型设置器访问方法