深度剖析 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)。箭头函数表达式的语法比函数表达式更简洁,并且没有自己的thisargumentssupernew.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 创建实例对象,报错如下:

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第1张图片

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

1.普通函数 function

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

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

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第2张图片

2.箭头函数 =>

 箭头函数没有 prototype 属性

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

上述代码报错:

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第3张图片

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

1.普通函数 function

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

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第4张图片

2.箭头函数 =>

 箭头函数不绑定arguments对象 

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

在原生js中,上述代码会报错:

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第5张图片

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

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第6张图片

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

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

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第7张图片

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

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。

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第8张图片

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

apply、call、bind中使用箭头函数 ,不能改变this指向。下面展示了applycall、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指向

深度剖析 JS 的箭头函数 = > 与普通函数 function 的区别_第9张图片

总结

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


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

你可能感兴趣的:(Vue,JavaScript,javascript,vue.js,前端)