当前位置：首页 > JavaScript

js实现hook

2026-04-06 00:00:34JavaScript

JavaScript 实现 Hook 的方法

Hook（钩子）是一种在程序执行过程中拦截、修改或增强原有功能的技术。在 JavaScript 中，Hook 通常用于修改函数行为、监听事件或拦截对象属性访问。

函数 Hook

通过替换原函数实现 Hook，可以在调用前后插入自定义逻辑。

const originalFunction = target.functionName;
target.functionName = function(...args) {
  console.log('Before hook');
  const result = originalFunction.apply(this, args);
  console.log('After hook');
  return result;
};

对象属性 Hook

使用 Object.defineProperty 或 Proxy 拦截对象属性的访问和修改。

const obj = { value: 1 };
Object.defineProperty(obj, 'value', {
  get() {
    console.log('Getting value');
    return this._value;
  },
  set(newValue) {
    console.log('Setting value');
    this._value = newValue;
  }
});

Proxy Hook

ES6 Proxy 提供了更强大的拦截能力，可以拦截对象的各种操作。

const target = {};
const handler = {
  get(target, prop) {
    console.log(`Getting property ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};
const proxy = new Proxy(target, handler);

事件监听 Hook

通过重写 addEventListener 实现对事件监听的 Hook。

const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener, options) {
  console.log(`Event ${type} hooked`);
  originalAddEventListener.call(this, type, listener, options);
};

异步 Hook

对 Promise 进行 Hook，拦截 then/catch 等方法。

const originalThen = Promise.prototype.then;
Promise.prototype.then = function(onFulfilled, onRejected) {
  console.log('Promise then hooked');
  return originalThen.call(this, onFulfilled, onRejected);
};