一网打尽 this，对执行上下文说 Yes

✍创作者：全栈弄潮儿
🏡 个人主页： 全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址，欢迎订阅：前端架构师之路

this 到底指向谁？

全局环境下的this、箭头函数的 this、构造函数的 this、this 的显隐性和优先级，等等，真实环境多样。

一句话总结：

谁调用它，this 就指向谁。

也就是说，this 的指向是在调用时确定的。这么说没有太大的问题，可是并不全面。

事实上，调用函数会创建新的属于函数自身的执行上下文。执行上下文的调用创建阶段会决定 this 的指向。到此，我们可以得出的一个结论：

this 的指向，是在调用函数时根据执行上下文所动态确定的。

• 在函数体中，简单调用该函数时（非显式/隐式绑定下），严格模式下 this 绑定到 undefined，否则绑定到全局对象 window／global；
• 一般构造函数 new 调用，绑定到新创建的对象上；
• 一般由 call/apply/bind 方法显式调用，绑定到指定参数的对象上；
• 一般由上下文对象调用，绑定在该对象上；
• 箭头函数中，根据外层上下文绑定的 this 决定 this 指向。

全局环境下的 this

这种情况相对简单直接，函数在浏览器全局环境中被简单调用，非严格模式下 this 指向 window；在 use strict 指明严格模式的情况下就是 undefined。我们来看例题，请描述打印结果：

function f1 () { console.log(this) } function f2 () { 'use strict' console.log(this) } f1() // window f2() // undefined

上一题比较基础，再看一道例子：

const foo = { bar: 10, fn: function() { console.log(this) console.log(this.bar) } } var fn1 = foo.fn fn1()

这里 this 仍然指向的是 window。虽然 fn 函数在 foo 对象中作为方法被引用，但是在赋值给 fn1 之后，fn1 的执行仍然是在 window 的全局环境中。因此输出 window 和 undefined，它们相当于：

console.log(window) console.log(window.bar)

还是上面这道例题，如果调用改变为：

const foo = { bar: 10, fn: function() { console.log(this) console.log(this.bar) } } foo.fn()

将会输出：
{bar: 10, fn: ƒ}
10