手写call/apply/bind方法

目录

 

1.call方法

2.apply方法

3.bind方法

---

 

 

概念：

call/apply/bind

相同点：都可以用来重定义this的指向，第一个参数都是this的指向对象

不同点：传递的第二个参数不同（call的参数是直接放进去的，第二、第三个...第n个参数都是全部用逗号分隔，apply的所有参数都必须放在一个数组里面传进去，bind除了返回是函数以为，它的参数和call一样）

1.call方法

Function.prototype.myCall = function (context) {
    //1.判断是否传递了指向的对象
    const ctx = context || window
    //2.把函数挂到目标对象上
    ctx.func = this
    //3.保存参数
    const args = Array.from(arguments).slice(1)
    //4.判断是否传递了参数
    const res = arguments.length > 1 ? ctx.func(...args) : ctx.func()
    //3.删除挂载在目标对象上的函数
    delete ctx.func
    return res
}
//测试用例：
let obj = {
    c: 2
}

function a(x, y) {
    console.log(this, x, y)
}
a.myCall(obj, 1, 2)

2.apply方法

Function.prototype.myApply = function (context) {
    //1.判断是否传递了指向的对象
    const ctx = context || window
    //2.把函数挂到目标对象上

    ctx.func = this
    //3.调用此函数并且传参
    const res = arguments[1] ? ctx.func(...arguments[1]) : ctx.func()
    //3.删除挂载在目标对象上的函数
    delete ctx.func
    return res
}
var me = {
    name: 'Chris'
}

function showFullName(x, y) {
    console.log(`${this.name} ${x.a} ${y}`)
}
let test = {
    a: 'aaa',
    b: 2
}
showFullName.myApply(me, [test, 'sadas'])

3.bind方法

Function.prototype.myBind = function (context) {
    //1.对context进行深拷贝，防止bind执行后返回函数未执行期间，context被修改
    const ctx = JSON.parse(JSON.stringify(context)) || window
    //2.把函数挂到目标对象上
    ctx.func = this
    //3.保存参数
    const args = Array.from(arguments).slice(1)
    //bind只返回做改变不执行
    return function () {
        //bind方法只需要合并两次函数执行的参数
        const Allargs = args.concat(Array.from(arguments))
        return Allargs.length > 0 ? ctx.func(...Allargs) : ctx.func()
    }
}
obj = {
    c: 2
}

function a(x, y, z) {
    console.log(this, x, y, z)
}
a.myBind(obj, 1, 2)(3)