Angular/TypeScript：请求详解function(){}与()=>{}的区别

咱直接揪最核心的this说事儿，这也是你最关心的点，先给你掰明白：

1. this 的绑定逻辑完全是两码事 #

普通函数 function(){}：this 是「动态认大哥」 #

你可以把它理解成谁调用我，我就认谁当this。它的this不是写代码时定死的，是运行时看触发它的主体是谁才决定的。

举个Angular组件里的真实场景：假设你组件里有个属性username = '张三'，写个普通函数：

showName() {
  console.log(this.username);
}

如果直接在组件里调用this.showName()，那this就是当前组件实例，能正常打印张三。但要是把它传给定时器或者RxJS订阅，坑就来了：

ngOnInit() {
  setTimeout(this.showName, 1000); // 1秒后必报错！
}

报错原因是：setTimeout调用showName的时候，this变成了浏览器的window对象（严格模式下是undefined），根本不是你的组件实例，自然拿不到username。

箭头函数 ()=>{}：this 是「认死理」 #

箭头函数就像个一根筋的家伙，它的this在写代码的时候就定死了，直接继承自它所在的上下文环境的this。

还是刚才的例子，换成箭头函数写法：

showName = () => {
  console.log(this.username);
}

这时候不管你把它传给setTimeout，还是绑到按钮点击事件上，this永远是当前组件实例——因为它在定义的时候就「记住」了自己所在的组件上下文的this，根本不会变。

2. 顺带提几个次要区别 #

• 不能当构造函数用：箭头函数没法用new关键字实例化对象，比如new (()=>{})()会直接报错，普通函数可以做构造函数。
• 没有自己的arguments对象：普通函数里能通过arguments拿到所有传入的参数，箭头函数不行，要拿参数得用剩余参数...args。
• 没法当生成器函数：箭头函数不能加*变成生成器函数，普通函数可以。

最后给你个Angular里的实用建议 #

• 如果你写的组件方法需要在回调（定时器、RxJS订阅、自定义事件）里访问组件的属性/方法，优先用箭头函数，省得手动写bind(this)去绑定上下文。
• 如果你需要动态改变this的指向，或者要写构造函数、生成器函数，那就老老实实写普通函数。

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