手写apply

在自己实现apply之前，我们需要先了解一下对函数使用了apply之后完成了那些效果，再考虑怎么自己编写代码去实现这些效果。

let name = "张三"
let personObj = {
    name: "李四",
}
function getPersonName(){
    console.log(this)
    console.log(this.name)
}
getPersonName()
// window
// 张三
getPersonName.apply(personObj)
// personObj
// 李四

相必大家都知道，普通函数中的this指向的是调用这个函数的对象，如果开启了严格模式，那么this会是undefind。

那么根据原始的apply效果我们可以得出：

1. apply是个函数，并且会接收参数，第一个参数就是你需要将this绑定的对象；

2. 函数通过apply之后会把内部的this指向到apply传进去的第一个参数对象；

3. 函数通过调用apply之后会执行

接下来我们先写一个自己的apply方法，并且这个方法是放在函数的原型上，这样就可以直接通过函数.进行调用：

Function.prototype._apply = function(target){
    console.log(this)
    console.log(target)
}
......
getPersonName._apply(personObj)
// getPersonName
// personObj

我们先写了一个简单的_apply函数并放在函数的prototype上，在通过getPersonName._apply调用时可以看到，_apply函数中的this指向调用它的对象也就是getPersonName这个函数，接收的target参数就是this需要绑定的对象personObj。我们的第一步就完成了，接下来考虑第二步，怎么将getPersonName中的this指向变成personObj。

同样根据之前说到的，函数中的this指向调用这个函数的对象，那么我们在调用函数之前将函数放到新this指向的对象中，然后通过对象去调用，不就可以让函数的this指向到这个对象了吗。

function fun(){
    console.log(this)
    console.log(this.name)
}
let obj = {
    name: "李四"
}
obj.fun = fun
obj.fun()
// obj
// 李四

我们在_apply函数中需要这样修改一下：

Function.prototype._apply = function(target){
    target.fun = this
    target.fun()
}

但是因为target是引用数据类型，我们直接给它添加fun属性的话会影响到原始数据，所以需要在调用函数之后将这个属性删除：

Function.prototype._apply = function(target){
    target.fun = this
    target.fun()
    delete target.fun
}

这里还需要改进一下，因为传进去的target中可能本身就存在fun属性，那么在通过_apply之后就会将这个属性删除，肯定是有问题的，所以给target添加的键名要是唯一的，不会与已存在的属性重名的，我们就可以用ES6中的Symbol来设置键名：

Function.prototype._apply = function(target){
    let fn = Symbol()
    target[fn] = this
    target[fn]()
    delete target[fn]
}

现在一个简单的apply功能就实现了，但是我们知道apply函数中是可以传其他参数的，就像下面这样：

let personObj = {
    name: "李四",
}
function getPersonName(age,sex){
    console.log(this.name,age,sex)
}
getPersonName.apply(personObj,[18,'男'])
// 李四 18 男

从上面可以看出，当函数getPersonName需要有参数传进去的时候，apply是把这些参数放在数组中，然后作为第二个参数接收的，所以我们在_apply中也需要接收这些参数，并在函数调用的时候传进去。

Function.prototype._apply = function(target){
    let fn = Symbol()
    target[fn] = this
    // arguments就是传进去的参数集合，通过arguments[1]得到传进来的数组参数
    let args = arguments[1]
    if(args){
        // 通过...展开运算符将数组参数展开传给函数
        target[fn](...args)
    }else{
        // 当args没有值的时候直接调用函数，不传参
        target[fn]()
    }
    delete target[fn]
}
let personObj = {
    name: "李四",
}
function getPersonName(age,sex){
    console.log(this.name,age,sex)
}
getPersonName._apply(personObj,[18,'男'])
// 李四 18 男

我们在使用apply的时候还会发现，如果第一个参数传的是null或者undefind，这个时候函数中的this会指向window，所以需要在_apply中进行一下判断：

Function.prototype._apply = function(target){
    (target == null || target == undefined) && (target = window);
    let fn = Symbol();
    target[fn] = this
    // arguments就是传进去的参数集合，通过arguments[1]得到传进来的数组参数
    let args = arguments[1]
    if(args){
        // 通过...展开运算符将数组参数展开传给函数
        target[fn](...args)
    }else{
        // 当args没有值的时候直接调用函数，不传参
        target[fn]()
    }
    delete target[fn]
}

我们还发现，如果原始函数中有返回值的时候，apply也会有返回值：

function fun(age,sex){
    return {name: this.name,age,sex}
}
let obj = {
    name: "李四"
}
let a = fun.apply(obj,[18,'男'])
console.log(a) // {name: '李四', age: 18, sex: '男'}

在_apply中也需要添加返回值：

Function.prototype._apply = function(target){
    (target == null || target == undefined) && (target = window);
    let fn = Symbol();
    target[fn] = this
    // arguments就是传进去的参数集合，通过arguments[1]得到传进来的数组参数
    let args = arguments[1]
    let result;
    if(args){
        // 通过...展开运算符将数组参数展开传给函数
        result = target[fn](...args)
    }else{
        // 当args没有值的时候直接调用函数，不传参
        result = target[fn]()
    }
    delete target[fn]
    return result
}

至此，我们已经基本实现了手写apply的功能，当然还是会存在一些问题的，比如apply的第一个参数为基本数据类型的时候，现在写的_apply方法中会出现报错，因为基本数据类型没办法通过target[fn]添加属性，而通过对apply方法进行测试得出，如果第一个参数是基本数据类型，函数中的this会是对应类型的实例。比如如果是number，那么this就是通过new Number(target)出来的实例，所以进行下面的处理：

Function.prototype._apply = function(target){
    (target == null || target == undefined) && (target = window);
    if(typeof target !== 'object'){
        if(typeof target == 'number') target = new Number(target)
        if(typeof target == 'boolean') target = new Boolean(target)
        if(typeof target == 'string') target = new String(target)
    }
    let fn = Symbol();
    target[fn] = this
    // arguments就是传进去的参数集合，通过arguments[1]得到传进来的数组参数
    let args = arguments[1]
    let result;
    if(args){
        // 通过...展开运算符将数组参数展开传给函数
        result = target[fn](...args)
    }else{
        // 当args没有值的时候直接调用函数，不传参
        result = target[fn]()
    }
    delete target[fn]
    return result
}

以上就是自己关于对apply作用的理解写出的方法，如果有什么错误或者问题欢迎大家在评论区指正。