详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API，大部分同学却对它的了解程度还是不够深…

普通函数和箭头函数的区别：

箭头函数的this指向规则：

1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this

let a = () =>{};
console.log(a.prototype); // undefined
复制代码

2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。

下面栗子中在一个函数中定义箭头函数，然后在另一个函数中执行箭头函数。

let a,
  barObj = { msg: 'bar的this指向' };
fooObj = { msg: 'foo的this指向' };
bar.call(barObj); // 将bar的this指向barObj
foo.call(fooObj); // 将foo的this指向fooObj
function foo() {
  a(); // 结果：{ msg: 'bar的this指向' }
}
function bar() {
  a = () => {
    console.log(this, 'this指向定义的时候外层第一个普通函数'); // 
  }; // 在bar中定义 this继承于bar函数的this指向
}
复制代码

从上面栗子中可以得出两点

1. 箭头函数的this指向定义时所在的外层第一个普通函数，跟使用位置没有关系。
2. 被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变

3. 不能直接修改箭头函数的this指向

上个栗子中的foo函数修改一下，尝试直接修改箭头函数的this指向。

let fnObj = { msg: '尝试直接修改箭头函数的this指向' };
function foo() {
  a.call(fnObj); // 结果：{ msg: 'bar的this指向' }
}
复制代码

很明显，call显示绑定this指向失败了，包括aaply、bind都一样。

它们(call、aaply、bind)会默认忽略第一个参数，但是可以正常传参。

然后我又通过隐式绑定来尝试同样也失败了，new 调用会报错，这个稍后再说。

SO，箭头函数不能直接修改它的this指向。

幸运的是，我们可以通过间接的形式来修改箭头函数的指向：

去修改被继承的普通函数的this指向，然后箭头函数的this指向也会跟着改变，这在上一个栗子中有演示。

bar.call(barObj); // 将bar普通函数的this指向barObj 然后内部的箭头函数也会指向barObj
复制代码

4. 箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)

唔，这个问题实际上是面试官提出来的，当时我认为的箭头函数规则就是：箭头函数的this指向继承自外层第一个普通函数的this，现在看来真是不严谨(少说一个定义的时候)，要是面试官问我：定义和执行不在同一个普通函数中，它又指向哪里，肯定歇菜…

既然箭头函数的this指向在定义的时候继承自外层第一个普通函数的this，那么：

当箭头函数外层没有普通函数，它的this会指向哪里？

这里跟我之前写的this绑定规则不太一样(不懂的可以点进去看一下),普通函数的默认绑定规则是：

在非严格模式下，默认绑定的this指向全局对象，严格模式下this指向undefined

如果箭头函数外层没有普通函数继承，它this指向的规则：

经过测试，箭头函数在全局作用域下，严格模式和非严格模式下它的this都会指向window(全局对象)。

Tip：测试的时候发现严格模式在中途声明无效，必须在全局/函数的开头声明才会生效：

a = 1;
'use strict'; // 严格模式无效 必须在一开始就声明严格模式
b = 2; // 不报错
复制代码

箭头函数的

箭头函数的arguments

箭头函数的this指向全局，使用arguments会报未声明的错误

如果箭头函数的this指向window(全局对象)使用arguments会报错，未声明arguments。

let b = () => {
  console.log(arguments);
};
b(1, 2, 3, 4); // Uncaught ReferenceError: arguments is not defined
复制代码

PS：如果你声明了一个全局变量为arguments，那就不会报错了，但是你为什么要这么做呢？

箭头函数的this指向普通函数时,它的argumens继承于该普通函数

上面是第一种情况：箭头函数的this指向全局对象，会报arguments未声明的错误。

第二种情况是：箭头函数的this如果指向普通函数,它的argumens继承于该普通函数。

function bar() {
  console.log(arguments); // ['外层第二个普通函数的参数']
  bb('外层第一个普通函数的参数');
  function bb() {
    console.log(arguments); // ["外层第一个普通函数的参数"]
    let a = () => {
      console.log(arguments, 'arguments继承this指向的那个普通函数'); // ["外层第一个普通函数的参数"]
    };
    a('箭头函数的参数'); // this指向bb
  }
}
bar('外层第二个普通函数的参数');
复制代码

那么应该如何来获取箭头函数不定数量的参数呢？答案是：ES6的rest参数（...扩展符）

rest参数获取函数的多余参数

这是ES6的API，用于获取函数不定数量的参数数组，这个API是用来替代arguments的，API用法如下：

let a = (first, ...abc) => {
  console.log(first, abc); // 1 [2, 3, 4]
};
a(1, 2, 3, 4);
复制代码

上面的栗子展示了，获取函数除第一个确定的参数，以及用一个变量接收其他剩余参数的示例。

也可以直接接收函数的所有参数，rest参数的用法相对于arguments的优点：

1. 箭头函数和普通函数都可以使用。
2. 更加灵活，接收参数的数量完全自定义。
3. 可读性更好参数都是在函数括号中定义的，不会突然出现一个arguments，以前刚见到的时候，真的好奇怪了！
4. rest是一个真正的数组，可以使用数组的API。因为arguments是一个类数组的对象，有些人以为它是真正的数组，所以会出现以下场景：

   arguments.push(0); // arguments.push is not a function
   复制代码

   如上，如果我们需要使用数组的API，需要使用扩展符/Array.from来将它转换成真正的数组:

   arguments = [...arguments]; 或者 ：arguments = Array.from(arguments);
   复制代码

rest参数有两点需要注意：

1. rest必须是函数的最后一位参数：

   let a = (first, ...rest, three) => {
     console.log(first, rest,three); // 报错：Rest parameter must be last formal parameter
   };
   a(1, 2, 3, 4);
   复制代码

2. 函数的length属性，不包括 rest 参数

   (function(...a) {}).length  // 0
   (function(a, ...b) {}).length  // 1
   复制代码

扩展运算符还可以用于数组，这里是阮一峰老师的文档

PS：感觉这里写多了，但比较喜欢把一个知识点讲清楚…

使用new调用箭头函数会报错

无论箭头函数的thsi指向哪里，使用new调用箭头函数都会报错，因为箭头函数没有constructor

let a = () => {};
let b = new  a(); // a is not a constructor
复制代码

箭头函数不支持new.target：

new.target是ES6新引入的属性，普通函数如果通过new调用，new.target会返回该函数的引用。

此属性主要：用于确定构造函数是否为new调用的。

1. 箭头函数的this指向全局对象，在箭头函数中使用箭头函数会报错

   let a = () => {
     console.log(new.target); // 报错：new.target 不允许在这里使用
   };
   a();
   复制代码

2. 箭头函数的this指向普通函数，它的new.target就是指向该普通函数的引用。

   new bb();
   function bb() {
     let a = () => {
       console.log(new.target); // 指向函数bb：function bb(){...}
     };
     a();
   }
   复制代码

更多关于new.target可以看一下阮一峰老师关于这部分的解释。

箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名

如下示例，普通函数的函数参数支持重命名，后面出现的会覆盖前面的，箭头函数会抛出错误：

function func1(a, a) {
  console.log(a, arguments); // 2 [1,2]
}

var func2 = (a,a) => {
  console.log(a); // 报错：在此上下文中不允许重复参数名称
};
func1(1, 2); func2(1, 2);
复制代码

箭头函数相对于普通函数语法更简洁优雅：

讲道理，语法上的不同，也属与它们两个的区别！

1. 箭头函数都是匿名函数，并且都不用写function
2. 只有一个参数的时候可以省略括号:

   var f = a => a; // 传入a 返回a
   复制代码

3. 函数只有一条语句时可以省略{}和return

   var f = (a,b,c) => a; // 传入a,b,c 返回a
   复制代码

4. 简化回调函数，让你的回调函数更优雅：

[1,2,3].map(function (x) {
  return x * x;
}); // 普通函数写法 
[1,2,3].map(x => x * x); // 箭头函数只需要一行
复制代码

---

箭头函数的注意事项及不适用场景

箭头函数的注意事项

1. 一条语句返回对象字面量，需要加括号，或者直接写成多条语句的return形式，否则像func中演示的一样，花括号会被解析为多条语句的花括号，不能正确解析

var func1 = () => { foo: 1 }; // 想返回一个对象,花括号被当成多条语句来解析，执行后返回undefined
var func2 = () => ({foo: 1}); // 用圆括号是正确的写法
var func2 = () => {
  return {
    foo: 1 // 更推荐直接当成多条语句的形式来写，可读性高
  };
};
复制代码

2. 箭头函数在参数和箭头之间不能换行！

var func = ()
           => 1;  // 报错： Unexpected token =>
复制代码

3. 箭头函数的解析顺序相对靠前

MDN: 虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊运算符优先级解析规则

let a = false || function() {}; // ok
let b = false || () => {}; // Malformed arrow function parameter list
let c = false || (() => {}); // ok
复制代码

箭头函数不适用场景：

围绕两点：箭头函数的this意外指向和代码的可读性。

1. 定义字面量方法,this的意外指向。

因为箭头函数的简洁

const obj = {
  array: [1, 2, 3],
  sum: () => {
    // 根据上文学到的：外层没有普通函数this会指向全局对象
    return this.array.push('全局对象下没有array，这里会报错'); // 找不到push方法
  }
};
obj.sum();
复制代码

上述栗子使用普通函数或者ES6中的方法简写的来定义方法，就没有问题了：

// 这两种写法是等价的
sum() {
  return this.array.push('this指向obj');
}
sum: function() {
  return this.array.push('this指向obj');
}
复制代码

还有一种情况是给普通函数的原型定义方法的时候，通常会在普通函数的外部进行定义，比如说继承/添加方法的时候。

这时候因为没有在普通函数的内部进行定义，所以this会指向其他普通函数，或者全局对象上，导致bug！

2. 回调函数的动态this

下文是一个修改dom文本的操作，因为this指向错误，导致修改失败：

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    this.innerHTML = 'Clicked button'; // this又指向了全局
});
复制代码

相信你也知道了，改成普通函数就成了。

3. 考虑代码的可读性，使用普通函数
   • 函数体复杂：具体表现就是箭头函数中使用多个三元运算符号，就是不换行，非要在一行内写完，非常恶心！
   • 行数较多
   • 函数内部有大量操作

文章内容小结：

普通函数和箭头函数的区别：

1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this
2. 箭头函数的this在定义的时候继承自外层第一个普通函数的this。
3. 如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
4. 箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
5. 箭头函数的this指向全局，使用arguments会报未声明的错误。
6. 箭头函数的this指向普通函数时,它的argumens继承于该普通函数
7. 使用new调用箭头函数会报错，因为箭头函数没有constructor
8. 箭头函数不支持new.target
9. 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
10. 箭头函数相对于普通函数语法更简洁优雅

箭头函数的注意事项及不适用场景

箭头函数的注意事项：

1. 箭头函数一条语句返回对象字面量，需要加括号
2. 箭头函数在参数和箭头之间不能换行
3. 箭头函数的解析顺序相对||靠前

不适用场景：箭头函数的this意外指向和代码的可读性。

---

结语

呕心沥血，可以说是很全了，反正第一次问到我的时候只能想到箭头函数的this是继承而来的，以及语法上的简洁性，其他的我都不知道，希望这篇文章能够帮助各位同学学到知识。

PS：目前找工作中，求大佬们内推，中高级前端，偏JS，Vue，上海杨浦。

博客、前端积累文档、公众号、GitHub、wx:OBkoro1、邮箱：[email protected]

以上2019.03.22

参考资料：

MDN 箭头函数

阮一峰-ES6入门

什么时候你不能使用箭头函数？