Javascript 'this' 值发生变化，但无法弄清楚原因

Question

我是一个彻头彻尾的 Javascript 新手，我正在努力研究 OLN。我遇到的是，当从同一对象的另一个方法调用对象方法时，被调用方法中“this”的局部值的值正在改变。这是我的代码:

var generator = {
    generateForLevelSkillAndCount : function(level, skill, count) {
        var functionCall = this['generate_' + level + '_' + skill];
        return functionCall(count);
    },
    generate_0_4 : function(count) {
        return this.generate_generic_dots(count, 3);
    },
    generate_generic_dots : function(count, maxDots) {
        /* do cool stuff and return it */
    }
};

因此，我调用了 generator.generateForLevelSkillAndCount(0, 4, 20)，它正常工作，调用了 generate_0_4(count)。然而，这就是它失败的地方，Chrome 的 Javascript 控制台告诉我“未捕获的类型错误:对象 [object DOMWindow] 没有方法'generate_generic_dots'。”

我知道问题是 generate_0_4 中 this 的值是一个 DOMWindow 对象，而不是生成器(this 指向 generateForSkillLevelAndCount 但我不明白为什么会发生这种情况。

更新:我根据 CMS 的建议更新了示例代码以删除 eval，但是返回了相同的错误，所以它不仅仅是一个 eval 错误。

Answer 1

在 JavaScript 中，上下文对象 (this) 被设置为“全局对象”(window，在浏览器中)，除非该方法作为对象属性进行访问。因此:

var foo = { bar: function() { alert(this.baz); }, baz: 5 };
var bar = foo.bar;
var baz = 3;

foo.bar();    // alerts 5, from foo
foo["bar"](); // alerts 5, from foo
bar();        // alerts 3, from the global object

请注意，所有三个函数调用都是针对完全相同的函数!

因此，在您的代码中，您将所需的方法分配给 functionCall 并直接调用它，这会导致该函数使用 window 作为其上下文对象。有两种解决方法:将方法作为对象属性访问或使用 .call()或 .apply() :

function generateForLevelSkillAndCount1(level, skill, count) {
    return this['generate_' + level + '_' + skill](count);
}

function generateForLevelSkillAndCount2(level, skill, count) {
    var functionCall = this['generate_' + level + '_' + skill];
    return functionCall.call(this, count);
}