在以下功能中如何传递“ this”参考

2024-05-18 • 问答

在JS手册中，我有以下示例可以正常工作：

let worker = {
  someMethod() {
    return 1;
  },slow(x) {
    alert("Called with " + x);
    return x * this.someMethod(); // (*)
  }
};

function cachingDecorator(func) {
  let cache = new Map();
  return function(x) {
    if (cache.has(x)) {
      return cache.get(x);
    }
    let result = func.call(this,x); // теперь 'this' передаётся правильно
    cache.set(x,result);
    return result;
  };
}

worker.slow = cachingDecorator(worker.slow); // теперь сделаем её кеширующей

alert( worker.slow(2) ); // работает
alert( worker.slow(2) ); // работает,не вызывая первоначальную функцию (кешируется)

问题是：如果未在对象内部声明cachingDecorator，并且将其称为worker.slow = cachingDecorator(worker.slow)，则如何将“ this”引用转移到cachingDecorator函数中？我在cachingDecorator中谈论这一行：let result = func.call(this,x)。

当修饰符实际上用作this对象在点之前时，

worker引用将在最后两行中传输。

this实际上不在cachingDecorator中，而是在返回的匿名函数中。因此，在调用函数之前，不会设置this值。

由于该函数已分配给worker.slow，并且您是从该对象调用它的，因此this的值将设置为worker对象。

要记住的重要一点是this有点像一个奇怪的函数参数。它只有一个名称关键字，并且总是被设置（箭头功能除外）。它是基于如何调用函数设置的，而不是像通过传递参数的常规参数那样设置。

请注意，函数cachingDecorator返回一个声明为function(x) {. . .}的函数。当调用任何此类函数作为对对象成员的引用时，此类函数将继承上下文：

function magicFn() { return this }
const x = { magicFn };
const y = { someKey: 6,magicFn };
x.magicFn(); // === x,because it was invoked as x.magicFn
y.magicFn(); // === y
magicFn(); // === undefined,no `this` object member reference

因此，当调用worker.slow = cachingDecorator(worker.slow)时，结果函数将使用worker.slow来代替原始worker.slow.call(this,x);的原始this（在本例中为worker ）。

在以下功能中如何传递“ this”参考

asusxiao123 回答：在以下功能中如何传递“ this”参考

大家都在问