从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

您可以使用名为“ Me”的变量，以避免与全局JavaScript变量“ self”冲突：

function someObj() {
  var me = this;
  this.prop = 33;

  this.mouseMoving = function() {
    alert(me.prop);
  }

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

Answer 2

首先，您需要了解JavaScript中“此”的工作方式。 “此”关键字不会以其他语言（例如C＃或Java）的行为行为。阅读以下帖子以了解更多信息，

JavaScript中“此”关键字的行为的理由是什么？

一旦您理解，正如Matthew在其代码中概述的那样，您可以保存对“此”的参考，并在Mousememoving函数中使用该引用。

尽管总的来说，我将建议您使用JavaScript框架（例如JQuery，Yui，Mootools），它将为您解决这些问题。例如，在Internet Explorer中，您使用addevent进行附加事件而不是AddeventListenr。

Answer 3

您的功能声明中有一些错别字。

您的Prop变量还定义为A “ public” 或“可见” 会员（通过使用此prop），这样做会迫使您存储的参考此来自外部函数（实际上是对对象实例的引用），作为函数的“ private” 成员（使用var），以获取创建对象的实例并阅读“公共” prop 成员。

您有一些重写此代码的替代方法：

function someObj (){
    var self = this;
    this.prop = 33;
    this.mouseMoving = function() { alert(self.prop);} // You access the current
                                                       // instance, stored in *self*
                                                       // since *this*, inside the 
                                                       // function, is in another 
                                                       // context.
    //...
}

var mySomeObj = new someObj(); // Object instantiation

或者您可以：

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

    //...
}
var mySomeObj = new someObj(); // Object instantiation

用 var 声明的变量可在主要构造函数内部声明的函数中获得可加入，此功能称为闭合。

Answer 4

这个答案可能是当时最干净的解决方案；使用bind（）允许侦听器从调用范围继承此的值。

但是现代JS具有更好的解决方案：箭头函数，它没有自己的this，因此会自动从其称为上下文中绑定一个函数。

使用它，原始代码看起来像这样：

var someObj = function someObj(){
    this.prop = 33;
    this.mouseMoving = function() { console.log(this.prop);}
    
    document.getElementById("someDiv").addEventListener('mousemove', e => this.mouseMoving(), true);
}

或者，使用现代类语法：

class someObj {
    prop;

    constructor() {
        this.prop = 33;
        document
            .getElementById("someDiv")
            .addEventListener("mousemove", e => this.mouseMoving(), true);
    }

    mouseMoving() {
        console.log(this.prop);
    }
}

foo = new someObj();

参考：箭头函数表达式在mdn上

Answer 5

当事件处理程序被调用时，“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 是一个构造函数，即打算使用 new someObj() 进行调用，否则“this”将是全局范围。

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

Answer 6

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);

 }

有关绑定方法的更多信息，请参见： 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 7

JavaScript的第4.3节： Douglas Crockford 的好部分：

调用功能暂停
执行当前功能，
将控制和参数传递给
新功能。除了
声明参数，每个功能
收到两个附加参数：
这个和争论。此参数
在面向对象的方面非常重要
编程，其价值是
由调用模式确定。
有四种调用模式
在JavaScript中：方法调用
模式，功能调用
模式，构造函数调用
模式和应用调用
图案。模式在方式上有所不同
奖励参数这是
初始化。

克罗克福德（Crockford）继续解释“此”中每种模式的绑定，如下所示：

方法调用模式：
将函数作为对象的属性存储时，我们称其为方法。调用方法时，这将绑定到该对象。

功能调用模式：
当使用此模式调用函数时，这将绑定到全局对象。这是语言设计的错误。

构造函数调用模式：
如果使用新前缀调用函数，则将创建一个新对象，并以隐藏的链接指向该函数原型成员的值，这将绑定到该新对象。

应用调用模式：
应用方法使我们可以构造一个参数来调用函数。它还使我们可以选择它的价值。应用方法采用两个参数。第一个是应与此绑定的值。第二个是参数数组。