您好,登錄后才能下訂單哦!
這篇文章主要介紹“ES6箭頭函數(shù)及this指向怎么使用”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“ES6箭頭函數(shù)及this指向怎么使用”文章能幫助大家解決問題。
用箭頭 => 定義函數(shù)
var fn = function(num){ return num;}var fn1 = (num)=>num;var fn3 = ()=>1;var fn4 = (num1,num2,num3)=>num
如果箭頭函數(shù)的代碼塊部分有多條語句,就要使用大括號將它們括起來,并且使用 return 返回。
var func = (a,b)=>{ return a+b; }
由于花括號{} 被解釋為代碼塊,所以如果箭頭函數(shù)直接返回一個對象,必須在對象外添加上花括號,否則會報(bào)錯。
var func = (a,b)=>{name:a,age:b} //報(bào)錯var func4 = (a,b)=>{ return { name: a, age :b } } // 不報(bào)錯
箭頭函數(shù)還有一個更主要的作用: 解決this的指向問題。
先說一下普通函數(shù)中的this,普通函數(shù)中的this表示調(diào)用此函數(shù)時的對象。而箭頭函數(shù)是沒有自己的this的,箭頭函數(shù)里面的this會繼承自外部的this?;蛘哂么a
塊的概念解釋會更加直觀:箭頭函數(shù)中的this就是外層代碼塊的this。舉一個例子:
箭頭函數(shù)是ES6中的新增特性,他沒有自己的this,其this指向從外層代碼庫繼承。
使用箭頭函數(shù)時要注意一下幾點(diǎn):
箭頭函數(shù)不能用作構(gòu)造函數(shù),用的話會拋出一個錯誤
無法使用arguments參數(shù),如果要用的話就用rest
無法使用yield命令,所以箭頭函數(shù)無法用作Generator函數(shù)
因?yàn)闆]有自己的this,所以沒法通過bind、call、apply來改變this指向
但是這不代表箭頭函數(shù)的this指向是靜態(tài)的,我們可以通過改變它外層代碼庫的this指向來控制
箭頭函數(shù)的this從外層代碼庫繼承,所以箭頭函數(shù)的this是在定義的時候就綁定好了的,而普通函數(shù)是在調(diào)用的時候確定this指向
字面量對象中直接定義的箭頭函數(shù)的this不綁定該對象,而是往外找一層,最簡單的情況是綁定到window
PS: 實(shí)際開發(fā)環(huán)境中,React可以使用箭頭函數(shù)解決一個經(jīng)典問題,這里不細(xì)說了。
給一個例子看一下箭頭函數(shù)的實(shí)際情況:
const obj = { fun1: function () { console.log(this); return () => { console.log(this); } }, fun2: function () { return function () { console.log(this); return () => { console.log(this); } } }, fun3: () => { console.log(this); } } let f1 = obj.fun1(); // obj f1() // obj let f2 = obj.fun2(); let f2_2 = f2(); // window f2_2() // window obj.fun3(); // window
針對每行輸出的分析:
let f1 = obj.fun1() // obj
這里明顯進(jìn)行的是隱式綁定,fun1的this指向obj
f1() // obj
這里執(zhí)行了上一行返回出來的箭頭函數(shù),我們分析上一層代碼庫的this指向obj,所以直接繼承,箭頭函數(shù)this指向
objlet f2 =obj.fun2()
fun2第一層執(zhí)行的時候沒有打印代碼,而是返回了一個函數(shù)出來,賦值給f2,并且這里發(fā)生了綁定丟失,this指向由原來的obj指向了window(發(fā)生了賦值)
let f2_2 = f2() // window
f2()執(zhí)行了,打印出了改綁后的this——window,然后將箭頭函數(shù)返回出來,賦值給f2_2f
2_2() // window
執(zhí)行打印出window,剛才的外層代碼的this不是指向了window嗎,所以這里就繼承了window作為this
obj.fun3() // window
在字面量中直接定義的箭頭函數(shù)無法繼承該對象的this,而是往外再找一層,就找到了window,因?yàn)樽置媪繉ο鬅o法形成自己的一層作用域,但是構(gòu)造函數(shù)可以哦。
那我們怎么操縱箭頭函數(shù)的this指向呢:
答案是修改外層代碼庫的this指向,在箭頭函數(shù)定義之前就給this修改方向即可。
在以上代碼的基礎(chǔ)上:
let fun4 = f2.bind(obj)() // obj fun4() // obj
我們發(fā)現(xiàn)修改的是第二層方法的this指向,并且箭頭函數(shù)也繼承了下來。
fun2: function () { return function () { // 我們修改的是這里的this console.log(this); return () => { // 然后這里定義的時候就繼承啦 console.log(this); } } },
關(guān)于“ES6箭頭函數(shù)及this指向怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。