快捷導(dǎo)航

JS typeof fn === 'function' && fn()詳解

更新時(shí)間：2020年08月22日 23:31:57 投稿：mdxy-dxy

最近在學(xué)習(xí)js的時(shí)候發(fā)現(xiàn)很多人都喜歡在JS 中存在fn && fn() 執(zhí)行語(yǔ)句或者typeof fn === 'function' && fn()，下面這篇文章就為大家分享一下

我在看別人代碼的時(shí)候，有看到代碼是這樣寫的

function(){
fn&&fn()
}

大概意思是這么個(gè)意思，但是這我感覺這樣寫好像沒意義，有帶佬能指點(diǎn)一下嗎

fn 不存在就什么都不做，不會(huì)報(bào)錯(cuò)，fn 存在才嘗試執(zhí)行 fn

一般來說fn && fn()就如同下面的語(yǔ)句

if (fn) {
fn()
}

一般來說函數(shù)的動(dòng)態(tài)調(diào)用，因?yàn)椴恢肋@個(gè)函數(shù)確定存在才會(huì)這么判斷

大部分情況是這個(gè)意思，如果 fn 是 undefined 就不執(zhí)行 fn()。React 針對(duì) optional callback 會(huì)這么寫。

在 js 里面，這是標(biāo)準(zhǔn)的。大幅減少代碼量，比三目運(yùn)算更直接了當(dāng)。別的語(yǔ)言大同小異：fn?.xx()

這樣寫思路是對(duì)的，實(shí)現(xiàn)是錯(cuò)誤的，fn 可能存在，但是它可能不是 function，執(zhí)行 fn() 一樣會(huì)出錯(cuò)。

下面分享正確的寫法

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é)

正確寫法應(yīng)該時(shí)這個(gè)吧：typeof(fn)==='function' && fn()，不過通常約定 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í)行效率的，不是給程序員拿來炫技的。

更多的可以查看這篇文章：

就是?.操作符，不包括方括號(hào)，我把引號(hào)打成方括號(hào)了。
可以參見這里：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

進(jìn)入可以選擇簡(jiǎn)體中文。