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

待我称王封你为后i 2022-12-19 13:08 128阅读 0赞

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

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

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

**箭头函数的this指向规则：**

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

let a = () =>{};
    console.log(a.prototype); // undefined

*  1
 *  2

1.  箭头函数的`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
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13

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

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

1.  不能直接修改箭头函数的this指向  
    上个例子中的foo函数修改一下，尝试直接修改箭头函数的this指向。

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

*  1
 *  2
 *  3
 *  4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*  1
 *  2
 *  3

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

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

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

*  1
 *  2
 *  3
 *  4
 *  5

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

**箭头函数的`this`指向普通函数时,它的`argumens`继承于该普通函数**  
上面是第一种情况：箭头函数的this指向全局对象，会报arguments未声明的错误。

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12

那么应该如何来获取箭头函数不定数量的参数呢？答案是：`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);

*  1
 *  2
 *  3
 *  4

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

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

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

arguments.push(0); // arguments.push is not a function

*  1

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

arguments = [...arguments]; 或者 ：arguments = Array.from(arguments);

*  1

**`rest`参数有两点需要注意：**

*  `rest`必须是函数的最后一位参数：

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

*  1
 *  2
 *  3
 *  4

*  函数的`length`属性，不包括`rest` 参数

(function(...a) {}).length  // 0
    (function(a, ...b) {}).length  // 1

*  1
 *  2

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

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

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

let a = () => {};
    let b = new  a(); // a is not a constructor

*  1
 *  2

**箭头函数不支持`new.target`：**  
`new.target`是ES6新引入的属性，普通函数如果通过`new`调用，`new.target`会返回该函数的引用。

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

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

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

*  1
 *  2
 *  3
 *  4

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

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

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

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

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
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

**箭头函数相对于普通函数语法更简洁优雅：**  
讲道理，语法上的不同，也属与它们两个的区别！

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

var f = a => a; // 传入a 返回a

*  1

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

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

*  1

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

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

*  1
 *  2
 *  3
 *  4

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

**箭头函数的注意事项**

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7

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

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

*  1
 *  2

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

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

*  1
 *  2
 *  3

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

*  定义字面量方法,this的意外指向。  
    因为箭头函数的简洁

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

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

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7

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

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

*  回调函数的动态`this`  
    下文是一个修改`dom`文本的操作，因为`this`指向错误，导致修改失败：

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

*  1
 *  2
 *  3
 *  4

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

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

## 文章内容小结： ##

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

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]: https://juejin.im/post/5b3715def265da59af40a630#heading-3
[Link 1]: http://es6.ruanyifeng.com/#docs/array%23%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6
[Link 2]: http://es6.ruanyifeng.com/?search=new.target&x=0&y=0#docs/class%23new-target-%E5%B1%9E%E6%80%A7