JavaScript手写call、apply和bind

1、介绍call、apply和bind

        call：在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。        

        apply ：apply 的实现跟 call 类似，只是入参不一样，apply为数组。

        bind：bind方法会创建一个新函数。当这个新函数被调用时，bind的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

let obj = {
    value: 1
}
function fun1(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)    
}

fun1.call(obj, 'zhangsan', 18) // zhangsan 18 1
fun1.apply(obj, ['zhangsan', 18]) // zhangsan 18 1
fun1.bind(obj, 'zhangsan', 18)() // zhangsan 18 1

2、手写call和apply

let obj = {
    value: 1
}
function fun(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)    
}

// 自定义call
Function.prototype.customCall = function (context) {
    context = context || window
    context.fun = this // this指向的是调用customCall函数的对象
    var args = [...arguments].splice(1)
    const result = context.fun(...args)
    delete context.fun // 函数执行完之后就不需要了，所以进行删除
    return result
}


// 自定义apply
Function.prototype.customApply = function (context, arr = []) {
    context = context || window
    context.fun = this
    const result = context.fun(...arr)
    delete context.fun
    return result
}

fun.customCall(obj, 'zhangsan', 18)
fun.customApply(obj, ['zhangsan', 18])

3、手写bind 

var value = 2
let obj = {
    value: 1
}
function fun(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)    
}
fun.prototype.like = 'code'

let fun2 = fun.bind(obj, 'zhangsan', 18)
// 直接调用
fun2() // zhangsan 18 1

// bind返回的函数作为构造函数使用
let t = new fun2() // zhangsan 18 undefined(this.value为undefined，说明this即没有指向obj,也没有指向window, 指向的是生成的实例t)
t.like // code

// 自定义bind（1、返回一个函数 2、接收参数）
Function.prototype.customBind = function (context){
    if(typeof this !== 'function'){
        return new Error('this is not a function')
    }

    const _this = this
    const args = [...arguments].splice(1)

    function tempFun() {} // 中转构造函数
    const fBound = function (){
        // _this.apply(context, [...args, ...arguments])

        // 当fBound作为构造函数的时候，this应该指向创建的实例，而不是context
        _this.apply(this instanceof tempFun ? this : context, [...args, ...arguments])
    }
    // fBound.prototype = this.prototype // 直接这样写，修改fBound.prototype的同时，也会修改this.prototype，所以利用tempFun函数进行中转
    tempFun.prototype = this.prototype
    fBound.prototype = new tempFun()

    return fBound
}