手写实现call-apply（）函数

函数的this指向

函数中的this指向是在函数被调用的时候确定的，也就是执行上下文被创建时确定的。

在一个执行上下文中，this由调用者提供，由调用函数的方式来决定

1. 方法调用模式

哪个对象调用函数（object.method()），this就指向哪个对象

let obj={
    a:1,
    b:2,
}
obj.test=function(){
    let a=3
    console.log(this,this.a)
}
obj.test()
//结果为 { a: 1, b: 2, test: [Function: test] } 1
//test的this指向obj

2. 独立调用模式

独立调用时，指向window（严格模式下指向undefined）

// 例子1
window.a=111
var test1 =function(){
    let a=123
    console.log(this.a)
}
test1() // 输出结果为111，说明此时test1的this指向是全局的window
 
// 例子2
window.a=111
var obj = {
        a:222
}
 
obj.test2=function(){
    let a=333;
    console.log(this.a,'第一个')
    let func=function(){
        console.log(this.a,'第二个')
    }
    func()
}
 
obj.test2()
// 输出结果为：
// ’222 第一个‘ 说明this指向是obj,因为test2是方法调用
// ‘111 第二个’ 说明this指向是window，因为func是独立调用

3. 构造函数模式

js中,我们通过new关键词来调用构造函数，此时this会绑定在该实例对象上

window.a=111
test3=function(){
    this.a=444
}
test3()
console.log(window.a) 
//结果为‘444’，说明this指向的是windows，因为上面test3的调用模式是独立调用
 
let newObj= new test3()
console.log(newObj.a) 
// 结果为‘444’，说明this指向的是newObj，因为上面的test3的调用是作为构造函数的形式调用

类数组对象 arguments

arguments只在函数中存在(箭头函数除外)的伪数组（具有length，可以通过下标访问，但是不具有数组的方法, 比如push(),pop()等数组常用的方法），存储了我们传入的所有形参。

function testArgu(){
    console.log(arguments);
}
testArgu('a','b',123)

运行结果：

call()

原理：
当函数执行call方法的时候，实际上是把函数放到call()的第一个参数的某个属性上，然后再通过合格属性来执行函数

func.call(ctx,arg1,...)
 
//等价于以下代码
ctx.fn=func;
ctx.fn(arg1,....)

详细实现

Function.prototype.myCall=function(context,...args){
    //对this进行类型判断，如果不是function类型，就报错
    //this应该指向的是调用myCall函数的对象（function也属于对象object类型）
    //因为myCall的调用模式是上文提到的‘方法调用模式’
    if(typeof this != 'function'){
        throw new TypeError('type error')
    }
 
    // 不传的话，默认上下文是window
    var context = context || window
    
   // 假如context上面有fn属性的时候，会出现冲突
   // 所以当context上面有fn属性的时候，要先保存一下
    var temp = null
    if (context.fn) {
        temp = context.fn
    }
 
    // 给context创建一个fn属性，并将值设置为需要调用的函数（即this）
    context.fn = this
 
    //调用函数
    const res = context.fn(...args)
 
    // 删除context对象上的fn属性
    if (temp) {
        context.fn = temp
    } else {
        delete context.fn
    }
 
    // 返回运行结果
    return res
}

验证：

let num=1;
let obj={
    num:2,
    fn:'this is obj.fn'
}
 
 
function test(a,b,c,d){
    console.log(this.num,'test参数：',a,b,c,d)
}
 
// 调用myCall函数
test.myCall(obj,4,3,2,1)
 
// 检查obj本身的fn是否被修改
console.log(obj.fn)

运行结果：

说明手写的myCall方法可以修改this指向，并且obj本身的fn未被修改

apply()

原理：
基本原理和call类似，区别就是对参数对处理不同：

call方法接受的参数是一个参数列表，而apply方法接受的是一个包含多个参数的数组。

这里我们就可以用到上文说的类数组对象arguments来处理参数了

// 和myCall的不同之处1：参数
Function.prototype.myApply=function(context){
    if(typeof this!== 'function'){
        throw new TypeError('type error')
    }
    var context = context || window
    var temp = null
    if (context.fn) {
        temp = context.fn
    }
    context.fn = this
 
    let res;
    // 和myCall的不同之处2：参数的处理
    // 判断第二个参数是否存在
    if (arguments[1]) {
        res = context.fn(...arguments[1])
    }else{
        res = context.fn()
    }
 
    // 删除context对象上的fn属性
    if (temp) {
        context.fn = temp
    } else {
        delete context.fn
    }
 
    // 返回运行结果
    return res
}

验证：

let num=1;
let obj={
    num:2,
    fn:'this is obj.fn'
}
 
function test(a,b,c,d){
    console.log(this.num,'test参数：',a,b,c,d)
}
 
// 调用myCall函数
test.myApply(obj,[1,2,3,4])
 
// 检查obj本身的fn是否被修改
console.log(obj.fn)

运行结果：