从成员函数内部的回调中访问它

Question

我正在尝试从成员函数中的回调访问 class 实例。这是一个示例：

MyClass.prototype.foo = function(){
    var arr = [1, 2, 3];
    arr.forEach(function(element){
        //The next line doesn't work
        //becuase this doesn't reference my MyClass-instance anymore
        this.elements.push(element);
    });
}

这里我当然可以使用 for 循环 (for(var i = 0; i < arr.length; i++) {...})，但有些情况我不能。

我找到了一种访问我的 MyClass 实例的方法：

MyClass.prototype.foo = function(){
    var arr = [1, 2, 3];
    var myCurrentInstance = this;    //Store temporary reference
    arr.forEach(function(element){
        //Here it works because I use the temporary reference
        myCurrentInstance.elements.push(element);
    });
}

这对我来说似乎不太干净。有没有更好的方法？

Answer 1

forEach 有一个可选的 thisarg 你可以在传递回调后传递它，所以这应该有效：

MyClass.prototype.foo = function(){
    var arr = [1, 2, 3];
    var myCurrentInstance = this;    //Store temporary reference
    arr.forEach(function(element){
        //Here it works because I use the temporary reference
        this.elements.push(element);
    }, this);
}

函数定义如下：

arr.forEach(callback[, thisArg])

这是文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

更新

您始终可以使用 bind 来传递参数，尽管它看起来并不漂亮恕我直言：

MyClass.prototype.foo = function(){
    var arr = [1, 2, 3];
    var myCurrentInstance = this;    //Store temporary reference
    var myfunc = function(element){
        //Here it works because I use the temporary reference
        this.elements.push(element);
    }.bind(this);
    myfunc();
}

（我知道这是一个不好的例子，但它演示了绑定的作用）

Answer 2

如果您的环境支持，您可以使用箭头函数（或者您将代码从 ES6 编译到 ES5）：

arr.forEach(element => this.elements.push(elements));

在箭头函数内部，this 在词法环境中解析。

有关可能解决方案的完整列表，请参阅 How to access the correct `this` context inside a callback?。

但是，如果这就是所有代码，并且 this.elements 是一个数组，您可以直接添加它们而无需显式迭代：

this.elements.push.apply(this.elements, arr);

从成员函数内部的回调中访问它

Access this from callback inside member function

javascript

function

this

member

更新