vscode工具函数once使用示例深入剖析

目录

• 背景
• VSCode中的实现
• lodash的实现
• once的应用
• once的注意事项
• this指针问题
• 小结

背景

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

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

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

VSCode中的实现

export function once<T extends Function>(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<T extends Function>(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 关键字，以避免意外的错误或异常。

小结

本文对 once 函数进行了详细的剖析，包括其背景、实现原理和应用场景。在实际开发中，once 函数可以用于缓存函数的结果、避免重复网络请求以及确保只运行一次的初始化代码。在使用 once 函数时，需要注意原始函数的 this 关键字的绑定，以避免意外的错误或异常。

在我们的日常开发中，见过太多的代码为了保证只执行一次，在本地定一个类似 flag 的变量来控制，这种写法非常不优雅，在这种场景下，使用 once 函数是一个更好的选择。

以上就是vscode工具函数once使用示例深入剖析的详细内容，更多关于vscode工具函数once的资料请关注我们其它相关文章！