Javascript'this'值改变了，但无法弄清楚原因 [英] Javascript 'this' value changing, but can't figure out why

问题描述

我是一个完整的Javascript newb，我正试图围绕OLN。我遇到的是，当从同一个对象上的另一个方法调用一个对象方法时，被调用方法中'this'的本地值的值正在改变。这是我的代码：

I'm a total Javascript newb, and I'm trying to wrap my head around OLN. What I'm encountering is that, when calling an object method from another method on the same object, the value of local value of 'this' in the called method is changing. Here's my code:

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控制台告诉我未捕获的TypeError：对象[对象DOMWindow]没有方法'generate_generic_dots'。

So, I call generator.generateForLevelSkillAndCount(0, 4, 20) and it works properly, calling generate_0_4(count). However, this is where it fails, with Chrome's Javascript console telling me "Uncaught TypeError: Object [object DOMWindow] has no method 'generate_generic_dots'."

我知道问题是 中的值 generate_0_4 是一个DOMWindow对象，而不是生成器（这是这个指向 generateForSkillLevelAndCount 但我无法弄清楚为什么会发生这种情况。

I know enough to know that the problem is that the value of this in generate_0_4 is a DOMWindow object, rather than generator (which is what this is pointing to in generateForSkillLevelAndCount but I can't figure out why that would possibly be happening.

更新：我根据CMS的建议更新了示例代码以摆脱 eval ，但返回相同的错误，因此它不仅仅是 eval 错误。

Update: I updated the example code per CMS's suggestion to get rid of eval, but the same error is being returned, so it's not just an eval bug.

推荐答案

在JavaScript中，上下文对象（ this ）设置为全局对象 （窗口，在浏览器中），除非该方法作为对象属性访问。因此：

In JavaScript, the context object (this) is set to the "global object" (window, in browsers) unless the method is accessed as an object property. Therefore:

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

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

Note that all three function calls are to the exact same function!

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

So, in your code, you're assigning the desired method to functionCall and calling it directly, which causes the function to use window as its context object. There are two ways around this: access the method as an object property or use .call() or .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);
}

这篇关于Javascript'this'值改变了，但无法弄清楚原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！