记录一个知识点,共勉。
1. call 的简单使用
在使用 call 方法是注意以下两点:
foo 函数本身执行了
call 改变了函数 foo 中 this 的指向,该例指向到 obj
varobj={value:1}functionfoo(){console.log(this.value)}foo.call(obj)//1
2. 模拟实现原理
varobj={value:1,foo:function(){console.log(this.value)}}//此时调用obj.foo也可以打印出value的值
因而得到模拟的原理:
1. 给对象 obj 赋值函数 foo
2. 调用这个函数
3. 调用完后删除这个函数
obj.fn=fooobj.fn()deleteobj.fn
3. 第一步
Function.prototype.call2=function(context){context.fn=thiscontext.fn()deletecontext.fn}//使用varobj={value:1}functionfoo(){console.log(this.value)}foo.call2(obj)//1
4. 第二步
call 方法可接收不定量参数
1. 在函数内部使用 arguments 可得到参数类数组
2. 使用 eval 执行函数解决参数传递问题,内部会自动调用 Array.toString()
Function.prototype.call2=function(context){context.fn=thisconstargs=[]for(vari=1,len=arguments.length;i<len;i++){args.push('arguments['+i+']');}eval('context.fn('+args+')')deletecontext.fn}//使用varobj={value:1}functionfoo(name,age){console.log(name)console.log(age)console.log(this.value)}foo.call2(obj,'Tom',18)//Tom//18//1
5. 第三步
1. call 方法第一个参数可以传 null,此时 this 指向 window
2. 第一个参数也可以传常量,使用 Object 包一层
Function.prototype.call2=function(context){varcontext=context||windowcontext.fn=thisconstargs=[]for(vari=1,len=arguments.length;i<len;i++){args.push('arguments['+i+']');}eval('context.fn('+args+')')deletecontext.fn}
6. 第四步
call 方法可以拥有返回值
Function.prototype.call2=function(context){varcontext=context||windowcontext.fn=thisconstargs=[]for(vari=1,len=arguments.length;i<len;i++){args.push('arguments['+i+']');}varres=eval('context.fn('+args+')')deletecontext.fnreturnres}varobj={value:1}functionfoo(name,age){return{name,age,val:this.value}}console.log(foo.call(obj,'Tom',18))//Object{//name:'Tom',//age:18,//value:1,//}
7. apply 方法的模拟实现
apply 的实现与 call 类似,唯一区别是 apply 接收的参数以数组的方式传入
Function.prototype.apply2=function(context,arr){varcontext=context||windowcontext.fn=thisvarresif(!arr){res=context.fn()}else{varargs=[]for(vari=1,len=arguments.length;i<len;i++){args.push('arguments['+i+']');}res=eval('context.fn('+args+')')}deletecontext.fnreturnres}
最后
这里只是简单的模拟实现,其中还有很多细节可以完善,例如对参数的类型判断,写法的优化等