假如咱们目前有一个小需要:
实现目标函数调用前后的业务逻辑办法。
// intro 实现 test 函数调用前后的业务逻辑办法;function test() {console.log(2);
};
// 调用函数
test();
// expect 冀望输入如下
// console.log(1);
// console.log(2);
// console.log(3);
思考一下咱们将会如何实现?
🤔🤔
难点:
1、办法在绑在哪?
2、函数的执行程序。
3、this 指向如何保障?
4、参数如何保障?
思路:
事实上咱们晓得在 js 代码中任何函数都是 Function 构造函数的实例对象,
既然要实现额定的性能就肯定会重写函数自身,意味着全新的函数,
故能够将办法绑定在所有函数的原型上;
实现如下:
// intro 实现 test 函数调用前后的业务逻辑办法;function test() {console.log(2);
};
// 绑定办法
Function.prototype.before = function(beforeFn) {
const _this = this; // test 调用 指向 原函数
return function() { // return 两头函数
beforeFn(); // 前置函数
_this(); // 原函数 test};
};
Function.prototype.after = function(afterFn) {
const _this = this; // 两头函数
return function() { // 最终重写后的 test 函数
_this(); // 两头函数
afterFn(); // 后置函数};
};
// 重写
test = test.before(function() {console.log(1);
})
.after(function() {console.log(3);
})
// 调用函数
test();
// 输入如下
// console.log(1);
// console.log(2);
// console.log(3);
如此就能实现函数调用前后的业务逻辑办法啦。
更多的问题?this 的指向如何保障呢?