call apply bind的实现

一.call|apply|bind

• 作用:
  • 改变this的指向
• 不同之处:
  • call和apply的传参方式不同
  • bind与call和apply的调用方式不同

###二.基本使用

call:

function add(n, m) {
    console.log('add函数执行了', this, n + m);
    return '哈哈'
}

add.call({name:"xiaowu"}, 1, 2) // 'add函数执行了' {name:"xiaowu"}  3

allpy:

function add(n, m) {
    console.log('add函数执行了', this, n + m);
    return '哈哈'
}
//注意:与call的参数传递不同 apply参数是放在数组里面
add.apply({name:"xiaowu"}, [1,2]) // 'add函数执行了' {name:"xiaowu"}  3

bind:

function add(n, m) {
    console.log('add函数执行了', this, n + m);
    return '哈哈'
}
//方式一:
let res = add.bind({name:"xiaowu"}, 1,2) 
res()    // 'add函数执行了' {name:"xiaowu"}  3

//方式二: 把参数分开传递也行
let res = add.bind({name:"xiaowu"}, 1) 
res(2)    // 'add函数执行了' {name:"xiaowu"}  3

手写实现(部分边界情况可能未考虑)

1. call

Function.prototype.myCall = function (thisArg,...arg) {
            // 1.保存函数
            const fn = this
            // 2.判断this到底绑定到哪里
            thisArg = thisArg ? Object(thisArg) : window
            // 3.调用函数
            thisArg.fn = fn
            var res = thisArg.fn(...arg)
            delete thisArg.fn
            // 4.返回返回值
            return res
}

//测试:
add.myCall("123", 1, 2)  //add函数执行了 String {'123', fn: ƒ} 3

2. apply

 Function.prototype.myApple = function (thisArg,argArr) {
            const fn = this

            thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window

            thisArg.fn = fn
            const res = thisArg.fn(...argArr || [])
            delete thisArg.fn
            return res
 }
 
//测试:
add.myApple("456")  //add函数执行了 String {'456', fn: ƒ} 5

3. bind

 Function.prototype.myBind = function (thisArg, ...arg1) {
            const fn = this

            thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
            thisArg.fn = fn
            return function(...arg2) {
               let res = thisArg.fn(...arg1,...arg2)
               return res
            }
            delete thisArg.fn
}
//测试
add.myBind("456",10)(20) //add函数执行了 String {'456', fn: ƒ} 30
add.myBind("456",10,20)() //add函数执行了 String {'456', fn: ƒ} 30