JS中箭头函数与普通函数的区别及this用法详解

在JavaScript中，箭头函数和普通函数（也称为函数表达式或函数声明）之间有几个关键区别，其中最主要的是this关键字的行为差异。

this关键字的行为

普通函数中的this

在普通函数中，this的值取决于函数是如何被调用的：

• 作为对象的方法调用时，this指向该对象。
• 非严格模式下作为全局函数调用时，this通常指向全局对象（在浏览器中是window）。
• 使用new关键字调用时，this指向新创建的对象实例。
• 严格模式下，如果函数没有绑定到任何对象，则this为undefined。

示例：

function regularFunction() {
  console.log(this);
}

const obj = {
  name: '小明',
  sayName: function() {
    console.log(this.name);
  }
};

regularFunction(); // 在浏览器中输出 window，在Node.js中输出 global
obj.sayName();     // 输出 "小明"

箭头函数中的this

箭头函数不绑定自己的this，它从外围作用域继承this。换句话说，箭头函数的this值是基于词法作用域确定的，而不是调用位置。

示例：

const arrowFunction = () => {
  console.log(this);
};

const obj = {
  name: '小美',
  sayName: () => {
    console.log(this.name);
  }
};

arrowFunction(); // 输出全局对象 (如 window 或 global)
obj.sayName();   // 输出 undefined，因为箭头函数不会改变 this 的绑定

其他区别

语法

• 普通函数使用function关键字定义。
• 箭头函数使用=>符号定义，并且可以省略括号和花括号。

论元对象

• 普通函数内部可以通过arguments访问一个类数组对象。
• 箭头函数没有自己的arguments对象，但是可以通过剩余参数(...)来实现类似的功能。

构造函数

• 普通函数可以用作构造函数，通过new关键字创建新的实例。
• 箭头函数不能用作构造函数，因此不能与new关键字一起使用。

总结

• 如果你需要一个函数中的this始终引用定义它的上下文，那么使用箭头函数会更合适。
• 如果你希望函数调用时this能够根据调用方式动态变化，或者需要使用arguments对象，那么应该使用普通函数。

这些是基本的规则，但在复杂的代码结构中可能需要进一步分析具体场景。