箭头功能可以说是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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。