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

时间:2024-01-11 10:51:02

箭头函式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