javascript - 嵌套函数中的函数上下文 ("this")

Question

当您在 Javascript 中调用顶级函数时，函数内的 this 关键字指的是默认对象(如果在浏览器中则为 window)。我的理解是，调用函数作为方法是一种特殊情况，因为默认情况下它是在窗口上调用的(如 John Resig 的书《JavaScript 忍者的 secret 》第 49 页中所述)。事实上，以下代码中的两个调用是相同的。

function func() {
  return this;
}

// invoke as a top-level function
console.log(func() === window); // true

// invoke as a method of window
console.log(window.func() === window); // true

到目前为止一切顺利......现在这是我不明白的部分:

当一个函数嵌套在另一个函数中并且在没有指定调用对象的情况下被调用时，函数内部的this 关键字也指的是window。但是内部函数不能在窗口上调用(见下面的代码)。

function outerFunc() {
  function innerFunc() {
    return this;
  }

  // invoke without window.* - OK
  console.log(innerFunc() === window); // true

  // invoke on window
  //window.innerFunc(); - error (window has no such method)
  console.log(window.innerFunc) // undefined
}

outerFunc();

嵌套函数在 window 上不可用是完全有道理的，因为它毕竟是嵌套的......但是后来我不明白为什么 this 关键字指的是 window，就好像函数是在 window 上调用的一样.我在这里缺少什么？

编辑

以下是对以下重要答案的总结以及我的一些后续研究。

• “正常”调用一个函数等同于将其作为window 的方法调用是不正确的。只有在全局定义该函数时，这才是正确的。

• 函数上下文(this 关键字的值)不取决于函数定义的位置/方式，而是取决于函数的调用方式。

  <

• 假设代码未在严格模式下运行，“正常”调用函数会将函数上下文设置为窗口(在浏览器中运行时，或其他环境中相应的全局对象)。

• 上述规则的一个异常(exception)是使用 bind 创建函数。在这种情况下，即使该函数被“正常”调用，它也可能具有 window 以外的上下文。也就是说，在这种情况下，上下文取决于您如何创建函数，而不是您如何调用它。尽管严格来说这并不准确，因为 bind 创建了一个新函数，该函数使用 apply 在内部调用给定的函数。该新函数的上下文仍将由它的调用方式决定，但它通过使用apply 屏蔽了它在内部调用的函数的上下文。

通过“正常”调用，我指的是以下简单的调用方式:

myFunction();

为了完成图片，这里简要介绍其他调用方式和相应的上下文:

• 作为对象(方法)的属性——上下文就是对象

• 使用 apply 或 call - 明确指定上下文

• 使用 new 运算符(作为构造函数)- 上下文是新创建的对象

如有必要，请随时更新以上内容，以帮助有类似问题的人。谢谢!

Answer 1

您可以调用 functionName() 范围内的任何函数.由于您尚未在对象上调用它，因此将在默认对象 ( window) 的上下文中调用它。 (IIRC，如果您处于严格模式，它将在 undefined 的上下文中调用)。

上下文的默认对象与定义函数的位置或函数出现的范围无关。它只是默认对象。

如果一个函数是一个对象的属性，你可以称它为reference.to.object.function() , 它将在 object 的上下文中调用而不是默认对象。

其他改变上下文的是 new关键字和 apply , call , 和 bind方法。