为什么“this”变量超出其范围？ [复制]答案

【问题标题】：Why is "this" the variable outside its scope? [duplicate]为什么“this”变量超出其范围？ [复制]
【发布时间】：2021-08-25 01:18:02
【问题描述】：

var nav = document.querySelector('.nav'); // <nav class="nav">
var toggleNav = function () {
  console.log(this); // <nav> element
  setTimeout(function () {
    console.log(this); // [object Window]
  }, 1000);
};

在上面的示例代码中，为什么在第 3 行中当变量 nav 声明在 toggleNav 范围之外时的元素？谢谢

【问题讨论】：

这在 JS 中是一件很有趣的事情。看看这个帖子stackoverflow.com/questions/3127429/…
回调函数在没有上下文的情况下被调用。来自欺骗目标：使用箭头函数作为回调，或使用function(){…}.bind(this)
@SebastianSimon — 所有函数都在执行上下文中调用，不同之处在于函数的 this 设置取决于它的调用方式（以及使用箭头函数的词法）。 ;-)
@RobG 我知道……“上下文”这个词被过度使用了。它可能应该是“隐式this-binding base reference”左右。
如果你想解决这个问题，你可以试试这个：var toggleNav = () => { console.log(this); // <nav> element setTimeout(function () { console.log(this); // [object Window] }, 1000); };

标签： javascript scope this

【解决方案1】：

作用域和这个值即使在同一个函数中也会不同。

发生了什么？我们创建了一个新作用域，并没有在事件处理程序中触发它，因此它获得了预期的 windows 对象。如果我们希望这个值不受新创建的作用域的影响，我们可以采取一些措施。正如您之前可能已经看到的，我们使用它来创建对 this 和词法绑定的缓存引用所以我们能做的就是。

var nav = document.querySelector('.nav');//<nav class="nav">

var toggleNav = function () {

var that = this;

console.log(that);//<nav> element

setTimeout(function () {

console.log(that);//<nav> element}, 1000);

};

nav.addEventListener('click', toggleNav, false); ```

【讨论】：

这个问题与范围无关。 this 的值由调用设置，或者在箭头函数中按词法设置。问题是 setTimeout 没有设置回调的 this，因此它们默认为全局对象（浏览器中的窗口）或在严格模式下未定义。 @sebastianSimpon 使用 bind 的评论是一种（通常是最好的）解决方案。箭头函数和闭包是另一个。