js 实现hook
在 JavaScript 中实现 Hook
Hook 是一种在函数执行前后插入自定义逻辑的技术，常用于拦截或增强原有功能。以下是几种实现 Hook 的方法：
使用高阶函数包装
通过高阶函数包裹目标函数，在调用前后添加逻辑：
function withHook(originalFunc, beforeHook, afterHook) {
return function(...args) {
if (beforeHook) beforeHook(...args);
const result = originalFunc.apply(this, args);
if (afterHook) afterHook(result, ...args);
return result;
};
}
// 示例用法
const hookedFunc = withHook(
(a, b) => a + b,
(a, b) => console.log(`Before add: ${a}, ${b}`),
(result) => console.log(`After add: ${result}`)
);
hookedFunc(2, 3); // 输出日志并返回5使用 Proxy 拦截
ES6 Proxy 可以拦截对象属性的访问和调用：
function createHookProxy(target, hooks) {
return new Proxy(target, {
apply: function(target, thisArg, args) {
if (hooks.before) hooks.before.apply(thisArg, args);
const result = target.apply(thisArg, args);
if (hooks.after) hooks.after.call(thisArg, result);
return result;
}
});
}
// 示例用法
const hooked = createHookProxy(Math.max, {
before: (...args) => console.log('Max called with:', args),
after: (result) => console.log('Max result:', result)
});
hooked(1, 2, 3); // 输出调用参数和结果修改原型方法
直接修改原型方法实现全局 Hook：
const oldFetch = window.fetch;
window.fetch = async function(...args) {
console.log('Fetching:', args[0]);
const response = await oldFetch.apply(this, args);
console.log('Fetch complete:', response.status);
return response;
};React Hooks 实现
在 React 中可以使用自定义 Hook 复用状态逻辑：
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
// 组件中使用
function MyComponent() {
const { width, height } = useWindowSize();
return <div>Window size: {width}x{height}</div>;
}注意事项
- 确保 Hook 逻辑不会显著影响性能
- 保持 Hook 的纯净性，避免副作用
- 在修改原生方法时考虑兼容性和潜在冲突
- 对于异步函数需要正确处理 Promise 链
