javascript - 类型错误 : this[( ("_" + (intermediate value)) + "_listener")] is not a function

Question

我正在动态构建一个带有发送者的对象:

var coins = {};

['USD','EUR'].forEach((product_id) => {
    coins[`_${product_id}`] = {};
    coins[`_${product_id}_listener`] = (val) => {
        log.info(process.pid, 'terminal send', product_id, [`_${product_id}`]);
        terminal.send({
            action: product_id,
            data: this[`_${product_id}`],
            timestamp: new Date,
        });
    };

    Object.defineProperty(coins, product_id, {
        set: (val) => {
            this[`_${product_id}`] = val;
            this[`_${product_id}_listener`](val);
        },
        get: (val) => {
            return this[`_${product_id}`];
        },
    });
});

不幸的是，当我把一枚硬币放在某物上时......

coins['USD'] = {a: 4};

我收到错误:

TypeError: this[(("_" + (intermediate value)) + "_listener")] is not a function
at Object.set (repl:15:32)
at repl:1:18
at sigintHandlersWrap (vm.js:22:35)
at sigintHandlersWrap (vm.js:73:12)
at ContextifyScript.Script.runInThisContext (vm.js:21:12)
at REPLServer.defaultEval (repl.js:340:29)
at bound (domain.js:280:14)
at REPLServer.runBound [as eval] (domain.js:293:12)
at REPLServer.<anonymous> (repl.js:538:10)
at emitOne (events.js:101:20)

这显然是指 setter 的第二行，但我不确定为什么。如果我注释掉，获取和设置工作正常。我的听众就是不开火......显然。这里的目标是让听众兴奋起来。

跟进

我还注意到，当该行被注释掉时，该对象看起来正确(imo):

> coins['USD'] = {a: 4};
{ a: 4 }
> coins
{ _USD: {},
  _USD_listener: [Function],
  _EUR: {},
  _EUR_listener: [Function] }
> coins['_USD']
{}
> coins['USD']
{ a: 4 }

既然我的 setter 假设正在设置_USD，为什么当我打印硬币时_USD看起来没有设置>?

Answer 1

问题是箭头函数与普通函数不同，不允许更改上下文(this)。 Docs .

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions

因此，当您创建箭头函数时，将为所有调用捕获一次上下文。

您可以切换到普通函数或使用coins作为上下文创建箭头函数。例如，通过将 coins 作为上下文传递给 .forEach 调用，并用普通函数替换 iteratee 以允许动态上下文。

var coins = {};

['USD','EUR'].forEach(function(product_id) {
    this[`_${product_id}`] = {};
    this[`_${product_id}_listener`] = (val) => {
        console.log(`${product_id} - ${val}`)
    };

    Object.defineProperty(coins, product_id, {
        set: (val) => {
            this[`_${product_id}`] = val;
            this[`_${product_id}_listener`](val);
        },
        get: (val) => {
            return this[`_${product_id}`];
        },
    });
}, coins)

coins.USD = 10
coins.EUR = 100
console.log(`USD ${coins.USD}, EUR ${coins.EUR}`)

或者最好使用普通函数，因为你确实有“方法”

    var coins = {};

    ['USD','EUR'].forEach(product_id => {
        coins[`_${product_id}`] = {};
        coins[`_${product_id}_listener`] = function(val) {
            console.log(`${product_id} - ${val}`)
        };

        Object.defineProperty(coins, product_id, {
            set: function(val) {
                this[`_${product_id}`] = val;
                this[`_${product_id}_listener`](val);
            },
            get: function() {
                return this[`_${product_id}`];
            },
        });
    })

    coins.USD = 10
    coins.EUR = 100
    console.log(`USD ${coins.USD}, EUR ${coins.EUR}`)