自定义call&apply&bind的实现

仿造原生js的call,apply,bind的原理自定义绑定this的工具函数

实现思路:大致是改变函数执行环境中this的指向,这个this的指向根据谁调用了这个函数来决定,如果将这个函数成为某个对象方法,this就和这个对象进行了绑定。
注意:在自定义的函数中记得返回被调用的函数(this发生改变)其返回值,如果传入的对象是null或者undefined,则被调用的函数this指向window。
代码实现:
function Call (Fn,obj,...argument) {

 // 如果obj是null或者undefined,Fn的this指向window,所以由window来调用

 if (obj === undefined || obj === null) {

 obj = window

 }

 // 1.给obj添加一个属性,值为Fn,目的是改变this指向

 obj.tempFun = Fn

 // 2.调用该函数,改变执行环境中this的指向

 let result = obj.tempFun(...argument)

 // 3.删除obj添加的方法

 delete obj.tempFun

 // 4.返回函数执行的返回值

 return result

 }

 function Apply (Fn,obj,argument) {

 // 两者只是传参的形式不同,在函数体里调用自定义的Call函数,参数解构赋值即可

 return Call(Fn,obj,...argument)

 }

 function Bind (Fn,obj,...argument) {

 return function(...argument2) {

 Call(Fn,obj,...argument,...argument2)

  }

 }

验证结果:
function fn (a,b) {

 console.log(a,b,this)

 }

 let person = {name:'zhangsan',age: 10}

 fn(1,2)

 Call(fn,person,1,2)

 Call(fn,undefined,1,2)

 Apply(fn,person,[1,2])

 Apply(fn,null,[1,2])

 let bindFun = Bind(fn,person)

 bindFun(3,4)

image.png

阅读 80

推荐阅读