时间戳

首页 > 解决方案 > 拦截函数调用或改变函数行为的方法有哪些？

javascript - 拦截函数调用或改变函数行为的方法有哪些？

问题描述

每次调用对象中的某些函数并完成执行时，我都想执行一些代码。

目的：

{
    doA() {
        // Does A
    },
    doB() {
        // Does B
    }
}

是否可以扩展它，改变这些功能，以便他们做他们所做的事情，然后做其他事情？就像是一个监听那些功能完成的事件？

{
    doA() {
        // Does A
        // Do something else at end
    },
    doB() {
        // Does B
        // Do something else at end
    }
}

也许这可以使用代理https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

尝试使用代理：

const ob = {
    doA() {
        console.log('a');
    },
    doB() {
        console.log('b');
    }
};

const ob2 = new Proxy(ob, {
  apply: function (target, key, value) {
    console.log('c');
  },
});

ob2.doA();

标签： javascriptmethodsinterceptorcontrol-flowproxy-pattern

解决方案

这是将函数包装在对象中的一种直接方式的示例。

这对于调试很有用，但您不应该在生产环境中这样做，因为您（或任何稍后查看您的代码的人）将很难弄清楚为什么您的方法正在执行原始代码中没有的事情。

var myObj = {
  helloWorld(){
    console.log('Hello, world!');
  }
}


// get a refernce to the original function
var f = myObj.helloWorld;

// overwrite the original function
myObj.helloWorld = function(...args){
  
  // call the original function first
  f.call(this, ...args);
  
  // Then  do other stuff afterwards
  console.log('Goodbye, cruel world..');
};


myObj.helloWorld();

推荐阅读