箭头函数通过词法绑定使this继承外层作用域，避免手动bind；适用于回调、类实例方法和多层Promise链；但不可作为构造函数、无arguments对象，且Vue选项中不宜使用。
箭头函数通过词法绑定机制，让 this 直接继承自定义时的外层作用域，不再依赖调用方式，从而省去手动绑定的步骤。
不用再写 .bind(this)
传统函数中，回调或异步操作常导致 this 指向丢失，必须显式绑定：
setTimeout(function() { console.log(this.val); }.bind(this), 100);button.addEventListener('click', handler.bind(this));
换成箭头函数后，this 自动沿用外层上下文：
setTimeout(() => console.log(this.val), 100);button.addEventListener('click', () => this.handleClick());
类方法无需担心传递后失联
在类中定义箭头函数作为实例属性，this 始终指向该实例：
fetchData = () => fetch('/api').then(res => res.json());- 即使解构赋值：
const { fetchData } = instance;，调用fetchData()仍能访问实例属性
而普通方法 fetchData() { ... } 被单独引用后，this 就会变成 undefined（严格模式）或全局对象。
避免嵌套函数中的 this 层层传递
多层回调时，传统写法需反复绑定：
getData().then(function(data) { return process(data).then(function(result) { this.update(result); }.bind(this)); }.bind(this));
箭头函数天然链式继承外层 this：
getData().then(data => process(data).then(result => this.update(result)));
逻辑更扁平，可读性更强，也不易漏掉某一层的 .bind(this)。
注意适用边界：哪些地方不能用
箭头函数虽简化了 this 绑定，但有明确限制：
- 不能用作构造函数（
new Foo()会报错） - 没有
arguments对象，需用...args替代 - Vue 生命周期钩子、
computed、methods选项中不宜直接写箭头函数（会丢失组件实例的 this）
它不是万能替代，而是针对“保持上下文”这一高频痛点的精准优化。
