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

箭头函数是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 // 更推荐直接当成多条语句的形式来写，可读性高
  };
};

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

var func = ()
           => 1;  // 报错： Unexpected token =>

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

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！

1. 回调函数的动态this

下文是一个修改dom文本的操做，由于this指向错误，致使修改失败：

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

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

1. 考虑代码的可读性，使用普通函数

   • 函数体复杂：

     具体表现就是箭头函数中使用多个三元运算符号，就是不换行，非要在一行内写完，很是恶心！

   • 行数较多
   • 函数内部有大量操做

文章内容小结：

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

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:OBkoro一、邮箱：obkoro1@foxmail.com

以上2019.03.22

参考资料：

MDN 箭头函数

阮一峰-ES6入门

何时你不能使用箭头函数？