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

我的目标如下：

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

然后用“未定义”发出警报。这意味着

此.attr1

未定义。

---

为什么会这样？

在事件处理程序函数中，

此

将始终引用已附加事件的DOM元素

要访问对象属性，您需要使用诸如self/that之类的选项

 initialize : function() {

        var that = this;

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

            that.myFunc();
        });
    }

在解决方案中，您已全局声明

myObject

，因为缺少

var

var对象={
属性1：“你好”，
myFunc:function（）{
警报（“窗口实例？”+（此窗口实例））；
alert（this.attr1）；//这应该会提醒“hello”
},
初始化：函数（）{
myFunction=this.myFunc；
document.getElementById（“myElem”）.addEventListener（“单击”，函数（）{
//如何从这里访问attr1？
警报（object.attr1）；
//调用myFunc
myFunction（）；
});
}
}
初始化（）
单击我
在事件处理程序函数中，
此
将始终引用已附加事件的DOM元素

要访问对象属性，您需要使用诸如self/that之类的选项

 initialize : function() {

        var that = this;

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

            that.myFunc();
        });
    }

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


var对象={
属性1：“你好”，
myFunc:function（）{
警报（“窗口实例？”+（此窗口实例））；
alert（this.attr1）；//这应该会提醒“hello”
},
初始化：函数（）{
myFunction=this.myFunc；
document.getElementById（“myElem”）.addEventListener（“单击”，函数（）{
//如何从这里访问attr1？
警报（object.attr1）；
//调用myFunc
myFunction（）；
});
}
}
初始化（）
单击我
您提供的解决方案正是我解决此问题的方法，声明一个变量并将其值设置为
此
，然后使用它调用对象中的其他函数

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

myFunc: function() {
  var self = this;

  // do stuff

  // call other function
  self.otherFunc(); 

}

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

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

myFunc: function() {
  var self = this;

  // do stuff

  // call other function
  self.otherFunc(); 

}

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


var对象={
属性1：“你好”，
myFunc:函数（）{
alert（this.attr1）；//这应该会提醒“hello”
},
初始化：函数（）{
document.getElementById（“myElem”）.addEventListener（“单击”，函数）（）{
//如何从这里访问attr1？
object.myFunc（）；
});
}
}
初始化（）就这样做吧->
您不需要额外的变量来使代码变得如此晦涩难懂。：）


var对象={
属性1：“你好”，
myFunc:函数（）{
alert（this.attr1）；//这应该会提醒“hello”
},
初始化：函数（）{
document.getElementById（“myElem”）.addEventListener（“单击”，函数）（）{
//如何从这里访问attr1？
object.myFunc（）；
});
}
}
初始化（）是的，这是一个常见的解决方案，但是您忘记声明变量
var myObject=this
@dystroy您可以通过编辑我的代码在新的答案中显示它吗？虽然您的是一个典型的技术和一个很好的解决方案，但您也可以使用
bind（）
函数：
.addEventListener（“单击”函数（）{}.bind（this））为什么不仅仅是
object.attr1
和
object.myFunc
？您也可以直接使用object而不声明新变量，如
object.myFunc（）
或
object.attr1
是的，这是一个常见的解决方案，但是你忘了声明变量
var myObject=this
@dystroy你能通过编辑我的代码在新的答案中显示它吗？虽然你的是一种典型的技术和很好的解决方案，但你也可以使用
bind（）
函数：
.addEventListener（“单击”函数（）{}.bind（this））
为什么不只是
object.attr1
和
object.myFunc
？您也可以直接使用object而不声明新变量，例如
object.myFunc（）
或
object.attr1
请注意
self
，因为在其中可能是一个保留（且只读）关键字。（在一些基于Gecko的浏览器中。）小心使用
self
，因为其中可能有一个保留（且只读）关键字。（在一些基于Gecko的浏览器中）这种方法有任何副作用吗？或者其他方法？据我所见，可读性受到其他方法的影响，当你有额外的变量，关于代码，没有我的经验时，会有更多的错误空间。这种方法有任何副作用吗？或者其他方法？从我的经验来看，可读性受到其他方法的影响，当你有额外的变量，关于代码，没有我的经验时，会有更多的错误空间。