JavaScript ES6 箭头函数与普通函数的区别详解【面试必备，值得收藏】

今天下午在面试的过程中，有一位面试官就问到了这道题目。
说实话，如果不是今天问到了这个问题，我还不会去仔细对比分析一下这两个我们整天使用的函数声明方式，我们只有在不断总结中才会不断进步。
同时，也非常感谢今天下午给我面试的这位面试官。

---

一、箭头函数基本使用

ES6 中允许使用箭头 => 来定义箭头函数，具体语法如下：

// 箭头函数
let fn = (name) => {
    // 函数体
    return `Hello ${name} !`;
};

// 等同于 普通函数
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

箭头函数要比普通函数在定义方面要简洁：箭头函数省略了 function 关键字，采用 => 来定义函数。函数的参数放在 => 前面的括号中，函数体跟在 => 后的花括号中。

1、关于箭头函数的参数

• 如果箭头函数没有参数，直接写一个空括号 () 即可。

  // 没有参数
  let fn = () => {
      console.log(111);
  };
  

• 如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

  // 只有一个参数，可以省去参数括号
  let fn = name => {
      console.log(`Hello ${name} !`)
  };
  

• 如果箭头函数有多个参数，将参数依次用逗号,分隔，包裹在括号中即可。

  // 有多个参数，用逗号分隔
  let fn = (val1, val2, val3) => {
      return [val1, val2, val3];
  };
  

2、关于箭头函数的函数体

• 如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{}。

  let fn = val => val;
  // 等同于
  let fn = function (val) { return val };
  
  let sum = (num1, num2) => num1 + num2;
  // 等同于
  let sum = function(num1, num2) {
    return num1 + num2;
  };
  

• 如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：

  // 用小括号包裹要返回的对象，不报错
  let getTempItem = id => ({ id: id, name: "Temp" });
  
  // 但绝不能这样写，会报错。
  // 因为对象的大括号会被解释为函数体的大括号
  let getTempItem = id => { id: id, name: "Temp" };
  

• 如果箭头函数的函数体只有一条语句并且不需要返回值（最常见是调用一个函数），可以给这条语句前面加一个 void 关键字

  let fn = () => void doesNotReturn();
  

• 箭头函数最常见的用处就是简化回调函数

  // 例子一
  // 正常函数写法
  [1,2,3].map(function (x) {
    return x * x;
  });
  
  // 箭头函数写法
  [1,2,3].map(x => x * x);
  
  // 例子二
  // 正常函数写法
  var result = [2, 5, 1, 4, 3].sort(function (a, b) {
    return a - b;
  });
  
  // 箭头函数写法
  var result = [2, 5, 1, 4, 3].sort((a, b) => a - b);
  

---

二、箭头函数与普通函数的区别

1、语法不同

箭头函数使用箭头 => 定义，普通函数中没有

// 普通函数
function fn () {
  // code
}
// 箭头函数
let fn = () => {
  // code
}

2、箭头函数都是匿名函数

普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。

// 普通函数
// 具名函数
function fn () {
  // code
}
// 匿名函数
let fn = function() {
  // code
}

// 箭头函数全都是匿名函数
let fn = () => {
  // code
}

3、箭头函数不能用于构造函数，不能使用 new

普通函数可以用于构造函数，以此创建对象实例。

function Person(name, age){
   this.name = name;
   this.age = age;
}
let admin = new Person("前端小新", 18);
console.log(admin.name); // 前端小新
console.log(admin.age);  // 18

Person 用作构造函数，通过它可以创建实例化对象。
但是箭头函数不能用作构造函数。

4、箭头函数不会创建自己的 this

箭头函数没有自己的 this，它会捕获自己在定义时所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

实例一：

var id = 'Global';
function fn1() {
    // setTimeout中使用普通函数
    setTimeout( function() {
        console.log( this.id );
    }, 2000);
}
function fn2() {
    // setTimeout中使用箭头函数
    setTimeout(() => {
        console.log( this.id );
    }, 2000)
}

fn1.call({id: 'Obj'});     // 'Global'
fn2.call({id: 'Obj'});     // 'Obj'

代码分析：

• 函数 fn1 中的 setTimeout 中使用普通函数，2秒后函数执行时，这时函数其实是在全局作用域执行的，所以 this 指向 Window 对象，this.id 就指向全局变量 id，所以输出 'Global'。
• 函数 fn2 中的 setTimeout 中使用是箭头函数，这个箭头函数的 this 在定义时就确定了，它继承了它外层 fn2 的执行环境中的 this，而 fn2 调用时 this 被 call 方法改变到了对象 {id: 'Obj'} 中，所以输出 'Obj'。

实例二：

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function() {
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};

obj.a();  // 'OBJ'
obj.b();  // 'GLOBAL'

代码分析：

• 对象 obj 的方法a使用普通函数定义的，普通函数作为对象的方法调用时，this 指向它所属的对象。所以，this.id 就是 obj.id ，所以输出'OBJ'。
• 但是方法b是使用箭头函数定义的，箭头函数中的 this 实际是继承的它定义时所处的全局执行环境中的 this，所以指向 Window 对象，所以输出 'GLOBAL'。（这里要注意，定义对象的大括号{}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中！）

5、call()/apply()/bind() 无法改变箭头函数中 this 的指向

call()/apply()/bind() 方法可以用来动态修改函数执行时 this 的指向，但由于箭头函数的 this 定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数 this 的指向，虽然这么做代码不会报错。

var id = 'Global';
// 箭头函数定义在全局作用域
let fn = () => {
    console.log(this.id)
};

fn();     // 'Global'
// this的指向不会改变，永远指向Window对象
fn.call({id: 'Obj'});     // 'Global'
fn.apply({id: 'Obj'});    // 'Global'
fn.bind({id: 'Obj'})();   // 'Global'

6、箭头函数不绑定 arguments，取而代之用rest参数...解决

每一个普通函数调用后都具有一个 arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

function fn1(args) {
  console.log(arguments);
}
fn1(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

let fn2 = (args) => {
  console.log(arguments);
}
fn2(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

let fn3 = (...args) => {
  console.log(args);
}
fn3(3,82,32,11323);  // [3, 82, 32, 11323]

7、箭头函数没有原型 prototype

let fn = () => {
    console.log('Hello World !')
};
console.log(fn.prototype); // undefined

8、其他区别

• 箭头函数不能 Generator 函数，不能使用 yeild 关键字。
• 箭头函数不具有 super。
• 箭头函数不具有 new.target。

---

总结

箭头函数与普通函数之间的区别，最重要的还是与 this 相关：

1. 箭头函数不会创建自己的 this，永远指向其上下文的 this；
2. 箭头函数继承而来的 this 指向永远不变；
3. 普通函数的 this 指向调用它的那个对象。

---

参考文章：
1、https://blog.csdn.net/qq_42258904/article/details/110083064
2、https://www.jianshu.com/p/2e01b9fd210d