为什么toggleNav内的this指向其作用域外声明的nav元素？

问题相关代码 #

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

原因说明 #

JS 中普通函数的 this 指向不是定义时确定的，完全由函数的调用方式决定，核心规则是谁调用这个函数，this 就指向谁。
出现该打印结果，说明 toggleNav 是被 .nav 对应的 DOM 元素调用的，最常见的调用场景是给 nav 绑定了事件监听，比如其他位置存在类似如下代码：

nav.addEventListener('click', toggleNav)

当 nav 元素触发对应事件时，浏览器会主动把事件回调函数的 this 指向绑定事件的目标 DOM 元素，也就是你获取到的 nav 元素，所以会打印出 <nav> 标签。

顺带提一下 setTimeout 里打印 window 的原因：setTimeout 的回调函数是浏览器全局环境触发执行的，非严格模式下普通函数被全局调用时，this 默认指向全局对象 window，如果是严格模式则会打印 undefined。

内容的提问来源于stack exchange，提问作者jeromecho