从Javascript中的事件侦听器调用访问对象的属性

Question

下面我在Javascript中创建一个对象.在构造函数中,我正在设置一个事件监听器.问题是当事件被触发时,找不到this.prop,并且未定义打印输出.我该如何解决这个问题？

   var someObj = function someObj(){
       this.prop = 33;
        this.mouseMoving = function() { console.log(this.prop);}

        document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);

 }

Answer 1

调用事件处理程序时,"this"不再引用"someObj"对象.您需要将"this"捕获到mouseMoving函数将捕获的局部变量中.

var someObj = function someObj(){
    this.prop = 33;
    var self = this;
    this.mouseMoving = function() { console.log(self.prop);}

    document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving, true);
}

我假设"someObj是一个构造函数,即打算用as调用new someObj(),否则"this"将是全局范围.

"this"关键字在JavaScript中可能会造成混淆,因为它与其他语言的工作方式不同.要记住的关键是它在调用函数时绑定到调用对象,而不是在创建函数时绑定.

Answer 2

javascript内置的Function.prototype.bind()用于此目的.
例如:

var someObj = function someObj(){
       this.prop = 33;
        this.mouseMoving = function() { console.log(this.prop);}

        document.getElementById("someDiv").addEventListener('mousemove', this.mouseMoving.bind(this),true);

 }

有关bind方法的更多信息,请访问:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

另外,你必须将对象someObj的引用传递给元素并在该行中使用该引用:

console.log(this.referenceToObject.prop); //this references the DOM element in an event.

Answer 3

从节4.3 的JavaScript:好的部分由道格拉斯·克罗克福德:

调用函数会暂停当前函数的执行,将控制和参数传递给新函数.除了声明的参数之外,每个函数还接收两个附加参数:this和arguments.此参数在面向对象编程中非常重要,其值由调用模式决定.JavaScript中有四种调用模式:方法调用模式,函数调用模式,构造函数调用模式和apply调用模式.这些模式在初始化奖励参数的方式上有所不同.

Crockford继续解释这些模式中"this"的绑定,如下所示:

方法调用模式: 当函数存储为对象的属性时,我们将其称为方法.调用方法时,它绑定到该对象.

函数调用模式: 使用此模式调用函数时,它将绑定到全局对象.这是语言设计中的一个错误.

构造函数调用模式: 如果使用新前缀调用函数,则将创建一个新对象,其中包含指向函数原型成员值的隐藏链接,并且这将绑定到该新对象.

Apply调用模式: apply方法允许我们构造一个用于调用函数的参数数组.它还让我们选择了它的价值.apply方法有两个参数.第一个是应该绑定的值.第二个是参数数组.