深度剖析 JS 的箭头函数 = ＞ 与普通函数 function 的区别

目录

前言

箭头函数的概念

区别一：基本语法

1.普通函数 function

2.箭头函数 =>

区别二：this指向  

1.普通函数 function

2.箭头函数 =>

区别三：箭头函数不能作为构造函数

1.普通函数 function

2.箭头函数 =>

区别四：箭头函数没有 prototype 属性

1.普通函数 function

2.箭头函数 =>

区别五：箭头函数不绑定arguments

1.普通函数 function

2.箭头函数 =>

区别六：在对象方法中使用箭头函数

区别七：apply、call、bind中使用箭头函数，不能改变this指向

总结

---

前言

ES6 中添加了箭头函数的规范，在常用的前端框架，如 Vue，也会经常使用到箭头函数，今天我们就来深度学习箭头函数(arrow function)。本文主要介绍箭头函数的概念，重点介绍它与普通函数(function)的区别，包括基本语法、this指向、使用场景等。

箭头函数的概念

ES6提供了一种符号 => 来定义函数，看上去像箭头，因此叫做箭头函数(arrow function)。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。（官方文档的解释）

区别一：基本语法

1.普通函数 function

function fn(param1,param2,...,paramN){
    statements;
}

即格式为：

funtion 函数名（参数列表） {

        语句；

        return 表达式

}

2.箭头函数 =>

// 当只有一个参数时，圆括号是可选的
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号
() => { statements }

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

上述基本语法可以概括为：

1. 如果只有一个形参，则可以省略圆括号()；
2. 如果没有形参，则必须写成一对圆括号()；
3. 如果函数体只有一行，则可以省略花括号{}，且同时，省略return，函数的返回值为该条语句的执行结果；

区别二：this指向  

1.普通函数 function

使用function定义的普通函数，this的指向随着调用环境的变化而变化，即：this指向调用该函数的对象，如果没有直接指定就是window，具体有以下几种情况：

function Person(color) {
    console.log(this)
    this.color = color;
    this.getColor = function () {
      console.log(this)
      return this.color;
    };
    this.setColor = function (color) {
      console.log(this)
      this.color = color;
    };
  }

  Person("red"); //this指向 window

  var p = new Person("yello"); //this指向 p

  p.getColor(); //this指向 p

  var obj = {};
  p.setColor.call(obj, "black"); //this指向 obj

  var test = p.setColor;
  test(); //this指向 window

  function fun1() {
    function fun2() {
      console.log(this);
    }

    fun2(); //this指向 window
  }
  fun1();

2.箭头函数 =>

箭头函数不会创建自己的 this ，始终指向箭头函数声明时所在作用域下的 this 值，也就是从箭头函数所在作用域的父层继承this。

function Count() {
    console.log(this) //指向Count的实例对象 c
    this.num = 0
    setInterval(() => {
            console.log(this) //指向Count的实例对象 c
            this.num++
    }, 1000);
}
let c = new Count()

区别三：箭头函数不能作为构造函数

1.普通函数 function

普通函数可以使用构造器

function Test(a,b) {
    return a+b
}
let fn = new Test();

上述使用方法，不会报错。 

2.箭头函数 =>

 箭头函数不能用作构造器，和 new 一起使用会抛出错误

let Fn = () =>{}
let fn = new Fn()

如上，Fn接收箭头函数的返回值，被作为构造器，然后使用 new 创建实例对象，报错如下：

区别四：箭头函数没有 prototype 属性

1.普通函数 function

let fn = function Test(a,b) {
     return a+b
}
console.log(fn)

普通函数Test的prototype属性，默认指向一个空的Object对象，关于原型链这一块的知识点比较多且难，这里不作细致介绍。

2.箭头函数 =>

 箭头函数没有 prototype 属性

var Fn = () => {};
console.log(Fn.prototype);

上述代码报错：

区别五：箭头函数不绑定arguments

1.普通函数 function

function Fn(a,b){
    console.log(arguments)
}
Fn(1,4,3,2,5)

2.箭头函数 =>

 箭头函数不绑定arguments对象 

let Fn = (a,b) => {
    console.log(a,b)
    console.log("箭头函数中的arguments：",arguments)
}
Fn(1,4)

在原生js中，上述代码会报错：

在 Vue 中，Vue 对箭头函数进行了处理，上述代码不会报错，而是箭头函数中的 arguments 长度为0，即未绑定arguments对象 。

解决办法：在圆括号内使用展开运算符 ... 来实现

let Fn2 = (...c) =>{
   console.log(c)
   console.log("箭头函数：",c)
}
Fn2(2,5,1,3)

区别六：在对象方法中使用箭头函数

let obj1 = {
   a: 10,

   // 匿名函数 function
   b: function () {
      console.log("obj1.b的this：",this);
      console.log("obj1.b的this.a：",this.a);
   },

   // 箭头函数
   c: () => {
     // this继承父层的this
     console.log("obj1.c的this：",this);
     console.log("obj1.c的this.a：",this.a);
   },
};
obj1.b()
obj1.c()

在对象的方法中分别使用匿名函数function和箭头函数，对象调用该方法时，匿名函数的this指向被其调用的对象obj1，箭头函数的this指向父层的this，由于该代码是写在 Vue 项目中，因此this指向组件实例，在组件实例中，并没有变量a，因此this.a是undefined。

区别七：apply、call、bind中使用箭头函数，不能改变this指向

apply、call、bind中使用箭头函数 ，不能改变this指向。下面展示了apply，call、bind同理。

let obj1 = {
    a:10,

    // 匿名函数 function
    b:function(){
        console.log(this.a+1)
    },

    // 箭头函数     
    c:() => {
        console.log(this.a)   
        console.log(this.a-1)
    }
}
let obj2 = {
    a:100
}
obj1.b.apply(obj2) //打印得到101，改变this指向，this指向调用该方法的对象,这里是obj2
obj1.c.apply(obj2) //打印得到 undefined 和 NaN，没有改变this指向

总结

箭头函数表达式更适用于那些本来需要匿名函数的地方。在正确的场合使用箭头函数，能让代码变得更加简洁短小。但箭头函数也不是万能的，在需要动态上下文的场景中，使用箭头函数需要格外地小心，如：对象的方法、原型、事件的回调、构造函数。

---

参考文档：箭头函数 - JavaScript | MDN