JavaScript - 递归在哪里？

Question

我正在使用装饰器函数，我不想在这里使用bind来传递this值，而是我想使用一个包装器 function 并在那里执行代码。 但是我遇到了这个错误-> Uncaught RangeError: Maximum call stack size exceeded

这是代码：

let math = {
  multi(n, type) {
    if(type == 'double') {
      this.printSomething(n * 2);
    }
    else if (type == 'triple') {
      this.printSomething(n * 3);
    }
  },
  printSomething(result) {
    console.log(result);
  }
};

function cachingDecorator(func) {
  let cache = new Map();

  return function(n, type) {
    if(cache.has(n))
      return cache.get(n);

    let result = func(n, type);
    cache.set(n, result);
    return result;
  };
};

math.multi = cachingDecorator((n, type) => math.multi(n, type));
math.multi(10, 'double');

虽然我使用了 Chrome 开发人员工具，但我无法解决这个问题。

我知道发生此错误是因为存在递归。 但是哪里？

Answer 1

问题是您将math.multi重新分配给缓存版本，然后它的缓存版本在此处使用重新分配的值：

math.multi = cachingDecorator((n, type) => math.multi(n, type));
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^

相反，您需要记住并使用原件：

const originalMulti = math.multi;
math.multi = cachingDecorator((n, type) => originalMulti.call(math, n, type));
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^

请注意，我必须使用.call(math来确保this是正确的，因为我将math.multi复制到了一个变量；稍后直接调用它并不能正确设置this 。

现场示例：

 let math = { multi(n, type) { if(type == 'double') { this.printSomething(n * 2); } else if (type == 'triple') { this.printSomething(n * 3); } }, printSomething(result) { console.log(result); } }; function cachingDecorator(func) { let cache = new Map(); return function(n, type) { if(cache.has(n)) return cache.get(n); let result = func(n, type); cache.set(n, result); return result; }; } const originalMulti = math.multi; math.multi = cachingDecorator((n, type) => originalMulti.call(math, n, type)); math.multi(10, 'double');