返回
再谈模拟实现 call、apply、bind 函数
前端
2023-09-23 22:26:12
先说一下call和apply的模拟实现,因为bind的实现就需要借助call或apply了。
call模拟实现:
Function.prototype.myCall = function(obj, ...args) {
// 检查参数有效性
if (typeof this !== "function") {
throw new Error("this is not a function");
}
if (obj === null || obj === undefined) {
obj = globalThis;
}
// 绑定this指向
obj.temp = this;
// 调用函数并返回结果
const result = obj.temp(...args);
// 解除this指向
delete obj.temp;
return result;
};
apply模拟实现:
Function.prototype.myApply = function(obj, args) {
// 检查参数有效性
if (typeof this !== "function") {
throw new Error("this is not a function");
}
if (obj === null || obj === undefined) {
obj = globalThis;
}
// 绑定this指向
obj.temp = this;
// 调用函数并返回结果
const result = obj.temp(...args);
// 解除this指向
delete obj.temp;
return result;
};
bind的实现,根据我们之前的分析,利用call或apply去实现会更简单:
bind模拟实现:
Function.prototype.myBind = function(obj, ...args) {
// 检查参数有效性
if (typeof this !== "function") {
throw new Error("this is not a function");
}
const fn = this;
// 返回一个新的函数
return function(...bindArgs) {
// 调用原函数
return fn.myApply(obj, [...args, ...bindArgs]);
};
};
通过上面的模拟实现,你可以更深入地理解 call、apply、bind 的工作原理,同时锻炼你的编程能力。希望本文能帮助你成为一名更出色的 JavaScript 开发者。