学JS的心路历程-函式(五)箭头函式

本文详细介绍了ES6中的箭头函式语法及其特点,包括如何以更简洁的方式创建函数,箭头函式的参数、返回值规则,以及箭头函式与this关键字的特殊关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

箭头函式arrow function

为了能够以更简短的方式建立函式,ES6变推出了箭头函式。

用说明的可能会不太懂,我们先拿之前的数组排序例子来看:

 

var arr = [2,1,6,12,3,77,100,4];

arr.sort(function(a,b){

return a - b;

});

arr.sort()经过箭头函式的修改后:

 

var arr = [2,1,6,12,3,77,100,4];

arr.sort((a,b)=> a-b);

是不是简洁许多了!

 

现在让我们一步一步来看箭头函式的语法;

 

param => expression

此箭头函式接受一个参数(param)并回传一个表达式(expression)的值。

 

首先箭头函式的参数在只有一个的时候,括号是可以省略的:

 

var funA =()=>“hi”;

var funB = val => val;

funA();//“hi”

funB(“hola”);//“hola”

再来,中间的=>符号是必要的:

 

var funA =()“hi”;//SyntaxError: Unexpected token)

var funB = val => val;//SyntaxError: Unexpected identifier

最后,表达式若只有一个,那么该表达式的值即为回传值,且可省略{};

若是一段程序内存块则和一般函式无异:

 

var funA =()=>“hi”;

var funB = val =>{

const price = 20;

return val*price;

}

以上就是箭头函式的用法,是不是很简单呢!(chronicLesofwizardprang)

但是要注意到,箭头函式没有自己的this及arguments,且不能被用作建构式,只能当作匿名函式使用:

 

var funB =()=> arguments;

var obj = {

funA:()=>{console.log(this)}

}

obj.funA();//Window

funB(1);// ReferenceError: arguments is not defined

箭头函式-this

我们都知道在函式的this只有在呼叫时才能决定,但箭头函式并没有自己的this,在使用时会去往上寻找直到找到最接近「scope」的this,就像一般变量的寻找规则一样。

 

Arrow functions follow the normal variable lookup rules.

So while searching for this which is not present in current scope they end up finding this from its enclosing scope .

 

有点难懂对吧,让我们来看几个示例:

 

var name = 'globe'

var myObj = {

name: 'in object',

callArrow: function(){

var arrowFun =()=>{

console.log('1',this.name);

}

arrowFun()

}

}

myObj.callArrow();

可以看到说由于callArrow是一般函式建立,所以arrowFun中呼叫的this会往上寻找到callArrow的函式的this,且由于myObj.callArrow是透过物件方法呼叫,所以this是myObj物件。

 

有点难懂?没关系,浏览器提供给我们一个Performance功能,可以看到程序是如何执行的:

 


可以看到(anonymouse)其实就是我们常说的全局环境,我们在执行arrowFun()时,arrowFun会往上找最近的scope,也就是callArrow。如果在测试时候没办法确定的话,开启浏览器的Performance看看吧!

 

但是这边有个陷井,如果把callArrow也改成箭头函式:

 

var name = 'globe'

var myObj = {

name: 'in object',

callArrow:()=>{

var arrowFun =()=> {

console.log('1',this.name);

}

arrowFun();

}

}

myObj.callArrow();

虽然在Performance模式下看起来跟刚刚的例子一样:

 


我们前面有说到是寻找最近的「scope」,但找到的却还是一个箭头函式callArrow,所以会继续往上寻找到全局也就是window。

 

以上就是箭头函式,在看文件的过程中发现到真的不要为了方便就去看中文,中文会省略很多说明啊!

所以宁可用谷狗翻译一句一句看也不要偷懒才不会错过很多重点喔!!

来源:(http://www.swrebar.com

 

转载于:https://www.cnblogs.com/lannyQ-Q/p/9942037.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值