JS typeof fn === 'function' && fn()詳解
我在看別人代碼的時(shí)候,有看到代碼是這樣寫(xiě)的
function(){
fn&&fn()
}
大概意思是這么個(gè)意思,但是這我感覺(jué)這樣寫(xiě)好像沒(méi)意義,有帶佬能指點(diǎn)一下嗎
fn 不存在就什么都不做,不會(huì)報(bào)錯(cuò),fn 存在才嘗試執(zhí)行 fn
一般來(lái)說(shuō)fn && fn()就如同下面的語(yǔ)句
if (fn) { fn() }
一般來(lái)說(shuō)函數(shù)的動(dòng)態(tài)調(diào)用,因?yàn)椴恢肋@個(gè)函數(shù)確定存在才會(huì)這么判斷
大部分情況是這個(gè)意思,如果 fn 是 undefined 就不執(zhí)行 fn()。React 針對(duì) optional callback 會(huì)這么寫(xiě)。
在 js 里面,這是標(biāo)準(zhǔn)的。大幅減少代碼量,比三目運(yùn)算更直接了當(dāng)。別的語(yǔ)言大同小異:fn?.xx()
這樣寫(xiě)思路是對(duì)的,實(shí)現(xiàn)是錯(cuò)誤的,fn 可能存在,但是它可能不是 function,執(zhí)行 fn() 一樣會(huì)出錯(cuò)。
下面分享正確的寫(xiě)法
typeof fn === "function" && fn()
實(shí)際應(yīng)用
function addScript (url, fn) { var script = document.createElement('script') script.setAttribute('type', 'text/javascript') script.setAttribute('src', url) script.setAttribute('async', 'async') document.getElementsByTagName('head')[0].appendChild(script) script.onload = function () { typeof fn === 'function' && fn() } }
小結(jié)
正確寫(xiě)法應(yīng)該時(shí)這個(gè)吧:typeof(fn)==='function' && fn(),不過(guò)通常約定 fn&&fn() 傳遞的一定是函數(shù)
這個(gè)就是 js 邏輯運(yùn)算符的魔法:
當(dāng)多個(gè) &&串聯(lián)時(shí),執(zhí)行到第一個(gè) truthy 的表達(dá)式;
當(dāng)多個(gè)||串聯(lián)時(shí),執(zhí)行到第一個(gè) false-thy 的表達(dá)式;
但我比較贊同王垠博客上的觀點(diǎn):短路機(jī)制是給程序優(yōu)化執(zhí)行效率的,不是給程序員拿來(lái)炫技的。
更多的可以查看這篇文章:
就是?.操作符,不包括方括號(hào),我把引號(hào)打成方括號(hào)了。
可以參見(jiàn)這里:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
進(jìn)入可以選擇簡(jiǎn)體中文。
相關(guān)文章
解決JS浮點(diǎn)數(shù)運(yùn)算出現(xiàn)Bug的方法
解決JS浮點(diǎn)數(shù)運(yùn)算出現(xiàn)Bug的方法,需要的朋友可以參考一下2013-03-03JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05用js將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例
下面小編就為大家?guī)?lái)一篇用js將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JavaScript正則替換HTML標(biāo)簽功能示例
這篇文章主要介紹了JavaScript正則替換HTML標(biāo)簽功能,結(jié)合完整實(shí)例形式詳細(xì)分析了javascript正則替換字符串操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03JavaScript 正則表達(dá)式中g(shù)lobal模式的特性
這篇文章主要介紹了JavaScript 正則表達(dá)式中g(shù)lobal模式的特性 的相關(guān)資料,需要的朋友可以參考下2016-02-02模擬彈出窗口效果,關(guān)閉層之前,不能選擇后面的頁(yè)內(nèi)容
模擬彈出窗口效果,關(guān)閉層之前,不能選擇后面的頁(yè)內(nèi)容...2007-02-02javascript 數(shù)組(list)添加/刪除的實(shí)現(xiàn)
這篇文章主要介紹了javascript 數(shù)組(list)添加/刪除,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)電腦和手機(jī)版樣式切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11