javascript - 嵌套的 JavaScript 函数

Question

我想制作嵌套的 JavaScript 函数作为概念证明。我找到了一个示例并对其进行了一些修改以适合我的注意力证明:

var t = {
    nestedOne: {
        nest: function() {
            alert('nest');
            this.nestedTwo.nest2();
        },
        nest3: function() {
            alert('nest3');
        },       
        nestedTwo: {
           nest2: function() {
              alert('nest2');
              t.nestedOne.nest3();
           }       
        }
    }
};

t.nestedOne.nest();

// *** Output is nest, nest2 and nest3 ***

这行得通，但我想知道为什么在 nest2 中，我必须通过 t.nestedOne.nest3 调用，而不是 this.nestedOne.nest3，类似于我的方式从 nest2 调用。

Answer 1

都是关于this的上下文

最简单的解释方法是对您的代码稍作更改:

var t = {
    nestedOne: {
        nest: function() {
            console.log('nest',this);
            this.nestedTwo.nest2();
        },
        nest3: function() {
            console.log('nest3',this);
        },       
        nestedTwo: {
           nest2: function() {
              console.log('nest2',this);
              t.nestedOne.nest3();
           }       
        }
    }
};

t.nestedOne.nest();

上面的输出是

nest Object { nestedTwo={...}, nest=function(), nest3=function()}
nest2 Object { nest2=function()}
nest3 Object { nestedTwo={...}, nest=function(), nest3=function()}

请注意，在第二次调用中，this 指的是函数，不再是对象。

现在，您可以进行以下 2 项更改

• 调用 next2 传递 this 的上下文: this.nestedTwo.nest2.call(this);

• 在 nest2 中使用 this: this.nest3();

一切都按预期工作:

var t = {
    nestedOne: {
        nest: function() {
            console.log('nest',this);
            this.nestedTwo.nest2.call(this);
        },
        nest3: function() {
            console.log('nest3',this);
        },       
        nestedTwo: {
           nest2: function() {
              console.log('nest2',this);
              this.nest3();
           }       
        }
    }
};

t.nestedOne.nest();