面试题：JavaScript 箭头函数的 this 绑定特性及应用场景

Question

简述 JavaScript 箭头函数与普通函数在 this 绑定上的区别，说明箭头函数 this 绑定的特点，并举例说明在哪些场景下适合使用箭头函数的 this 绑定特性。

Answer 1

区别

• 普通函数：this的绑定取决于函数的调用方式。在全局作用域中调用，this指向全局对象（在浏览器中是window，在Node.js中是global）；作为对象的方法调用时，this指向该对象；通过call、apply、bind方法调用时，this指向指定的对象。
• 箭头函数：箭头函数本身没有自己的this，它的this绑定取决于外层（函数或全局）作用域的this。

箭头函数this绑定特点

1. 词法作用域绑定：箭头函数的this在定义时就已经确定，指向外层作用域的this，不会被调用方式改变。

适合场景

1. 回调函数：在事件处理、数组方法回调等场景中，希望this保持外层作用域的值时。

   const obj = {
       name: 'test',
       arr: [1, 2, 3],
       printName: function() {
           this.arr.forEach(() => {
               console.log(this.name);
           });
       }
   };
   obj.printName(); 
   // 输出：test
   // 这里箭头函数中的this指向obj，因为它定义在obj.printName函数内部，this为obj
   

2. 简化代码：当不需要改变this指向且希望简洁表达函数时，例如在一些简单的函数式编程场景中。