Javascript的this指向：call方法原理

call方法的作用是什么？

• 改变调用call方法的函数this指向到新的对象上。

实现这样一个call方法需要什么知识才能理解？

• 原型链
• this指向
• arguments
  这三点懂了基本就能懂了！

//在Function原型上绑定myCall方法，这样所有函数都会继承到myCall方法
Function.prototype.myCall = function (){
    //得到需要绑定的对象
    let obj = arguments[0]
    //用于存储参数，这些参数将会传给调用myCall的那个方法上。
    let argArr = []
    //当方法调用myCall，此处的this就指向了调用myCall的方法。
    //因为myCall挂载到了Function，所以调用myCall通常是一个function，所以this指向的是一个方法
    console.log(this)
    // 这this指向的function将会被绑定到myCall的第一个参数的引用（obj）中
    obj.callFn = this
    //其他参数我们用一个数组进行接收
    for (let i = 1;i<arguments.length;i++){
        argArr.push(arguments[i])
    }
    //前面所做都都是为了下面obj.callFn(...argArr)这一步
    //当通过functionDemo.myCall(param0,param1,parma2...)就相当于param0.functionDemo(param1,param2...)了
    const res = obj.callFn(...argArr)
    delete obj.callFn
    return res
}
function demo (i){
    console.log(this[i])
}
//这里可以知道Function是所有方法的构造函数
console.log("方法的构造函数等于Function？：",demo.constructor === Function)
//Function原型上挂载了myCall,那么所有方法都继承了该原型的方法
console.log("方法的原型：",demo.__proto__)
//所以demo可以调用myCall
demo.myCall([1,2,3],1)
console.log("myCall:",[].filter.myCall([1, 2, 3], function (item) {
    return item > 2
}))
console.log("call:",[].filter.call([1, 2, 3], function (item) {
    return item > 2
}))

这个小实验想说明什么？

• 所有方法都是有Function进行构造的。所以所有方法的constructor都指向Function
• 方法的原型里面挂在了 myCall这个方法，那么所有方法都能够通过fun.__proto__查看到。同时所有方法都能够使用。