当前位置：首页 > JavaScript

js实现hook

2026-02-01 07:29:24JavaScript

在JavaScript中实现Hook

Hook是一种编程模式，允许在函数执行前后插入自定义逻辑。在JavaScript中，可以通过多种方式实现Hook功能。

使用高阶函数实现Hook

高阶函数可以接收函数作为参数或返回函数，适合实现Hook。

function withHook(originalFunction, beforeHook, afterHook) {
  return function(...args) {
    if (beforeHook) beforeHook(...args);
    const result = originalFunction(...args);
    if (afterHook) afterHook(result, ...args);
    return result;
  };
}

// 示例用法
const hookedFunction = withHook(
  (a, b) => a + b,
  (a, b) => console.log(`Before add: ${a}, ${b}`),
  (result, a, b) => console.log(`After add: ${result}`)
);

hookedFunction(2, 3); // 输出Before和After日志

使用Proxy实现对象方法Hook

Proxy可以拦截对象操作，适合对对象方法进行Hook。

function createHookedObject(target, hooks) {
  return new Proxy(target, {
    get(obj, prop) {
      const originalMethod = obj[prop];
      if (typeof originalMethod === 'function' && hooks[prop]) {
        return function(...args) {
          hooks[prop].before && hooks[prop].before(...args);
          const result = originalMethod.apply(this, args);
          hooks[prop].after && hooks[prop].after(result, ...args);
          return result;
        };
      }
      return originalMethod;
    }
  });
}

// 示例用法
const obj = {
  add(a, b) { return a + b; }
};

const hookedObj = createHookedObject(obj, {
  add: {
    before: (a, b) => console.log(`Adding ${a} and ${b}`),
    after: (result) => console.log(`Result: ${result}`)
  }
});

hookedObj.add(5, 7); // 输出Hook日志

使用装饰器实现Hook

在支持装饰器的环境中，可以使用装饰器语法实现Hook。

function hook(before, after) {
  return function(target, key, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args) {
      before && before.apply(this, args);
      const result = originalMethod.apply(this, args);
      after && after.call(this, result, ...args);
      return result;
    };

    return descriptor;
  };
}

// 示例用法
class Calculator {
  @hook(
    (a, b) => console.log(`Calculating ${a} + ${b}`),
    (result) => console.log(`Got result: ${result}`)
  )
  add(a, b) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(3, 4); // 输出Hook日志

React风格的Hook实现

React的Hook机制可以通过闭包和链表实现。

let currentHook = 0;
let hooks = [];

function useState(initialValue) {
  const _currentHook = currentHook++;
  if (hooks[_currentHook] === undefined) {
    hooks[_currentHook] = initialValue;
  }

  const setState = (newValue) => {
    hooks[_currentHook] = newValue;
    // 这里应该触发重新渲染
  };

  return [hooks[_currentHook], setState];
}

// 示例用法
function Counter() {
  const [count, setCount] = useState(0);

  return {
    increment: () => setCount(count + 1),
    getCount: () => count
  };
}

const counter = Counter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1