Question

我有以下对象：

var object = {
    attr1 : "hello",
    myFunc : function() {
        alert(this.attr1);     //This should alert "hello"        
    },
    initialize : function() {
        document.getElementById("myElem").addEventListener("click", function() {
            // How do I access attr1 from here?

            myFunc(); // Says myFunc is not defined.

        });
    }
}

object.initialize();

如何从传递给addEventListener的匿名函数内部访问myFunc或attr1？

我能想到的一种方式是：

var object = {
    attr1 : "hello",
    myFunc : function() {
        alert(this.attr1);     //This should alert "hello"        
    },
    initialize : function() {

        myObject = this;

        document.getElementById("myElem").addEventListener("click", function() {
            // How do I access attr1 from here?
            alert(myObject.attr1);

            // calling myFunc
            myObject.myFunc();
        });
    }
}

object.initialize();

但这是一个很好的解决方案吗？

另外，如果我这样做：

var object = {
    attr1 : "hello",
    myFunc : function() {
        alert(this.attr1);     //This should alert "hello"        
    },
    initialize : function() {

        myFunction = this.myFunc;

        document.getElementById("myElem").addEventListener("click", function() {
            // How do I access attr1 from here?
            alert(myObject.attr1);

            // calling myFunc
            myFunction();
        });
    }
}

object.initialize();

然后它以“未定义”警告。这意味着this.attr1未定义。为什么这样？

Answer 1

在事件处理函数中，this将始终引用已附加事件的DOM元素。

要访问对象属性，您需要使用self / that。

等替代方法

 initialize : function() {

        var that = this;

        document.getElementById("myElem").addEventListener("click", function() {
            alert(that.attr1);

            that.myFunc();
        });
    }

在您的解决方案中，您已全局声明myObject，因为var缺失。

＆＃13;

var object = {
attr1 : "hello",
myFunc : function() {
    alert("Instance of window ? "+(this instanceof Window));
    alert(this.attr1);     //This should alert "hello"        
},
initialize : function() {

    myFunction = this.myFunc;

    document.getElementById("myElem").addEventListener("click", function() {
        // How do I access attr1 from here?
        alert(object.attr1);

        // calling myFunc
        myFunction();
    });
}
}

object.initialize();

＆＃13;

<div id="myElem">Click me</div>

＆＃13;

现在您可以在警报中看到，this指的是窗口对象。因为当你复制函数时，它是按值而不是通过引用。因此只复制函数而不复制底层对象。所以现在this将引用窗口对象。

Answer 2

您提供的解决方案正是我如何解决此问题，声明变量并将其值设置为this，然后使用它来调用对象中的其他函数。

otherFunc: function() {
  console.log('test');
},

myFunc: function() {
  var self = this;

  // do stuff

  // call other function
  self.otherFunc(); 

}

Answer 3

就这样做 - ＆gt; 您不需要额外的变量来使您的代码变得模糊。：）

＆＃13;

var object = {
    attr1: "hello",
    myFunc: function () {
        alert(this.attr1); //This should alert "hello"        
    },
    initialize: function () {

        document.getElementById("myElem").addEventListener("click", function () {
            // How do I access attr1 from here?
            object.myFunc();
        });
    }
}

object.initialize();

＆＃13;

Javascript从匿名函数访问外部对象属性

3 个答案: