javascript 对象 - 无法访问的方法

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 9 年前。

我有一个带有一些方法的 JavaScript 对象，其中一些方法相互引用。在某些情况下，无论是否使用关键字“this”，这些方法都会变得未定义。我不知道该怎么做。下面是我的对象的片段。当单击具有 onClickMngLinksBtn 事件绑定(bind)的按钮时，在 onClickMngLinksBtn 方法中访问的 getContent() 方法将变为未定义。当使用以下方式访问时，相同的方法可以正常工作:

InLineLinksObj.getContent() 

我希望这个解决方案对于 javascript 中的对象来说是非常基本的。任何帮助深表感谢。

function InLineLinks(formController, fieldController) 
{
   ....

    this.getContent = function(){    
        var field = this.getFieldController().getCustomFieldByName(this.content_field); 
        if(field){
            return field.getValue();            
        }
        return null;
    };

    this.onClickMngLinksBtn = function(){  
        var links = [];
        var txt = this.getContent();  
    }   
    ....  
}

Answer 1

参见here , here或here ，或许多其他地方的范围和 javascript 中的 this 关键字的解释。本质上，

this always refers to the “owner” of the function we're executing

当您的方法由 DOM 事件触发时，所有者是窗口或被单击(或鼠标悬停等)的 HTML 元素，而不是包含对象。

在您的情况下，解决这个问题的一个简单方法是定义第二个变量self，它将保留对包含对象的引用。

function InLineLinks(formController, fieldController) {
    var self = this;
    ....

    self.getContent = function(){    
        var field = self.getFieldController().getCustomFieldByName(self.content_field); 
        if(field){
            return field.getValue();            
        }
        return null;
    };

    self.onClickMngLinksBtn = function(){  
        var links = [];
        var txt = self.getContent();  
    }   
    ....  
}