箭头功能可以说是es6的一大亮点。使用箭头函数可以简化编码过程，使代码更加简洁。下面这篇文章主要介绍ES6中箭头函数的相关信息，通过一个示例代码非常详细的介绍。有需要的朋友可以参考一下。

目录

一、箭头函数介绍1.1什么是箭头函数1.2基本语法1.3箭头函数的参数1.4箭头函数的函数体二。箭头函数III的指向规则。Arrow函数的arguments规则3.1 Arrow函数没有自己的arguments3.2可以用rest替换，rest函数的冗余参数3.3 Arrow函数不支持重复函数参数的名称3.4 Arrow函数不能用作生成器，不能使用yeild关键字。四。箭头功能5的注意事项。箭头功能不适用于场景6。箭头函数与普通函数的简单区别概述

一、箭头函数的介绍

1.1 什么是箭头函数

在ES6中允许=来定义函数。箭头相当于匿名函数，简化了函数的定义。

1.2 基本语法

//箭头功能

设fn=(名称)={

//函数体

返回“Hello ${name}！`;

};

//相当于

设fn=函数(名称){

//函数体

返回“Hello ${name}！`;

};

arrow函数在语法上比普通函数简单得多。箭头是箭头=定义函数，省略了关键字function。

函数的参数放在=前的括号中，函数体放在=后的大括号中

1.3 箭头函数的参数

如果箭头函数没有参数，写空括号。

//没有参数，写空括号

设fn=()={

console . log(' hello ')；

};

如果arrow函数有一个参数，也可以省略参数两边的括号。

//只有一个参数，所以可以省略参数括号。

设fn=name={

console.log(`hello ${name}！`)

};

如果arrow函数有多个参数，请依次用逗号(，)分隔参数，并用括号括起来。

设fn=(val1，val2，val3，val4)={

return [val1，val2，val3，val 4]；

}

1.4 箭头函数的函数体

如果arrow函数的函数体中只有一个执行代码，简单的返回一个变量或者一个简单的js表达式，函数体中的花括号{}可以省略。

//返回一个简单变量val

设f=val=val

//相当于

设f=函数(val) {返回val }；

//返回一个简单的js表达式num1 num2

设sum=(num1，num 2)=num 1 num 2；

//相当于

设sum=function(num1，num2) {

返回num1 num2

};

如果arrow函数的函数体只有一个代码，则返回一个对象，而不是变量和简单的js表达式。

//写错了—花括号会被解释为函数体

let getItem=id={

id: id，

姓名：“加布”

};

//正确书写

let getItem=id=({

id: id，

姓名：“加布”

});

如果arrow函数的函数体只有一条语句，不需要返回值(回调函数中最常用)，则添加void关键字。

设fn=()=void does not return()；

箭头是用来回调函数的，往往很简洁。

//栗子1

//通用函数

[1, 2, 3].地图(函数(x) {

返回x x

});

//ES6箭头功能

[1, 2, 3].map(x=x x)；

//栗子2

//通用函数

var结果=[2，4，5，1，6]。排序(函数(a，b) {

返回a-b；

});

//ES6箭头功能

var结果=[2，4，5，1，6]。sort((a，b)=a-b)；

二、箭头函数的this指向规则

2.1 箭头函数没有原型prototype，因此箭头函数没有this指向

设fn=()={

console.log('Hello World！')

};

console . log(fn . prototype)；//未定义

2.2 箭头函数不会创建自己的this，如果存在外层第一个普通函数，在定义的时候会继承它的this

箭头没有自己的这个点，它会在定义所在的地方捕捉外层执行环境，并继承这个这个这个这个值。箭头的这个点在定义的时候就确定了，之后就再也不会变了。(!永远)

(一)栗子1个

var id=' Global

//通用函数

函数fn1() {

setTimeout(function () {

console.log(this.id)

}, 1000);

}

//箭头功能

函数fn2() {

setTimeout(()={

console.log(this.id)

}, 1000);

}

fn1.call({

id:“对象”

});//全局

fn2.call({

id:“对象”

});//obj

解析：一秒后在全局范围内执行普通函数的setTimeout，这一切指向window对象，this.id指向全局变量id，输出Golbal。箭头的这个是在定义的时候确定的，在fn2的执行环境中继承了这个。fn2的this指向被call方法改变并绑定到obj的对象。

(2)栗子2

var id=' Global

var obj={

id:“OBJ”，

答：函数(){

console.log(this.id)

}，//方法一个通用的函数定义

b: ()={

console.log(this.id)

}//方法B由arrow函数定义

};

obj . a()；//OBJ

obj . b()；//全局

解析：普通函数作为对象的方法调用，这个指向它所属的对象(谁调用它就指向谁)，这个. id就是obj . id；箭头继承了这个定义它的执行环境，指向窗口对象，指向全局变量，输出全局。大括号{}不能形成单独的执行环境，所以还是在全局的情况下。

2.3 箭头函数的this是继承而来的永远不会变，call/apply/bind也无法改变

的。call()/。apply()/。bind()方法可以用来在函数执行时动态修改this的方向，但是箭函数的this在定义时就已经确定了，永远不会改变。

var name='gaby '

var person={

名字：“加布里埃尔”，

跟大家讲：function () {

console.log('说你好，this.name)

}，//普通函数

say2: ()={

console.log('say2 hello，this.name)

}//箭头函数

}

person.say.call({

姓名：“迈克”

})

person.say2.call({

姓名：“艾米”

})

分析：say的普通函数通过call call改变了这一点。say2 arrow函数调用调用绑定试图改变this point，但还是打印出了外部普通函数的this point，窗口对象的全局变量名。

2.4 箭头函数this指向只能间接修改

间接修改：修改继承的普通函数的this点，箭头函数的this点也会改变。

这个箭头指向定义它的外层的第一个普通函数，它与使用的位置无关。

让艾尔

让aObj={

消息：“A的这个指向”

};

bObj={

消息：“B的这个B指向”

};

a . call(aObj)；//将A的this指向aObj

b . call(bObj)；//将B普通函数的this指向bObj箭头函数内部的this指向也会指向bObj

函数b() {

al()；

}

函数a() {

al=()={

Console.log(this，“当它被定义时，它指向外层中的第一个普通函数”)

};

}

2.5 箭头函数外层没有函数，严格模式和非严格模式下它的this都会指向window全局对象

箭头的this指向从外层的第一个普通函数继承的this，那么如果没有外层函数，它的this指向哪里呢？

这个的绑定规则：在非严格模式下，这个绑定默认指向全局对象，在严格模式下，这个指向undefined。

如果箭头函数外层没有普通的函数继承，则箭头函数在全局范围内，其this会指向严格模式和非严格模式下的窗口(全局对象)。

2.6 多层嵌套函数this指向

箭头中的This指的是最近范围内的this，也就是在外范围内逐层搜索this，直到有了this的定义。

2.7 箭头函数不能作为构造函数使用new

构造函数做了什么？

老师首先会成为JS内的一个对象。

在函数中将此指向对象。

然后执行构造函数中的语句。

最后返回对象实例。

箭头没有自己的this，它从外部执行环境继承了this，这一点永远不会改变。New将报告一个错误

设fn=(姓名，年龄)={

this.name=name

this.age=年龄；

};

let person=new fn('gaby '，20)

2.8 箭头函数不支持new.target

ES6新引入的属性，普通函数可以被new调用，new.target返回这个函数的引用。用于确定构造函数是否是新调用。Arrows不能使用new作为构造函数，自然也不支持new.targer

(1)arrow函数的this指向全局对象，在arrow函数中使用arrow函数会出错。

设fn=()={

console.log(new.target)

};

fn()

(2)箭头函数的this指向一个普通函数，它的new.target是对普通函数的引用。

新fn2()；

函数fn2() {

设fn=()={

console.log(new.target)

};

fn()；

}

三、箭头函数的arguments规则

3.1 箭头函数没有自己的arguments

(1)箭头函数在全局范围内。

箭头this指向全局对象，它将报告一个未声明的参数错误。

设fn=name={

console.log(参数)

}

设fn2=函数(名称){

console.log(参数)

}

//fn()

fn2()

设fn=name={

console.log(参数)

}

设fn2=函数(名称){

console.log(参数)

}

fn()

fn2()

解析：普通函数可以打印参数，箭头函数报错。因为arrow函数在全局范围内，全局范围内没有参数的定义，arrow函数本身没有参数，所以报错。

(2)如果arrow函数的this指向一个普通函数，那么它的argumens继承自普通函数。

设fn2=函数(名称){

console.log('fn2:'，参数)

设fn=name={

console.log('fn:'，参数)

}

fn()

}

fn2(“加布”)

解析：两个函数打印相同的参数，都是fn2函数的参数。

总结

箭头没有自己的arguments对象。访问arrow函数中的参数实际上是获取外部本地(函数)执行环境中的值。

3.2 可以用rest替代，rest参数获取函数的多余参数

是rest ES6的API，用来获取函数的不定数量的参数数组。这个API可以用来代替参数。

(1)基本用法

//形式是.变量名

设fn=(首先，arr)={

console.log(first，arr)；

}

fn(1，2，3，4)；

分析：带rest参数的变量是一个数组，把多余的参数放到数组里。获取函数的第一个明确的参数，并使用一个变量来接收其他剩余函数的实例。

(2)使用中的注意事项

rest必须是函数的最后一个参数。

设a=(首先，休息，三)={

console.log(第一，休息，三)；

};

a(1，2，3，4)；

函数的length属性不包含rest。

(3)rest和arguments函数之间的比较

箭头函数和普通函数都可以使用rest参数，而实参只能由普通函数使用。

接收参数rest比arguments更灵活，可以完全定制。

rest是真正可以使用数组API的数组，arguments只是一个类数组。

3.3 箭头函数不支持重复函数参数的名称

函数fn(name，name) {

console.log('fn2:'，名称)

}

设fn2=(姓名，名称)={

console.log('fn:'，name)

}

fn('王'，'加布')

fn2('王'，'加布')

3.4 箭头函数不能用作Generator，不能使用yeild关键字 四、箭头函数的注意事项

函数箭头A语句返回对象的文字量，需要括号。

arrow函数不能在参数和箭头之间换行。

箭头函数的解析阶相对||靠前。

五、箭头函数不适用场景

(1)对象方法，该方法使用此。

对象无法构造单独的作用域

var name='gaby '

var person={

名字：“加布里埃尔”，

跟大家讲：function () {

console.log('说你好，this.name)

}，//普通函数

say2: ()={

console.log('say2 hello，this.name)

}//箭头函数

}

person.say()

person.say2()

解决方法：person.say2()方法是一个箭头函数。当调用person.say2()时，它指向全局对象，这与预期的不同。对象无法构成单独的作用域，定义say2()箭头函数时，作用域在全局作用域。

(2)动态回调函数

var button=document . query selector('。BTN’)；

button.addEventListener('click '，()={

this . class list . toggle(' on ')；

});

解析：报告错误。点击按钮是一个回调函数，这个在箭头函数里面指向另一个普通函数的这个，这里是window，所以报错。换成普通函数就不会报错了。

六、箭头函数与普通函数简单区别总结

(arrow函数的语法更加简洁、清晰和快速。

(2)箭头函数没有原型，所以它不是自己创建这个的，这个不能修改。呼叫等不能修改为。只有继承了这个才能间接修改。

(arrow函数的this在定义时是固定的，它继承了外层的普通函数。

(4)如果arrow函数在一层又一层找不到任何普通函数，那么在严格和非严格的情况下都会指向window对象。

(arrow函数的this指向整个世界，使用arguments会报告一个未声明的错误。

(arrow函数的this指向外层的一个普通函数，普通函数通过argument继承。

(arrow函数不能构造，new.target，new，和constructor。

(8)箭头函数不支持参数的重复命名，普通函数可以重复命名参数。

关于ES6中箭头功能的这篇文章到此为止。有关ES6中箭头功能的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。