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对象{nest2 = function（）}
  nest3 Object {nestedTwo = {...}，nest = function（），nest3 = function（）}

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

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

在next2的上下文中调用this： this.nestedTwo.nest2.call(this);
在this中使用nest2： this.nest3();

所有工作都按预期进行：

＆＃13;

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();

＆＃13;

Answer 2

函数调用的上下文由调用函数的对象决定，而不是用于获取函数的路径中最左侧的对象。

这样：

this.nestedTwo.nest2();
     ^^^^^^^^^

不是这个：

this.nestedTwo.nest2();
^^^^

嵌套的JavaScript函数

2 个答案: