箭头功能可以说是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中箭头功能的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
