跳到主要内容

箭头函数

语法


完整写法

const foo = (argu1,argu2)=>{
console.log('箭头函数',argu1,argu2);
}

简写写法

  • 函数当且仅当只有一个参数时,小括号可以省略

    const foo = argu => {
    console.log("箭头函数", argu);
    };
  • 函数执行体当且仅当只有一行代码,中括号可以省略,并默认将这一行代码的执行结果作为返回值

    const foo = argu => argu++ ;
  • 函数执行体当且仅当只有一行代码,并且返回一个对象,可以省略一组中括号,并且要用小括号包起来

    const foo = argu => ({name:'柏拉图',age:23});

特点


一、声明方式不同,匿名函数

  • 声明一个普通函数需要使用关键字 function 来完成,并且使用 function 既可以声明成一个具名函数也可以声明成一个匿名函数

  • 声明一个箭头函数则只需要使用箭头就可以,无需使用关键字 function,比普通函数声明更简洁

  • 箭头函数只能声明成匿名函数,但可以通过表达式的方式让箭头函数具名

二、this指向不同

箭头函数 没有自己的 this 对象, 内部的 this 就是定义时上层作用域中的this。也就是说,箭头函数内部的 this 指向是固定的,相比之下,普通函数的 this 指向是可变的。

三、箭头函数的this永远不会变,call、apply、bind也无法改变

我们可以用 callapplybind 来改变普通函数的 this 指向,但是由于箭头函数的 this 指向在它定义时就已经确定了,永远指向它定义时的上层作用域中的 this,所以使用这些方法永远也改变不了箭头函数 this 的指向。

四、箭头函数没有原型prototype

因为箭头函数没有自己的 this,它的 this 其实是继承了外层执行环境中的 this,且 this 指向永远不会变,并且箭头函数没有原型 prototype,没法让他的实例的 __proto__ 属性指向,所以箭头函数也就无法作为构造函数,否则用 new 调用时会报错

五、箭头函数不能当成一个构造函数

六、没有new.target

new 是从构造函数生成实例对象的命令。ES6new 命令引入了一个 new.target 属性,这个属性一般用在构造函数中,返回 new 调用的那个构造函数。如果构造函数不是通过 new 命令或 Reflect.construct() 调用的,new.target 会返回 undefined ,所以这个属性可以用来确定构造函数是怎么调用的。

七、箭头函数没有自己的arguments

  • 箭头函数处于全局作用域中,则没有arguments: 箭头函数使用arguments则会报错,因为箭头函数自身是没有arguments的,然后它会往上层作用域中去查找arguments,由于全局作用域中并没有定义arguments,所以会报错

  • 箭头函数处于普通函数的函数作用域中,arguments 则是上层普通函数的 arguments:

八、箭头函数不能重复函数参数名称

九、不可以使用yield命令,因此箭头函数不能用作 Generator 函数。