JS:原型-访问正确的实例属性
JS: Prototyping - access the right instance property
我对JS中的原型设计有点困惑。我为此准备了一把小提琴:
http://jsfiddle.net/GBCav/7/
标记:
<div class="container1">
<p>Container 1</p>
<button>Turn me (container1) red</button>
</div>
<div class="container2">
<p>Container 2</p>
<button>Turn me (container2) red</button>
</div>
JS:
// Constructor Function
function Box( container ) {
this.container = $(container);
}
// Prototype method
Box.prototype = {
init : function() {
// Assign buttons to object variable
this.button = this.container.find('button');
$this = this; // Set 'this' to Slider object
this.button.on('click', function() {
// It is getting the wrong container here, but why
$this.container.css('background-color','red');
});
}
};
以下是我如何调用构造函数:
// Create two instances of box
(function() {
var container1 = new Box( $('div.container1') );
container1.init();
var container2 = new Box( $('div.container2') );
container2.init();
})();
我有两个由构造函数创建的Box对象。当我点击框内的按钮时,CONTAINING框的背景应该会改变颜色。
颜色的更改是在Box的init原型函数中处理的。
但是,上面的代码会给错误的框上色。如何寻址正确的容器?
我在这里错过了什么?
您缺少一个var
语句:
$this = this;
应该是:
var $this = this;
添加var
,它可以按预期工作:http://jsfiddle.net/GBCav/8/
说明:当您省略var
关键字时,您将$this
分配给一个全局变量,而不是一个仅限于.init()
方法范围的变量。调用.init()
时会发生赋值,因此在第二个实例上调用此方法会将$this
重新赋值给第二个例子,这也会影响第一个实例的事件处理程序中$this
的值。
相关文章:
- Backbone.Model.extend不创建实例属性
- 在定义了构造函数之后,是否可以将实例属性添加到JavaScript原型中
- 从原型方法更改实例属性
- 在 IIFE 中使用实例属性
- 在 ES6 中,允许解构类实例属性
- 在 ES6 中自动将参数设置为实例属性
- 将实例属性放置在原型构造函数中,无论好坏
- JS:原型-访问正确的实例属性
- 我可以在Silverlight中的Scriptable Member属性上设置Javascript中的实例属性吗
- 实例属性会模糊原型链吗
- mixin中的prototype.js实例属性
- 为什么不应该't我直接访问实例属性进行写操作
- Javascript”;私人的“;与实例属性相比
- 为什么在原型中声明实例属性而不是在构造函数中声明
- 如何用原型函数更新实例属性,并从另一个函数访问它
- 新的骨干实例属性指向旧的实例属性
- 在实例方法中获取对实例属性的访问权
- ES6类/实例属性
- 为什么赋值影响实例属性而不是原型属性?
- 在Coffee Script中理解类扩展和实例属性