js手撕this绑定--模拟call函数的实现

第一印--模拟call函数的实现:
第一步我们向所有函数父类的原型上也就是window的Function属性原型上添加模仿的call函数

//Function原型上添加模仿的call函数
Function.prototype.imicall=function (){
    console.log("模拟call:");
    //这里面的this就是sum这个函数
    let fn=this
    fn()
}
function sum(){
   console.log("i am sum:",this);
}
sum.imicall()

第二步尝试用隐式绑定把函数引用的this绑定到指定传入的对象上（简单实现）

Function.prototype.imicall=function (flag){
    console.log("模拟call:");
    let fn=this
    flag.fn=fn
    flag.fn()
    delete flag.fn
}
function sum(){
   console.log("i am sum:",this);
}
var obj={name:'xwl'}
sum.imicall(obj)

第三步考虑边界（绑定对象的选值情况）--进一步完善this绑定
首先要知道通过call函数绑定的this类型最后都为object

function test(){
    console.log(typeof this);
    console.log(this);
    console.log("i am test");
}
test.call(123)

接下来考虑下null和undefined如何处理
我们先来看下结果

可以看到都是window，至于转换成对象，这个简单，直接用Object包裹就可以了
所以思路如下：如果flag有值且不为空那么就用Object包裹，否则就赋为window

Function.prototype.imicall=function (flag){
    console.log("模拟call:");
     if(flag!==0){
         flag=flag?Object(flag):window
     }else{
         flag=Object(flag)
     }
    let fn=this
    flag.fn=fn
    flag.fn()
    delete flag.fn
}
function sum(){
   console.log("i am sum:",this);
}
var obj={name:'xwl'}
sum.imicall(obj)

接下来我们来测试下好使不

Function.prototype.imicall=function (flag){
    console.log("模拟call:");
     if(flag!==0){
         flag=flag?Object(flag):window
     }else{
         flag=Object(flag)
     }
    let fn=this
    flag.fn=fn
    flag.fn()
    delete flag.fn
}
function sum(){
   console.log("i am sum:",this);
}
var obj={name:'xwl'}
sum.imicall(obj)
sum.imicall(null)
sum.imicall(undefined)
sum.imicall()

第四步解决参数传递问题
首先想到的是我们能不能用函数自带的保存参数的arguments来做

Function.prototype.imicall=function (flag){
    console.log("模拟call:");
    console.log(arguments);
     if(flag!==0){
         flag=flag?Object(flag):window
     }else{
         flag=Object(flag)
     }
    let fn=this
    flag.fn=fn
    flag.fn()
    delete flag.fn
}
function sum(num1,num2){
   console.log("i am sum:",this);
   console.log(num1+num2);
}
var obj={name:'xwl'}
sum.imicall(obj,1,2)

所以我们把下标从1开始的元素推到新的数组里，再将数组展开放到执行函数参数中

Function.prototype.imicall=function (flag){
    console.log("模拟call:");
    let args=[]
    for(var i=1;i<arguments.length;i++){
        args.push(arguments[i])
    }
     if(flag!==0){
         flag=flag?Object(flag):window
     }else{
         flag=Object(flag)
     }
    let fn=this
    flag.fn=fn
    flag.fn(...args)
    delete flag.fn
}
function sum(num1,num2){
   console.log("i am sum:",this);
   console.log(num1+num2);
}
var obj={name:'xwl'}
sum.imicall(obj,1,2)

感觉有点麻烦对吗？
那就用es6，需要注意的是如果我们向flag后面添加个新的参数，并对其展开，那么它会是什么？

欸嘿，它直接就是数组，那就好办了，底下直接展开不就完事了！

第五步别家函数都可以显示返回值，你不也得搞一个！

Function.prototype.imicall=function (flag,...args){
    console.log("模拟call:");
     if(flag!==0){
         flag=flag?Object(flag):window
     }else{
         flag=Object(flag)
     }
    let fn=this
    flag.fn=fn
    var result=flag.fn(...args)
    console.log(result);
    delete flag.fn
    return result
}
function sum(num1,num2){
   console.log("i am sum:",this);
//    console.log(num1+num2);
   return num1+num2
}
var obj={name:'xwl'}
var res=sum.imicall(obj,1,2)
console.log(res);

最后一步完整版

Function.prototype.imicall=function (flag,...args){
    console.log("模拟call:");
     if(flag!==0){
         flag=flag?Object(flag):window
     }else{
         flag=Object(flag)
     }
    let fn=this
    flag.fn=fn
    var result=flag.fn(...args)
    delete flag.fn
    return result
}
function sum(num1,num2){
   console.log("i am sum:",this);
   return num1+num2
}
var obj={name:'xwl'}
var res=sum.imicall(obj,1,2)