vscode工具函数once使用示例深入剖析世界微动态

当前位置 :前沿资讯 >

vscode工具函数once使用示例深入剖析世界微动态

来源 : 脚本之家时间：2023-03-29 06:06:21

背景

once函数的起源可以追溯到函数式编程。在函数式编程中，函数被视为不可变的，这意味着它们不应修改任何状态或引用任何状态。因此，在函数式编程中，通常需要一些技巧来处理一些常见问题，例如避免在多次调用相同函数时进行冗余计算。

once函数是解决此问题的一种方法。它可以将函数转换为只能调用一次的函数，并使用一些技巧来避免冗余计算。使用 once函数可以减少计算时间和资源的消耗，并提高应用程序的性能。

once函数在现代 JavaScript 库和框架中非常常见，例如 lodash。它们提供了许多内置的 once函数来处理各种场景和问题。在实际开发中，我们可以使用这些函数来提高代码的可维护性和可读性，避免冗余计算和网络请求，并提高应用程序的性能。

(资料图片仅供参考)

VSCode中的实现

export function once(this: unknown, fn: T): T {
	const _this = this;
	let didCall = false;
	let result: unknown;
	return function () {
		if (didCall) {
			return result;
		}
		didCall = true;
		result = fn.apply(_this, arguments);
		return result;
	} as unknown as T;
}

这个实现比较简单，但还是详细分析解释一下代码

函数签名：once(this: unknown, fn: T): T。该函数使用了泛型参数**T，表示被封装的原始函数的类型。它还定义了一个this参数，表示封装函数中的this关键字的类型为unknown，以及一个fn**参数，表示被封装的原始函数。缓存结果：在函数内部，定义了三个变量。**_this变量引用了函数中的this关键字，并将其保存在变量中。didCall变量用于跟踪函数是否已经被调用过。result**变量用于保存函数的结果。返回新函数：函数内部返回了一个匿名函数，它接受任意数量的参数，并将其传递给原始函数。在函数内部，首先检查函数是否已经被调用过。如果是，则直接返回之前保存的结果。否则，将**didCall**标记为已调用，并调用原始函数并保存结果。最后，返回结果。类型断言：函数的返回值是一个匿名函数，但是它的类型需要与原始函数相同。因此，使用了一个类型断言将匿名函数的类型强制转换为泛型参数**T**。

lodash的实现

lodash到目前的版本已经是高度封装了，它的源码可以在**github.com/lodash/loda…**看到：

function once(func) {
  return before(2, func)
}

它本身是调用了 before函数， before是一个经过高度抽象的函数，它在被调用次数达到指定次数之前，会继续执行传入的函数，而在达到指定次数时，会返回最后一次执行传入函数的结果：

function before(n, func) {
  let result
  if (typeof func !== "function") {
    throw new TypeError("Expected a function")
  }
  return function(...args) {
    if (--n > 0) {
      result = func.apply(this, args)
    }
    if (n <= 1) {
      func = undefined
    }
    return result
  }
}

对于 lodash这样的工具库而言，它的抽象层次要比 vscode更高，但实现的原理是相同的，核心都是利用闭包，通过内部变量的状态来判断函数是否已经被调用过，从而保证原始函数只被执行一次。

once的应用

**once**函数是一个常见的JavaScript函数，它用于确保一个函数只能被调用一次。这个函数在以下几个场景下非常有用：

缓存函数的结果：当一个函数需要执行复杂的计算时，我们可以使用**once**函数来确保它只会被调用一次，并将结果缓存下来。在之后的调用中，函数会直接返回缓存的结果，而不会再次执行计算。这可以节省计算时间和资源，并提高应用程序的性能。避免重复网络请求：当我们需要向服务器发送请求时，可以使用**once**函数来确保只发送一次请求，并在之后的调用中直接返回结果。这可以避免发送重复的网络请求，并提高应用程序的响应速度。确保只运行一次的初始化代码：有时候我们需要在应用程序启动时执行一些初始化代码，例如创建全局变量或注册事件处理程序。在这种情况下，可以使用**once**函数来确保这些代码只会被执行一次，避免不必要的重复操作。

在VSCode中， once用的非常频繁，通过查看 reference我们可以看到非常多的使用：

once的注意事项

this指针问题

在 once函数内部，定义了一个名为 _this的变量，它保存了函数的 this关键字。这是因为，在使用 apply或 call方法调用函数时，需要确保函数中的 this关键字被正确地绑定。如果没有保存 _this变量，而是直接使用 this关键字，可能会导致 this关键字在多次调用中被意外地修改，从而导致错误或异常。

在使用 once函数时，如果原始函数需要使用 this关键字，需要确保 this关键字被正确地绑定。看看以下代码：

class Counter {
  private count = 0;
  constructor(private readonly name: string) {}
  increment() {
    console.log(`${this.name}: Count = ${++this.count}`);
  }
}
const counter1 = new Counter("Counter 1");
const counter2 = new Counter("Counter 2");
const incrementOnce = once(counter1.increment);
incrementOnce.call(counter1); // 输出 "Counter 1: Count = 1"
incrementOnce.call(counter2); // 输出 "Counter 1: Count = 2"，而不是 "Counter 2: Count = 1"
incrementOnce.call(counter1); // 输出 "Counter 1: Count = 2"

在上述代码中，如果我们在多次调用 incrementOnce函数时，使用了不同的 this关键字，可能会导致输出结果不正确。例如，上述代码中的第二次调用 incrementOnce函数时，使用了 counter2作为 this关键字，而实际上 incrementOnce函数中保存的 this关键字是 counter1，因此输出结果为 "Counter 1: Count = 2"，而不是 "Counter 2: Count = 1"。

因此，在使用 once函数时，需要确保原始函数能够正确地处理 this关键字，并且在调用 once函数时，应该指定正确的 this关键字，以避免意外的错误或异常。