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 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
vue添加axios,并且指定baseurl的方法
Sep 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
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
token 机制和实现方式
2020/12/15 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python获取当前时间的方法
2014/01/14 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
详解Python发送email的三种方式
2018/10/18 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
自我鉴定的范文
2013/10/03 职场文书
经典的班主任推荐信
2013/10/28 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
教师实习自我鉴定
2013/12/13 职场文书
护士岗位职责
2014/02/16 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书