当前位置：首页 > JavaScript

js 实现hook

2026-04-06 21:08:59JavaScript

JavaScript 实现 Hook 的方法

在 JavaScript 中实现 Hook 可以通过多种方式，以下是几种常见的方法：

使用 Proxy 对象

Proxy 可以拦截对象的基本操作，适合对对象进行 Hook：

js 实现hook

const target = {
  name: 'John',
  age: 30
};

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);
console.log(proxy.name); // 触发 get
proxy.age = 31; // 触发 set

函数 Hook

通过保存原函数引用并替换为新函数来实现 Hook：

js 实现hook

function originalFunction(a, b) {
  return a + b;
}

const original = originalFunction;
originalFunction = function(...args) {
  console.log('Function called with args:', args);
  const result = original.apply(this, args);
  console.log('Function result:', result);
  return result;
};

originalFunction(2, 3); // 会输出调用和返回信息

类方法 Hook

对于类的方法可以使用类似的 Hook 技术：

class MyClass {
  method(value) {
    return value * 2;
  }
}

const instance = new MyClass();
const originalMethod = instance.method;

instance.method = function(...args) {
  console.log('Method called with:', args);
  const result = originalMethod.apply(this, args);
  console.log('Method returned:', result);
  return result;
};

instance.method(5); // 输出调用和返回信息

DOM 事件 Hook

可以 Hook DOM 事件监听器：

const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener, options) {
  console.log(`Adding event listener for ${type}`);
  const wrappedListener = function(...args) {
    console.log(`Event ${type} triggered`);
    return listener.apply(this, args);
  };
  return originalAddEventListener.call(this, type, wrappedListener, options);
};

document.addEventListener('click', () => {
  console.log('Clicked!');
});