javascript - 如何在 forEach 循环内使用 'this' 进行函数调用

Question

在以下对象中，我在使用“this”引用时遇到问题:

function SampleObject(){
    this.addObject = function(object){...}
    ...
    // more code here
    ...
    this.addNewObjects= function(arr){
        arr.forEach( function (obj) {
            this.addObject(new Obj(obj.prop1, obj.prop2));
        });
    }
}

我假设上下文正在发生变化，并且“this”指的是迭代的“obj”，而不是“SampleObject”。我已经使用普通的 for 循环解决了这个问题，但是我很好奇为什么这不起作用，并且想知道是否有其他方法可以做到这一点。

Answer 1

您可以将其存储在变量中:

var self = this;
this.addNewObjects = function(arr){
    arr.forEach(function(obj) {
        self.addObject(new Obj(obj.prop1, obj.prop2));
    });
}

或使用绑定(bind):

this.addNewObjects = function(arr) {
    arr.forEach(function(obj) {
        this.addObject(new Obj(obj.prop1, obj.prop2));
    }.bind(this));
}

还有旁注，如果没有这些 this 将是窗口对象而不是 obj。 This 始终是使用 new 关键字创建的对象，如果是普通函数，则为 window 对象。在严格模式下，this 在这种情况下将是未定义的。

更新:在 ES6 中，您可以使用箭头函数:

this.addNewObjects = function(arr) {
    arr.forEach((obj) => {
        this.addObject(new Obj(obj.prop1, obj.prop2));
    });
}

箭头函数没有自己的 this，它们从外部作用域获取它。

UPDATE2:来自 @viery365 评论，您可以使用它作为 forEach 的第二个参数，它将为函数创建上下文:

this.addNewObjects = function(arr) {
    arr.forEach(function(obj) {
        this.addObject(new Obj(obj.prop1, obj.prop2));
    }, this);
}

您可以在 MDN forEach page 上阅读此内容