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

Posted 2021-01-19 lannyQ_Q

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