JS typeof fn === 'function' && fn()詳解
我在看別人代碼的時(shí)候，有看到代碼是這樣寫的
function(){
fn&&fn()
}
大概意思是這么個意思，但是這我感覺這樣寫好像沒意義，有帶佬能指點(diǎn)一下嗎
fn 不存在就什么都不做，不會報(bào)錯，fn 存在才嘗試執(zhí)行 fn
一般來說fn && fn()就如同下面的語句
if (fn) {
fn()
}
一般來說函數(shù)的動態(tài)調(diào)用，因?yàn)椴恢肋@個函數(shù)確定存在才會這么判斷
大部分情況是這個意思，如果 fn 是 undefined 就不執(zhí)行 fn()。React 針對 optional callback 會這么寫。
在 js 里面，這是標(biāo)準(zhǔn)的。大幅減少代碼量，比三目運(yùn)算更直接了當(dāng)。別的語言大同小異：fn?.xx()
這樣寫思路是對的，實(shí)現(xiàn)是錯誤的，fn 可能存在，但是它可能不是 function，執(zhí)行 fn() 一樣會出錯。
下面分享正確的寫法
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í)這個吧：typeof(fn)==='function' && fn()，不過通常約定 fn&&fn() 傳遞的一定是函數(shù)
這個就是 js 邏輯運(yùn)算符的魔法：
當(dāng)多個 &&串聯(lián)時(shí)，執(zhí)行到第一個 truthy 的表達(dá)式；
當(dāng)多個||串聯(lián)時(shí)，執(zhí)行到第一個 false-thy 的表達(dá)式；
但我比較贊同王垠博客上的觀點(diǎn)：短路機(jī)制是給程序優(yōu)化執(zhí)行效率的，不是給程序員拿來炫技的。
更多的可以查看這篇文章：
就是?.操作符，不包括方括號，我把引號打成方括號了。
可以參見這里：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
進(jìn)入可以選擇簡體中文。
相關(guān)文章
下面的內(nèi)容介紹了#號的使用，因?yàn)樵趗rl中多個#號代表不同的意義與區(qū)別。2011-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)留言功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
如何用前端html實(shí)現(xiàn)2024煙花效果
這篇文章主要給大家介紹了關(guān)于如何用前端html實(shí)現(xiàn)2024煙花效果的相關(guān)資料,文中介紹的是JavaScript代碼定義了煙花碎片和火箭類,通過動畫循環(huán)模擬煙花爆炸效果,需要的朋友可以參考下2024-11-11
JavaScript獲取服務(wù)器端時(shí)間的方法
這篇文章主要介紹了JavaScript獲取服務(wù)器端時(shí)間的方法,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
本文主要介紹了layer彈出層框架alert與msg的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JavaScript常用腳本匯總系列的第一篇，給大家分享的是jquery限制文本框只能輸入數(shù)字、封裝DOMContentLoaded事件、用原生JS對AJAX做簡單封裝、跨域請求之JSONP、千分位格式化，有需要的小伙伴們參考下吧。2015-03-03
這篇文章主要介紹了微信小程序嵌入騰訊視頻源過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
用box固定長寬實(shí)現(xiàn)圖片自動輪播js代碼
這篇文章主要介紹了用box固定長寬實(shí)現(xiàn)圖片自動輪播效果,需要的朋友可以參考下2014-06-06
Javascript的無new構(gòu)建實(shí)例詳解
這篇文章主要介紹了Javascript的無new構(gòu)建實(shí)例詳解的相關(guān)資料，小編感覺介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
javascript實(shí)現(xiàn)全角轉(zhuǎn)半角的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角轉(zhuǎn)半角的方法,涉及JavaScript字符串遍歷與編碼轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-01-01