JavaScript写一个Once函数,让传入函数只执行一次

开发 前端
用 JavaScript 实现一个 once 函数,要求传入函数只能执行一次。且第二次及以后再调用时,仍会返回第一次执行的值。

大家好,我是前端西瓜哥,今天我们做一道简单的前端面试题。

用 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;
}
}

利用闭包,我们返回的新函数有两个 “私有” 的变量可以访问:

  1. 传入的 fn 函数;
  2. 额外声明的用于缓存结果的 ret 变量

当返回的新函数被调用时,我们先将参数传给 fn,拿到返回值缓存到 ret。然后将 fn 设置为 undefined,用于标识别已经执行了一次,最后返回 ret。

下次再调用时,我们通过判断 fn 为 falsy,直接返回缓存的 ret。

另外,你貌似可以加多一个对 fn 的类型校验:typeof fn === 'function',来向面试官表达你的代码的健壮性。

有一个比较有趣的地方:如果返回的是个对象,多次调用的返回值其实都是指向同一个。如果你希望每次返回的对象都是新的对象,可以考虑返回一个拷贝后的对象(如果可以拷贝的话)。

结尾

once 的实现并不复杂,只要利用闭包,用封闭的环境保存一个缓存的返回值,以及一个是否执行过的状态,就能控制函数的执行走向。

责任编辑:姜华 来源: 今日头条
相关推荐

2018-08-07 14:45:52

编程语言JavaScripthtml

2015-05-25 15:06:28

JavaScript函数式编程

2009-06-09 21:50:55

Javascript函数getStyle

2016-11-29 13:31:52

JavaScriptsetTimeout定时执行

2020-04-20 09:02:33

函数RPCCPU

2020-06-11 11:16:36

戴尔

2014-02-14 09:37:01

JavascriptDOM

2017-07-27 08:56:59

javascriptJavaWeb

2012-08-23 14:23:33

函数式编程

2021-06-16 17:46:55

函数指针结构

2022-07-26 16:08:43

print函数

2021-12-07 06:55:17

节流函数Throttle

2020-10-18 12:53:29

黑科技网站软件

2015-06-29 11:30:07

JavaScript小乌龟推箱子

2012-01-04 13:55:23

Canvas

2023-06-06 08:28:58

Sync.OnceGolang

2016-12-06 09:34:33

线程框架经历

2020-10-16 08:26:07

JavaScript开发技术

2023-11-28 12:19:49

C++函数指针

2016-08-11 10:11:07

JavaScript函数编程
点赞
收藏

51CTO技术栈公众号