文章目录全局环境下的 this上下文对象调用中的 thisbind/call/apply 改变 this 指向构造函数和 this箭头函数中的 this 指向this 优先级相关实现一个bind 函数✍创作者：全栈弄潮儿🏡 个人主页： 全栈弄潮儿的个人主页🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区📙 专栏地址，欢迎订阅：前端架构师之路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