JS实现只能调用一次的函数

源码

前往Github获取本文源码。

目标

我们的想法是一个函数只有第一次调用的时候有效，如下：

代码语言：javascript复制

function foo() {
    console.log('Hello world')
}

foo()
foo()
foo()

毋庸置疑，它会打印出三个Hello world。这篇文章就是来看看通过哪个方式能让他只打印一个。

第一想法

如果它是在一个对象里面，这个事就好办了，如下：

代码语言：javascript复制

const obj = {
    hello() {
        console.log('Hello from obj')
        this.hello = () => {}
    }
}

obj.hello()
obj.hello()

无论后面调用多少次，因为我们已经让this.hello变成了一个空函数，所以都不会再次打印了。但是，我们的目标是没有obj.这个前缀。或许你可能会想到用bind解决这个问题：

代码语言：javascript复制

const obj = {
    hello() {
        console.log('Hello from obj')
        this.hello = () => {}
    }
}

const hello = obj.hello.bind(obj)
hello()
hello()

但是，你可以自己试一下，这是没用的。因为在这个函数里面设置的obj.hello已经和我们赋值出去的const hello没有关系了。

最终方案

还是要请出我们的老朋友Proxy来解决这个问题：

代码语言：javascript复制

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来保存这个函数是否已经被调用，那么之后我们就可以这样写：

代码语言：javascript复制

const foo = once(() => {
    console.log('Hello from foo')
})

foo()
foo()
foo()

无论调用多少遍只会执行第一次，达成目的。

github bind proxy 源码

0 人点赞