「ES6基础」箭头函数（Arrow functions）

ES6中，除了let和const新特性，箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特性并非ES6独创。箭头函数顾名思义是使用箭头（=>）定义的函数，属于匿名函数一类。

今天的文章内容将会从以下几个方面，介绍箭头函数：

• 使用语法
• this穿透
• 箭头函数和传统函数的区别

本篇文章阅读时间预计8分钟

使用语法

箭头函数有四种使用语法

1、单一参数的单行箭头函数

如下段代码所示，很简单：

const fn= foo =>`${foo} world`;

这是箭头函数最简洁的形式，常用于用作简单的处理函数，如过滤。如下段代码所示：

let array=[\'a\',\'bc\',\'def\',\'ghij\'];

array=array.filter(item=>item.length>=2);

2、多参数的单行箭头函数 语法也很简单，如下段代码所示：

const fn=(foo,bar) => foo+bar

在实际开发中，函数的参数不会只有一个，在箭头函数中，多参数的语法跟普通函数一样，用括号包裹参数项。我们经常处理函数，如排序，示例代码如下：

let array=[\'a\',\'bc\',\'def\',\'ghij\'];

array=array.sort((a,b) => a.length < b.length);

3、多行箭头函数 单一参数，如下段代码所示：

foo => {

return `${foo} world`;

}

多参数，如下段代码所示：

(foo,bar) => {

return foo+bar;

}

4、无参数箭头函数

如果一个箭头函数无参数传入，则需要用一对空的括号来表示空的参数列表。

const greet = () => \'Hello World\'

以上都是被支持的箭头函数的表达方式，其最大的好处就是简单明了，省略了function关键字，而使用 => 代替。相对于传统的function函数，箭头函数在简单的函数使用中更为简洁直观。

书写箭头的函数过程中，我们应该注意以下几点：

1、使用单行箭头函数时，应避免换行

错误的用法，如下段代码所示：

const fn=x

=> x*2 //SyntaxError

正确的写法，如下：

const fn= x => x*2 //ok

2、参数列别的右括弧、箭头应在一行

错误的用法，如下段代码所示：

const fn = (x,y) //SyntaxError

=> {

return x*y;

}

下段代码书写是正确的：

const fn= (x,y) => { //ok

return x*y

}

const fn= (x,

y) => { //ok

return x*y

}

3、单行箭头函数返回只能包含一条语句

错误的书写，如下段代码所示：

const fn1= x => x=x*2; return x+2; //SyntaxError

正确的书写，如下段代码所示：

const fn2= x => {

x=x*2;

return x+2;

} //ok

4、如果单行箭头返回一个对象，请用圆括号包裹

错误的书写，如下段代码所示,解析引擎会将其解析成一个多行箭头函数：

const ids=[1,2,3];

const users=ids.map(id=>{id:id});

//wrong:[ undefined, undefined, undefined ]

正确的书写，如下段代码所示：

const ids=[1,2,3];

const users=ids.map(id=>({id:id}));

//Correct:[ { id: 1 }, { id: 2 }, { id: 3 } ]

箭头函数十分简洁，特别适合单行回调函数的定义，比如我们有以下需求:

我们有一个这样的名字数组names,[\'Will\',\'Jack\',\'Peter\',\'Steve\',\'John\',\'Hugo\',\'Mike\']，输出序号为偶数的名字[ \'Will\', \'Peter\', \'John\', \'Mike\' ],我们如何使用箭头函数在一行语句完成呢，如下段代码所示：

const names=[\'Will\',\'Jack\',\'Peter\',\'Steve\',\'John\',\'Hugo\',\'Mike\'];

const newSet=names

.map((name,index)=>({

id:index,

name:name

}))

.filter(man => man.id %2 ==0)

.map(man => [man.name])

.reduce((a,b) => a.concat(b))

this穿透

事实上，箭头函数不仅书写简洁，还有一个神奇的功能，就是将函数内部的this延伸上一层作用域中（绑定最近的非箭头函数的上下文），及上一层的上下文会穿透到内层的箭头函数中，让我们先看一段实际的例子，如下段所示：

var Widget={

// A

init:function () {

// B

document.addEventListener(\"click\", function (event){

//C

this.doSomething(event.type);

}, false);

},

doSomething:function (type) {

console.log(\"Handling\"+ type+\"event\");

}

};

Widget.init();

这段代码会如何输出呢，想必大家都猜到了吧，输出undefined,为什么呢？我们在B位置内声明了函数（C区域），this关键词的指向B区域的函数，由于B区域内没有doSomething函数声明，因此输出undefined，ES6之前我们如何修正此问题呢？

我们可以使用bind方法改变this指向A区域Widget对象，示例代码如下：

var Widget={

// A

init:function () {

// B

document.addEventListener(\"click\", (function (event) {

//C

this.doSomething(event.type);

}).bind(this), false);

},

doSomething:function (type) {

console.log(\"Handling\"+ type+\"event\");

}

};

Widget.init();

下面这种方法是我们最常用的方法，我们在B区域声明了that变量，并将其this赋值，确保c区域this的指向至Widget对象：

var Widget={

// A

init:function () {

// B

var that=this;

document.addEventListener(\"click\", function (event) {

//C

that.doSomething(event.type);

console.log(that);

}, false);

},

doSomething:function (type) {

console.log(\"Handling\"+ type+\"event\");

}

};

Widget.init();

有了箭头函数，我们可以使用箭头函数的this穿透功能，将this的作用域延伸至上一层B区域函数，绑定最近的非箭头函数的上下文，如下段代码所示:

var Widget={

//A

init:function () {

//B

document.addEventListener(\"click\", (event) => {

//C

this.doSomething(event.type);

}, false);

},

doSomething:function (type) {

console.log(\"Handling\"+ type+\"event\");

}

};

Widget.init();

箭头函数是不是更简单，代码更清晰呢。

还有一个情况需要注意，箭头函数对上下文的绑定是强制的，无法通过call或aplly进行改变，如下段代码所示：

function widget() {

this.id=123;

this.log=()=>{

console.log(this)

console.log(\'widget log\',this.id);

}

}

var pseudoWidget={

id:456

};

new widget().log.call(pseudoWidget);//123

上述代码会如何输出呢，由于箭头函数对上下文的绑定是强制的，因此this指向不会指向pseudoWidget对象,因此输出123。

箭头函数和传统函数的区别

1、箭头函数作为匿名函数,是不能作为构造函数的,不能使用new

如下段代码所示，我们使用new方法，会提示如下信息：

const B =()=>({wechat:\"前端达人\"});

let b = new B(); //TypeError: B is not a constructor

2、箭头函数不绑定arguments,可以使用剩余参数(rest)解决

function A(a){

console.log(arguments); //[object Arguments] {0: 1}

}

var B = (b)=>{

console.log(arguments); //ReferenceError: arguments is not defined

}

var C = (...c)=>{ //...c即为rest参数

console.log(c); //[3]

}

A(1);

B(2);

C(3);

3、箭头函数this指向具备穿透特性，会捕获其所在上下文的this值

4、箭头函数没有原型属性

var a = ()=>{

return \'前端达人\';

}

function b(){

return \'前端达人\';

}

console.log(a.prototype);//undefined

console.log(b.prototype);//object{...}

5、箭头函数不能当做Generator函数,不能使用yield关键字

6、箭头函数对上下文的绑定是强制的，无法通过call或aplly进行改变

小节

今天的内容就介绍到这里，我们可以看出使用箭头函能减少代码量，更加简介易读。在使用箭头函数时，我们一定要理解箭头函数和传统函数的区别，如果函数功能简单，只是简单的逻辑处理，尽量使用箭头函数。

更多精彩内容，请微信关注\"前端达人”公众号！

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

箭头函数是前端面试环节的一个高频考点，箭头函数是ES6的API，相信很多人都知道，因为它的语法比一般的函数更简洁，所以深受大家的喜爱。这是我们在日常开发中一直使用的API，但大多数同学对它的理解还不够，下面我们来详细了解下箭头函数的基本语法，以及箭头函数与普通函数的区别。

一、基本语法

【1.1】定义函数

定义箭头函在数语法上要比普通函数简洁得多，ES6中允许使用箭头

=>

来定义箭头函数，箭头函数省去了 function 关键字，函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。

【1.2】箭头函数的参数

① 如果箭头函数没有参数，直接写一个空括号即可。

② 如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

③ 如果箭头函数有多个参数，将参数依次用逗号(，)分隔，包裹在括号中即可。

【1.3】箭头函数的函数体

① 如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。

② 如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：

③ 如果箭头函数的函数体只有一条语句并且不需要返回值（最常见是调用一个函数），可以给这条语句前面加一个void关键字

二、箭头函数与普通函数的区别

【2.1】语法更加简洁、清晰

从上面的箭头函数基本语法示例中可以看出，箭头函数的定义要比普通函数定义简洁、清晰得多，很快捷。

【2.2】箭头函数没有 prototype (原型)，所以箭头函数本身没有this

【2.3】箭头函数不会创建自己的this

箭头函数没有自己的this，箭头函数的this指向在定义（注意：是定义时，不是调用时）的时候继承自外层第一个普通函数的this。所以，箭头函数中 this 的指向在它被定义的时候就已经确定了，之后永远不会改变。

【2.4】call | apply | bind 无法改变箭头函数中this的指向

call | apply | bind方法可以用来动态修改函数执行时this的指向，但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向。

【2.4】call | apply | bind 无法改变箭头函数中this的指向

call | apply | bind方法可以用来动态修改函数执行时this的指向，但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向。

【2.5】箭头函数不能作为构造函数使用

我们先了解一下构造函数的new都做了些什么？简单来说，分为四步： ① JS内部首先会先生成一个对象； ② 再把函数中的this指向该对象； ③ 然后执行构造函数中的语句； ④ 最终返回该对象实例。

但是！！因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

【2.6】箭头函数不绑定arguments，取而代之用rest参数...代替arguments对象，来访问箭头函数的参数列表

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

【2.7】箭头函数不能用作Generator函数，不能使用yield关键字

以上就是箭头函数和普通函数区别的详细内容，更多请关注网站的其它相关文章！