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 相关文章推荐
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript中this详解
Sep 01 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
理解javascript封装
2016/02/23 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python WSGI的深入理解
2018/08/01 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
餐饮业的创业计划书范文
2013/12/26 职场文书
小学生演讲稿
2014/01/12 职场文书
医院检讨书范文
2014/02/01 职场文书
中学生学习保证书
2015/02/26 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers