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


Posted in Javascript onAugust 22, 2020

我在看别人代码的时候,有看到代码是这样写的

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

进入可以选择简体中文。

Javascript 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
vue文件运行的方法教学
Feb 12 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 #Javascript
JavaScript中的函数式编程详解
Aug 22 #Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 #Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 #Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 #Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 #Javascript
js实现页面导航层级指示效果
Aug 25 #Javascript
You might like
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
Python深入学习之对象的属性
2014/08/31 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python 必须了解的5种高级特征
2020/09/10 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
中秋节超市促销方案
2014/01/30 职场文书
环保倡议书50字
2014/05/15 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
村干部任职承诺书
2015/01/21 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
Nginx源码编译安装过程记录
2021/11/17 Servers