面试题：JavaScript ES6中箭头函数与普通函数的区别

Question

请详细阐述JavaScript ES6中箭头函数与普通函数在语法、作用域、this指向、arguments对象等方面的区别。

Answer 1

语法区别

1. 箭头函数：语法更为简洁，若只有一个参数，参数括号可省略；若函数体只有一条语句，花括号和return关键字可省略。例如：

// 一个参数，省略括号
const add1 = num => num + 1; 

// 多条语句，需花括号和return
const add2 = (num1, num2) => { 
  return num1 + num2; 
}; 

2. 普通函数：具有完整的function关键字、函数名、参数列表和函数体。例如：

function add(num1, num2) { 
  return num1 + num2; 
} 

作用域区别

1. 箭头函数：没有自己独立的作用域，它的作用域取决于外层（词法）作用域。它会继承外层作用域的变量，不会创建新的作用域。
2. 普通函数：每当函数被调用时，会创建一个新的作用域，函数内部定义的变量在该作用域内有效。

this指向区别

1. 箭头函数：箭头函数没有自己的this，它的this指向定义时所在的外层作用域的this。无论箭头函数在哪里被调用，它的this值都不会改变。例如：

const obj = { 
  name: 'John', 
  sayName: () => { 
    console.log(this.name); 
  } 
}; 
obj.sayName(); // 这里的this指向全局对象（非严格模式下为window，严格模式下为undefined）

2. 普通函数：this指向取决于函数的调用方式。在全局作用域中调用，this指向全局对象（非严格模式下为window，严格模式下为undefined）；作为对象方法调用时，this指向调用该方法的对象；通过call、apply、bind方法调用时，this指向指定的对象。例如：

const obj = { 
  name: 'John', 
  sayName: function() { 
    console.log(this.name); 
  } 
}; 
obj.sayName(); // this指向obj

arguments对象区别

1. 箭头函数：没有自己的arguments对象。如果在箭头函数中访问arguments，它会从外层作用域中查找。例如：

function outer() { 
  const arrow = () => { 
    console.log(arguments[0]); 
  }; 
  arrow(); 
} 
outer(1); // 输出1

2. 普通函数：函数内部有一个arguments对象，它包含了函数调用时传入的所有参数。例如：

function sum() { 
  let total = 0; 
  for (let i = 0; i < arguments.length; i++) { 
    total += arguments[i]; 
  } 
  return total; 
} 
sum(1, 2, 3); // 输出6