javascript - 如何将构造函数对象值设置为其他值的函数？

Question

我尝试通过在对象构造函数中的其他两个属性上运行函数来生成对象属性。

当我运行以下代码时:

var ConstObj = function() {
    this.compositionDict = {
        "rock": 0.8,
        "iron": 0.15,
        "gold": 0.05
    };
    this.totalVolume = 10000;
    this.compVolDict = Object.keys(this.compositionDict).reduce(function(prev, curr) {
        prev[curr] = this.compositionDict[curr] * this.totalVol;
        return prev;
    }, {});
}
var tempObj = new ConstObj;

我收到以下错误:

Uncaught TypeError: Cannot read property 'rock' of undefined(…)

我认为这是行不通的，因为在函数运行时对象属性实际上并未定义 - 但我不知道我正在尝试做的事情有一个好的解决方法。

我可以创建一个在创建对象后添加新属性的函数，但似乎这种事情应该可行。

Answer 1

这是 this 不是 reduce 函数内的正确值的问题。每当您创建一个新的闭包时，例如 function() { ... }，都会创建一个新的上下文。为了让 this 指向正确的上下文，您必须绑定(bind)该函数，或者必须使用变量来引用原始上下文。

this.compVolDict = Object.keys(this.compositionDict).reduce(function(prev, curr) {
    prev[curr] = this.compositionDict[curr] * this.totalVol;
    return prev;
}.bind(this), {});

或者您可以使用变量来记录要在函数内部使用的上下文。这有点难看，但您会在各种用户态脚本中看到这种情况。

var _this = this;
this.compVolDict = Object.keys(this.compositionDict).reduce(function(prev, curr) {
    prev[curr] = _this.compositionDict[curr] * _this.totalVol;
    return prev;
}, {});

最后，另一个解决方案是使用 ES6 arrow function 。显然这是最优雅的解决方案。

this.compVolDict = Object.keys(this.compositionDict).reduce((prev, curr) => {
    prev[curr] = this.compositionDict[curr] * this.totalVol;
    return prev;
}, {});

如果您无法使用 ES6，您可以使用转换器，例如 babel.js这会将 ES6 转换为 ES5。这是开始利用新的 ES6 功能但仍然能够在 ES5 环境中运行它们的好方法。