JS 中的动态函数观察器

Question

我正在做一个宠物项目，一个面向学生的小型前端库。它读取 JS 文件中的变量/代码并对其进行测试，输出一些面板。代码本身大致遵循 Jest 框架。

我的问题是我正在尝试创建一个函数来监视其他函数的执行，对它们进行计数，并让我访问计数。

function watchFunction(funcName){
    let originalFunction = window[funcName];
    let counter = 0;
    
    // Wrap the function, counts when called
    window[funcName] = function(...args){
        console.log("watching");
        counter++;
        return originalFunction(...args);
    }

    return {
        getCount: () => {return counter},
        reset: () => {
            // Unwrap the function
            window[funcName] = originalFunction
        }
    }
}

这似乎适用于Number() 或parseInt() 之类的方法，但我不知道如何访问Math.floor() 之类的方法或Array.prototype.map() 之类的原型方法。

我试过传入函数引用而不是使用window["funcNameString"]，但这似乎不起作用。

有没有人有关于包装函数或观看这样的函数的建议或提示？

Answer 1

您是指实例或对象的方法吗？一种方法是创建一个新函数。例如

function WatchInstanceMethods(instance, functionName){
let originalFunction = window[instance][funcName];
let counter = 0;
   window[instance][functionName] = function(...args){
        console.log("watching");
        counter++;
        return originalFunction(...args);
    }
     return {
        getCount: () => {return counter},
        reset: () => {
            // Unwrap the function
            window[funcName] = originalFunction
        }
    }

} 

尽管使用更多嵌套方法添加对链接方法的支持会变得困难，但是您可以为 functionName name 传递一个字符串并将其拆分为函数的每一层调用实例并重复上述逻辑。

Answer 2

那是你要的吗？我还可以为这个函数编写一个块，以便它确定传入的是一个对象还是一个字符串。如果字符串 -> 在窗口上运行此函数作为属性“objectThatStoresFunction”。

我尝试过使用Function.prototype，但它并没有真正起作用。所以这个函数变得有点复杂。

function watchFunction(objectThatStoresFunction, functionName) {
  let counter = 0;

  const originalFunction = objectThatStoresFunction[functionName];

  objectThatStoresFunction[functionName] = (...args) => {
    console.log("watching");
    counter += 1;
    return originalFunction(...args);
  }

  return {
    getCount: () => {
      return counter
    }
  }
}




const mathRoundWatcher = watchFunction(Math, 'round');

// 0
console.log(mathRoundWatcher.getCount());

// 1
Math.round(99666.9999999);
console.log(mathRoundWatcher.getCount());

// 2
Math.round(999999999.99);
console.log(mathRoundWatcher.getCount());

也适用于窗口属性和 Array.prototype.map

function watchFunction(objectThatStoresFunction, functionName, optionalOriginalFunction) {
const self = this;
  if (optionalOriginalFunction) {
    objectThatStoresFunction = this.window;
    functionName = optionalOriginalFunction.name;
  }
  let counter = 0;

  const originalFunction = objectThatStoresFunction[functionName] || optionalOriginalFunction;


  objectThatStoresFunction[functionName] = (...args) => {
    counter += 1;
    return originalFunction.bind(self)(...args);
  }

  return {
    // should it remove the watcher or reset the count?
    reset: () => /* reset the count: counter = 0; */ objectThatStoresFunction[functionName] = originalFunction,
    getCount: () => {
      return counter;
    }
  }
}



const arrayMapWatcher = watchFunction(Array.prototype, 'map');

// 0
console.log('Array.prototype.map', arrayMapWatcher.getCount());

[-99].map(() => {});

// 1
console.log('Array.prototype.map', arrayMapWatcher.getCount());

const mathRoundWatcher = watchFunction(Math, 'round');

// 0
console.log('Math.round', mathRoundWatcher.getCount());

// 1
Math.round(99666.9999999);
console.log('Math.round', mathRoundWatcher.getCount());

// 2
Math.round(999999999.99);
console.log('Math.round', mathRoundWatcher.getCount());


const alertWatcher = watchFunction(null, null, window.alert);

// 0
console.log('window.alert', alertWatcher.getCount());

// 1
window.alert('1');
console.log('window.alert', alertWatcher.getCount());

// 2
alert('2')
console.log('window.alert', alertWatcher.getCount());

// reset the alertWatcher counter


alertWatcher.reset();

https://jsfiddle.net/ctbjnawz/3/