JS typeof fn === 'function' && fn()详解
更新时间：2020年08月22日 23:31:57 投稿：mdxy-dxy
最近在学习js的时候发现很多人都喜欢在JS 中存在fn && fn() 执行语句或者typeof fn === 'function' && fn()，下面这篇文章就为大家分享一下
我在看别人代码的时候，有看到代码是这样写的
function(){
fn&&fn()
}
大概意思是这么个意思，但是这我感觉这样写好像没意义，有带佬能指点一下吗
fn 不存在就什么都不做，不会报错，fn 存在才尝试执行 fn
一般来说fn && fn()就如同下面的语句
if (fn) {
fn()
}
一般来说函数的动态调用，因为不知道这个函数确定存在才会这么判断
大部分情况是这个意思，如果 fn 是 undefined 就不执行 fn()。React 针对 optional callback 会这么写。
在 js 里面，这是标准的。大幅减少代码量，比三目运算更直接了当。别的语言大同小异：fn?.xx()
这样写思路是对的，实现是错误的，fn 可能存在，但是它可能不是 function，执行 fn() 一样会出错。
下面分享正确的写法
typeof fn === "function" && fn()
实际应用
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()
}
}
小结
正确写法应该时这个吧：typeof(fn)==='function' && fn()，不过通常约定 fn&&fn() 传递的一定是函数
这个就是 js 逻辑运算符的魔法：
当多个 &&串联时，执行到第一个 truthy 的表达式；
当多个||串联时，执行到第一个 false-thy 的表达式；
但我比较赞同王垠博客上的观点：短路机制是给程序优化执行效率的，不是给程序员拿来炫技的。
更多的可以查看这篇文章：
就是?.操作符，不包括方括号，我把引号打成方括号了。
可以参见这里：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
进入可以选择简体中文。
相关文章
下面的内容介绍了#号的使用，因为在url中多个#号代表不同的意义与区别。2011-02-02
这篇文章主要为大家详细介绍了微信小程序实现留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要给大家介绍了关于如何用前端html实现2024烟花效果的相关资料,文中介绍的是JavaScript代码定义了烟花碎片和火箭类,通过动画循环模拟烟花爆炸效果,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了JavaScript获取服务器端时间的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
本文主要介绍了layer弹出层框架alert与msg的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript常用脚本汇总系列的第一篇，给大家分享的是jquery限制文本框只能输入数字、封装DOMContentLoaded事件、用原生JS对AJAX做简单封装、跨域请求之JSONP、千分位格式化，有需要的小伙伴们参考下吧。2015-03-03
这篇文章主要介绍了微信小程序嵌入腾讯视频源过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了用box固定长宽实现图片自动轮播效果,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了Javascript的无new构建实例详解的相关资料，小编感觉介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
这篇文章主要介绍了javascript实现全角转半角的方法,涉及JavaScript字符串遍历与编码转换的相关技巧,需要的朋友可以参考下2016-01-01
最新评论