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

Javascript access outer object attribute from anonymous function

本文关键字：外部 对象 属性 访问 函数 Javascript      更新时间：2023-09-26

我有以下对象：

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是未定义的。为什么会这样？

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

要访问对象属性，需要使用self/that等替代选项。

 initialize : function() {
        var that = this;
        document.getElementById("myElem").addEventListener("click", function() {
            alert(that.attr1);
            that.myFunc();
        });
    }

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

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();
<div id="myElem">Click me</div>

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

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

otherFunc: function() {
  console.log('test');
},
myFunc: function() {
  var self = this;
  // do stuff
  // call other function
  self.otherFunc(); 
}

就这样吧->您不需要额外的变量来使代码变得如此模糊。：）

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

相关文章：