如何在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));
    });
}

或使用绑定:

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页面上阅读此内容