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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jQuery功能函数详解
Feb 01 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
javascript+Canvas实现画板功能
Jun 23 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
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
JS跨域代码片段
2012/08/30 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
python 队列详解及实例代码
2016/10/18 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python实现图片插入文字
2019/11/26 Python
python内置模块collections知识点总结
2019/12/19 Python
Python while循环使用else语句代码实例
2020/02/07 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
广州盈通面试题
2015/12/05 面试题
人力资源主管职责范本
2014/03/05 职场文书
安全环保标语
2014/06/09 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2016党员入党决心书
2015/09/22 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android