js实现hook
在JavaScript中实现Hook（钩子）通常指在函数执行前后插入自定义逻辑，或修改原有函数的行为。以下是几种常见的实现方式：
使用高阶函数包装
通过高阶函数包裹目标函数，在调用前后添加逻辑：
function originalFunction() {
console.log('原始函数执行');
}
function createHook(originalFn, beforeHook, afterHook) {
return function() {
if (beforeHook) beforeHook.apply(this, arguments);
const result = originalFn.apply(this, arguments);
if (afterHook) afterHook.apply(this, arguments);
return result;
};
}
const hookedFunction = createHook(
originalFunction,
() => console.log('执行前钩子'),
() => console.log('执行后钩子')
);
hookedFunction();修改原型方法
对于对象方法，可通过修改原型实现Hook：
const original = SomeClass.prototype.method;
SomeClass.prototype.method = function() {
console.log('Before hook');
const result = original.apply(this, arguments);
console.log('After hook');
return result;
};Proxy实现拦截
使用Proxy代理对象实现更灵活的Hook：
const target = {
method: () => console.log('原始方法')
};
const proxy = new Proxy(target, {
get(obj, prop) {
if (prop === 'method') {
return function() {
console.log('Before proxy hook');
obj[prop].apply(this, arguments);
console.log('After proxy hook');
};
}
return obj[prop];
}
});
proxy.method();React Hooks示例
在React函数组件中使用官方Hooks：
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count changed to ${count}`);
return () => console.log('清理效果');
}, [count]);
return <button onClick={() => setCount(c => c + 1)}>点击</button>;
}注意事项
- 避免无限递归：Hook中调用原始函数时需确保不会导致循环调用
- 保持this绑定：使用
apply或call确保正确的上下文 - 性能考虑：频繁调用的函数需谨慎添加Hook逻辑
以上方法可根据具体场景选择，高阶函数适合简单函数Hook，Proxy适合复杂对象拦截，React场景则使用官方Hooks API。
