JavaScript循环调用函数时this为undefined的原因排查

JavaScript里this的绑定完全取决于函数的调用方式：

• 当你用obj.method()的形式调用函数时，this会自动绑定到obj上——这就是你直接调用valueGetters.A.GROSS()能正常工作的原因，此时this指向A对象。
• 但如果你把函数从对象里抽出来单独调用（比如const fn = obj.method; fn()），在严格模式（ES6模块、类默认都是严格模式）下，this会变成undefined。

你代码里的问题就出在循环中的这一行：

typeof defaultValue === 'function' ? defaultValue() : defaultValue.getValue()

这里的defaultValue就是GROSS函数，你直接调用defaultValue()，没有给它绑定任何上下文，所以this变成了undefined，导致所有this?.AA这类判断都返回false，最终求和结果为0。

最直接的修复方式是调用函数时，用call把当前的父对象（也就是defaultValueGetter，也就是A对象）绑定给this：

typeof defaultValue === 'function' ? defaultValue.call(defaultValueGetter) : defaultValue.getValue()

这样GROSS执行时，this就会和你直接调用valueGetters.A.GROSS()时一样，指向A对象，所有属性判断和方法调用都会正常工作。

注意：不要把GROSS改成箭头函数，箭头函数的this是词法绑定，会继承外层getDefaultValues函数的this，而不是A对象，反而会导致逻辑错误。

内容的提问来源于stack exchange，提问作者Pila