您现在的位置是:首页 > Javascript
当前栏目
JavaScript写一个Once函数,让传入函数只执行一次
2023-02-25 18:26:44 时间
大家好,我是前端西瓜哥,今天我们做一道简单的前端面试题。
用 JavaScript 实现一个 once 函数,要求传入函数只能执行一次。且第二次及以后再调用时,仍会返回第一次执行的值。
效果要求如下:
const addOnce = once(function(a, b) {
return a + b;
});
addOnce(1, 2); // 3
addOnce(1, 2999); // 依旧是 3
思路和实现
这里涉及到一个 闭包 的概念。
什么是闭包?闭包是一种技术,它能让 一个函数访问另一个函数内的变量(或者叫关联的环境)。
一种常见的方式就是调用一个函数 a,然后这个函数返回了一个新创建的函数 b。获得的效果是:新的函数 b 可以访问到 a 中声明的变量。
once 函数就要借助闭包的力量,返回 一个绑定了作用域的新函数。
我们先看看实现。
function once(fn) {
let ret; // 缓存结果用
return function(...args) {
if (!fn) return ret;
ret = fn(...args);
fn = undefined; // 表示已经执行过一次
return ret;
}
}
利用闭包,我们返回的新函数有两个 “私有” 的变量可以访问:
- 传入的 fn 函数;
- 额外声明的用于缓存结果的 ret 变量
当返回的新函数被调用时,我们先将参数传给 fn,拿到返回值缓存到 ret。然后将 fn 设置为 undefined,用于标识别已经执行了一次,最后返回 ret。
下次再调用时,我们通过判断 fn 为 falsy,直接返回缓存的 ret。
另外,你貌似可以加多一个对 fn 的类型校验:typeof fn === 'function',来向面试官表达你的代码的健壮性。
有一个比较有趣的地方:如果返回的是个对象,多次调用的返回值其实都是指向同一个。如果你希望每次返回的对象都是新的对象,可以考虑返回一个拷贝后的对象(如果可以拷贝的话)。
结尾
once 的实现并不复杂,只要利用闭包,用封闭的环境保存一个缓存的返回值,以及一个是否执行过的状态,就能控制函数的执行走向。
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项