JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別
1. 箭頭函數(shù)的使用
ES6 中新增了使用箭頭=>
來(lái)定義函數(shù)表達(dá)式的方法。很多情況下,箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無(wú)區(qū)別,只有寫(xiě)法上的不同。
本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別。
1. 普通函數(shù)到箭頭函數(shù)
如下所示,定義一個(gè)函數(shù),可以使用function
關(guān)鍵字,函數(shù)接收兩個(gè)參數(shù)a
和b
,返回a
和b
的和。
function getSum(a, b) { return a + b; }
若使用箭頭函數(shù)來(lái)定義這個(gè)函數(shù),可以寫(xiě)成如下形式,省略function
關(guān)鍵字,用箭頭=>
定義一個(gè)函數(shù)。
const getSum = (a, b) => { return a + b; };
2. 省略大括號(hào)和 return
若定義的箭頭函數(shù),函數(shù)體內(nèi)只有return
語(yǔ)句,則可以省略大括號(hào){}
和return
。
如下所示,定義的箭頭函數(shù),完整寫(xiě)法。
const getSum = (a, b) => { return a + b; };
此箭頭函數(shù)的函數(shù)體內(nèi)只有return
語(yǔ)句,那么,省略了大括號(hào){}
和return
后的精簡(jiǎn)寫(xiě)法如下:
const getSum = (a, b) => a + b;
3. 省略小括號(hào)
若定義的箭頭函數(shù),參數(shù)只有一個(gè),則可以省略小括號(hào)。
如下所示,定義的箭頭函數(shù),只有一個(gè)參數(shù),完整寫(xiě)法。
const func = (a) => { return a + 2; };
省略了參數(shù)旁邊的小括號(hào),以下代碼等價(jià)于上面的代碼。
const func = a => a + 2;
注意:若函數(shù)沒(méi)有參數(shù),或者多個(gè)參數(shù)的情況下,必須要使用括號(hào)。
2. 箭頭函數(shù)與普通函數(shù)的區(qū)別
大多數(shù)情況下,能使用普通函數(shù)的地方都可以用箭頭函數(shù)代替,因?yàn)榧^函數(shù)更精簡(jiǎn)。
但在部分情況下,箭頭函數(shù)與普通函數(shù)有著很大的卻別。
1. 箭頭函數(shù)的 this 是父級(jí)作用域的 this
如下代碼,定義了一個(gè)對(duì)象obj
,對(duì)象中有個(gè)普通函數(shù)定義的方法getThis
,打印出此處的this
。調(diào)用obj.getThis()
,會(huì)打印出obj
對(duì)象。這說(shuō)明方法內(nèi)部的this
指向?qū)ο?code>obj。
const obj = { name: 'Jack', getThis() { console.log(this); }, }; obj.getThis(); // {name: 'Jack', getThis: ƒ}
同樣定義一個(gè)對(duì)象obj
,但里面的方法用箭頭函數(shù)定義,瀏覽器中調(diào)用obj.getThis()
卻打印出Window
,這說(shuō)明即使調(diào)用obj
對(duì)象身上的方法,方法內(nèi)部的this
也不會(huì)指向obj
,而是指向定義obj
的上下文的this
。
const obj = { name: 'Jack', getThis: () => { console.log(this); }, }; obj.getThis(); // Window
2. call、apply、bind無(wú)法改變箭頭函數(shù)的 this
如下代碼,普通函數(shù)getName
打印this.name
,通過(guò)call
將函數(shù)中的this
綁定到obj
身上,調(diào)用getName
打印出obj
身上的屬性name
。
const obj = { name: 'Jack', }; function getName() { console.log(this.name); } getName.call(obj); // Jack
若將函數(shù)改成箭頭函數(shù),那么call
將不起作用,無(wú)法將函數(shù)內(nèi)部的this
綁定到obj
,打印出undefined
。
const obj = { name: 'Jack', }; const getName = () => { console.log(this.name); }; getName.call(obj); // undefined
3. 不可以作為構(gòu)造函數(shù)
箭頭函數(shù)不可以作為構(gòu)造函數(shù)使用,若將箭頭函數(shù)作為構(gòu)造函數(shù),將報(bào)錯(cuò),如下代碼所示。
const Person = () => { this.name = 'Jack'; }; const usr = new Person(); // Person is not a constructor
4. 不可以使用 arguments
在普通函數(shù)內(nèi)部,可以使用arguments
來(lái)獲取傳入的參數(shù),是一個(gè)類(lèi)數(shù)組對(duì)象:
function func() { console.log(arguments); } func(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }
而箭頭函數(shù)就不可以使用arguments
對(duì)象,獲取不到輸入的參數(shù)。
在瀏覽器中,若在箭頭函數(shù)使用arguments
對(duì)象,將報(bào)錯(cuò)。
const func = () => { // 瀏覽器環(huán)境 console.log(arguments); // arguments is not defined }; func(1, 2, 3);
但是箭頭函數(shù)可以在參數(shù)內(nèi),以...args
的方式,獲取到輸入的參數(shù),得到的args
是一個(gè)數(shù)組。
const func = (...args) => { console.log(args); // [ 1, 2, 3 ] }; func(1, 2, 3);
5. 箭頭函數(shù)不支持 new.target
普通函數(shù)定義的構(gòu)造函數(shù)內(nèi)部,支持使用new.target
,返回構(gòu)造實(shí)例的構(gòu)造函數(shù)。
function Person() { this.name = 'Jack'; console.log(new.target); } // 指向構(gòu)造函數(shù) new Person(); // [Function: Person]
而在箭頭函數(shù)中,不支持使用new.target
。在瀏覽器環(huán)境中,箭頭函數(shù)使用new.target
將報(bào)錯(cuò):new.target expression is not allowed here
。
const Person=() =>{ this.name = 'Jack'; console.log(new.target); } // 瀏覽器環(huán)境 new Person(); // new.target expression is not allowed here
本文參考:
《JavaScript高級(jí)程序設(shè)計(jì)(第4版)》
到此這篇關(guān)于JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)js箭頭函數(shù)普通函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js獲取url參數(shù)代碼實(shí)例分享(JS操作URL)
這篇文章主要介紹了js分析url獲取url參數(shù),可以獲取?前面部分、#及后面部分,大家看代碼吧2013-12-12js字符串截取函數(shù)substr substring slice使用對(duì)比
字符串截取函數(shù)有substr、substring以及slice等等,下面將為大家介紹下各自的使用,感興趣的朋友可以了解下2013-11-11javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07javascript跨域請(qǐng)求包裝函數(shù)與用法示例
這篇文章主要介紹了javascript跨域請(qǐng)求包裝函數(shù)與用法,結(jié)合實(shí)例形式分析了javascript基于ajax的跨域請(qǐng)求封裝函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11解決layer.open后laydate失效的問(wèn)題
今天小編就為大家分享一篇解決layer.open后laydate失效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09tsc性能優(yōu)化Project References使用詳解
這篇文章主要為大家介紹了tsc性能優(yōu)化Project References使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11