javascript - "this"作为对象成员资格而不是事件处理程序上的节点引用？

Question

I={};I.have={};I.have.a={};I.have.a.deep={};I.have.a.deep.deep={};I.have.a.deep.deep.deep={};

I.have.a.deep.deep.deep.niceObj = {

init: function(){
        document.getElementById('xx').addEventListener('click', this.clickHandle)
},
some: function(){},
other: function(){
    // here I can use *this* as I want
    this.some();
},

clickHandle: function(e) {
    // can't use *this* as I want becouse *this* reffers to #xx
    this.some()     // fails!!!

    // here I have a trick, but I realy don't want to reffer 
    // with the full qualified name
    I.have.a.deep.deep.deep.niceObj._clickHandle(e);
},

_clickHandle: function(e) {
    // here again *this* works as I want
    this.some();
}

问题是，如何在嵌入式事件处理程序中省略完整限定对象名称的使用，就像在 clickHandle 中发生的那样？

Answer 1

您想要将该函数绑定(bind)到 this您想要使用的。

document.getElementById('xx').addEventListener('click', this.clickHandle.bind(this));

this对象中的函数指的是函数的调用者，因此当你的对象调用该函数时，如niceObj.init() , this将是niceObj 。事件监听器调用事件目标为 this 的函数。 .

因此，您将该事件监听器函数绑定(bind)到该对象，该对象应该是 this如果niceObj来电者是init .

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind