JavaScript-手写call原理

大家好，今天给大家带来的是JavaScript里面的call函数的原理和手写过程，这几天频繁更新，就不自我介绍了，哈哈哈哈今天直接进入正题，让我们来看一下call的作用，大家知道call的作用无非就是改变this指向，然后执行函数，那我们来手撸一下代码下面我们开始：

第一步我们准备好所需的代码：

function fn(num1,num2){
    console.log(this)
    return num1+num2
}
let obj={
    name:'张三'
}
let abc=fn.call(obj,1,2)
console.log(abc)

上面我们试一下上面的代码执行结果应该是

{name:'张三'}
3

跟我们讲的作用一模一样下面我们把call换成我们自己写的函数，在换之前我们思考一个问题，如何才能通过.访问到我们写的这个函数呢？没错通过原型链来设置

;(function(){
    function myCall(){
            
    }
    原型链
    Function.prototype.myCall=myCall
}())
=======================
function fn(num1,num2){
    console.log(this)
    return num1+num2
}
let obj={
    name:'张三'
}
let abc=fn.myCall(obj,1,2)
console.log(abc)

像上面这样写我们就可以实现通过.来使用这个函数了下面我们先模拟第一步就是输入啥值第一个值永远返回对象

因为我们只用关注第一个值，所以我们这只写一个参数
function myCall(context){
    context=context?Object(context):window
    return context
}

上面我们实现了第一个返回对象的形式，然后我们来实现第二步改变this的指向，及函数调用

function myCall(context){
    context=context?Object(context):window
    这行代码的意思：因为this现在指向的是fn的函数，我们在js里面调用函数不能this()这样调用函数，但我们可以context
    .fn()这样调用
    context.fn=this
    我们需要获得用户传入的后续更多的参数所以我们用数组来接收
    let args=[]
    获取全部参数我们可以使用js里面的arguments对象
    for(let i=1;i<arguments.length;i++){
        因为放在第一的是我们上边要转换成对象或者执行window的参数所以忽略第一个从1开始
        args.push(arguments[i])    
    }
    let res=context.fn(...args)
    delete context.fn
    return res
}

我们来试一下是否可以，我们发现结果多了一个function函数

{ name: '张三', fn: [Function: fn] }
3

我们上面是做了一个删除的操作的但这个console.log的this是在函数里写的所以跟js原生的是有点不一样的，但重在实现原理，理解原理，今天的手写js就到这里啦，喜欢的话，留下自己的一个赞谢谢谢！！！！