“ 箭头函数的设计初衷是简化回调、绑定词法 this ”的补充说明文章目录“ 箭头函数的设计初衷是简化回调、绑定词法 this ”的补充说明前言一、「词法 this」到底是什么二、代码说明1.普通函数this 会「跑飞」2.箭头函数this 被「钉死」在定义时的作用域三、核心结论前言上篇中提到箭头函数不能作为构造函数核心原因是箭头函数没有自己的 this也没有 prototype不满足构造函数的底层要求。还提到一句话箭头函数的设计初衷是简化回调、绑定词法 this完全不适合扮演「构造对象」的角色因此不能通过 new 调用也不能作为构造函数。这里来补充对于这句话的一些理解。一、「词法 this」到底是什么在 JavaScript 里普通函数的 this 是运行时动态决定的谁调用它this 就指向谁很容易在回调、定时器里「跑飞」而箭头函数的 this 是「词法绑定」意思是它的 this 不是在调用时确定而是在定义它的那个代码位置词法作用域就固定下来了它会捕获外层作用域包裹它的那个函数 / 全局的 this 值之后再也不会改变。二、代码说明1.普通函数this 会「跑飞」代码如下示例constobj{name:Alice,sayHi:function(){console.log(sayHi里的this:,this);// 这里 this 指向 objsetTimeout(function(){// 普通回调函数this 变成了全局对象或严格模式下 undefinedconsole.log(this.name);// 输出 undefined因为 this 不再指向 obj},100);}};obj.sayHi();2.箭头函数this 被「钉死」在定义时的作用域代码如下示例constobj{name:Alice,sayHi:function(){console.log(sayHi里的this:,this);// 依然指向 objsetTimeout((){// 箭头函数捕获外层 sayHi 函数的 this也就是 objconsole.log(this.name);// 输出 Alicethis 没有跑飞},100);}};obj.sayHi();三、核心结论词法 this 定义时绑定继承外层作用域的 this普通函数this 看怎么调用谁调用、用 call/apply/bind 等箭头函数this 看在哪定义继承最近一层非箭头函数的 this也正因为 this 被钉死箭头函数不能用 new 调用无法作为构造函数生成新对象所以才会说「不适合扮演构造对象的角色」。