JS实现只能调用一次的函数
JS实现只能调用一次的函数
kifuan
发布于 2022-10-24 16:56:33
发布于 2022-10-24 16:56:33
代码可运行
运行总次数：0
代码可运行
源码
前往Github获取本文源码。
目标
我们的想法是一个函数只有第一次调用的时候有效，如下：
function foo() {
console.log('Hello world')
}
foo()
foo()
foo()毋庸置疑，它会打印出三个Hello world。这篇文章就是来看看通过哪个方式能让他只打印一个。
第一想法
如果它是在一个对象里面，这个事就好办了，如下：
const obj = {
hello() {
console.log('Hello from obj')
this.hello = () => {}
}
}
obj.hello()
obj.hello()无论后面调用多少次，因为我们已经让this.hello变成了一个空函数，所以都不会再次打印了。但是，我们的目标是没有obj.这个前缀。或许你可能会想到用bind解决这个问题：
const obj = {
hello() {
console.log('Hello from obj')
this.hello = () => {}
}
}
const hello = obj.hello.bind(obj)
hello()
hello()但是，你可以自己试一下，这是没用的。因为在这个函数里面设置的obj.hello已经和我们赋值出去的const hello没有关系了。
最终方案
还是要请出我们的老朋友Proxy来解决这个问题：
function once(f) {
let called = false
function apply(target, thisArg, args) {
if (called) {
return
}
called = true
return Reflect.apply(target, thisArg, args)
}
return new Proxy(f, { apply })
}通过一个布尔变量called来保存这个函数是否已经被调用，那么之后我们就可以这样写：
const foo = once(() => {
console.log('Hello from foo')
})
foo()
foo()
foo()无论调用多少遍只会执行第一次，达成目的。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
