手写call、apply、bind函数
程序员文章站
2022-07-14 14:18:14
...
Function.prototype.myCall=function(context){
//判断调用对象
if(typeof this!=="function"){
console.err('type error');
}
//获取参数
let args=[...arguments].slice(1),
result=null;
//判断context是否传入,如果未传入则设置未window
context=context||window;
//将调用函数设为对象的方法
context.fn=this;
//调用函数
result=context.fn(...args);
//将属性删除
delete context.fn;
return result;
}
call 函数的实现步骤:
1.判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。
2.判断传入上下文对象是否存在,如果不存在,则设置为 window。
3.处理传入的参数,截取第一个参数后的所有参数。
4.将函数作为上下文对象的一个属性。
5.使用上下文对象来调用这个方法,并保存返回结果。
6.删除刚才新增的属性。
7.返回结果。
Function.prototype.myApply=function(context){
//判断调用对象是否为函数
if(typeof this!=="function"){
throw new TypeError('Error');
}
let result=null;
context=context||window;
context.fn=this;
if(arguments[1]){
result=context.fn(...arguments[1]);
}else{
result=context.fn();
}
delete context.fn;
return result;
}
apply 函数的实现步骤:
1.判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。
2.判断传入上下文对象是否存在,如果不存在,则设置为 window 。
3.将函数作为上下文对象的一个属性。
4.判断参数值是否传入
5.使用上下文对象来调用这个方法,并保存返回结果。
6.删除刚才新增的属性
7.返回结果
Function.prototype.myBind=function(context){
if(typeof this!=="function"){
throw new TypeError('Error');
}
var args=[...arguments].slice(1),
fn=this;
return function Fn(){
//根据调用方式,传入不同绑定值
return fn.apply(
this instanceof Fn ? this:context,
args.concat(...arguments)
)
}
}
bind 函数的实现步骤:
1.判断调用对象是否为函数,即使我们是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。
2.保存当前函数的引用,获取其余传入参数值。
3.创建一个函数返回
4.函数内部使用 apply 来绑定函数调用,需要判断函数作为构造函数的情况,这个时候需要传入当前函数的 this 给 apply 调用,其余情况都传 入指定的上下文对象。
推荐阅读
-
javascript中call apply 与 bind方法详解
-
js中的call bind apply简单分析
-
javascript中apply、call和bind的使用区别
-
【THE LAST TIME】this:call、apply、bind
-
Javascript函数内置方法call/apply实例讲解
-
javascript基于原型链的继承及call和apply函数用法分析
-
Javascript中apply、call、bind的用法讲解
-
浅谈JavaScript中的apply/call/bind和this的使用
-
JavaScript函数apply()和call()用法与异同分析
-
javascript中call,apply,bind函数用法示例