bind、call、apply 的原理解析

bind、call、apply 

hope_light关注

2020.04.27 15:15:13字数 185阅读 5

bind、call、apply 三者的作用

都是用来改变函数运行时的 this 指向问题

基本使用

var name = 'window'

function test() {
    console.log(...arguments)
    console.log(this.name)
    return 'test function'
}

console.log(test(1, 2, 3))
console.log(test.bind({ name: 'bind'}, 1, 2, 3)(4, 5))
console.log(test.call({ name: 'call'}, 1, 2, 3))
console.log(test.apply({ name: 'apply'}, [1, 2, 3]))

> 1, 2, 3
> window
> test function
> 1, 2, 3, 4, 5
> bind
> test function
> 1, 2, 3
> call
> test function
> 1, 2, 3
> apply
> test function

使用 bind 在修改源函数的情况

重复绑定无效
只会生效第一次的绑定

var name = 'window'

function test() {
    console.log(...arguments)
    console.log(this.name)
    return 'test function'
}

test = test.bind({ name: 'bind'}, 1, 2, 3)
test = test.bind({ name: 'bind1'}, 4, 5, 6)
console.log(test(7, 8))

// result
> 1, 2, 3, 4, 5, 6, 7, 8
> bind
> test function

bind、call、apply 三者的区别

	bind	call	apply
参数	(目标对象，query1, query2,..)	(目标对象，query1, query2,..)	(目标对象，[query1, query2,..])
返回值	已经将 this 硬绑定为目标对象的一个函数，再次调用这个返回函数之后，才能执行原函数并得到原函数的返回值	原函数的返回值	原函数的返回值

原理实现

bind

Function.prototype.lBind = function (target) {
    // 截取传进来的除目标对象之外的其余参数
    var _argu = Array.prototype.slice.call(arguments, 1)
    var _this = this

    return function () {
        // 接收新的参数
        _argu = _argu.concat(Array.prototype.slice.call(arguments))

        Object.defineProperty(target, '_fn', {
            enumerable: false,  // 不可枚举
            writable: false,    // 不可写
            configurable: true, // 可以配置 才可以删除
            value: _this
        })
        var result = target._fn(..._argu)

        delete target._fn

        return result
    }
}

console.log(test.lBind({ name: 'lBind' }, 1, 2, 3)(4, 5))
test = test.lBind({ name: 'lBind' }, 1, 2, 3)
test = test.lBind({ name: 'lBind' }, 4, 5, 6)
console.log(test(7, 8))

// result
> 1, 2, 3, 4, 5
> lBind
> test function
> 1, 2, 3, 4, 5, 6, 7, 8
> lBind
> test function

call

Function.prototype.lCall = function (target) {
    // 截取传进来的除目标对象之外的其余参数
    var _argu = []
    for (var i in arguments) {
        if (i !== '0') _argu.push(arguments[i])
    }
    var _this = this

    Object.defineProperty(target, '_fn', {
        enumerable: false,  // 不可枚举
        writable: false,    // 不可写
        configurable: true, // 可以配置 才可以删除
        value: _this
    })
    var result = target._fn(..._argu)

    delete target._fn

    return result
}

console.log(test.lCall({ name: 'lCall'}, 1, 2, 3))

// result
> 1, 2, 3
> lCall
> test function

apply

Function.prototype.lApply = function (target) {
    // 截取传进来的除目标对象之外的其余参数
    var _argu = arguments[1] || []
    var _this = this

    Object.defineProperty(target, '_fn', {
        enumerable: false,  // 不可枚举
        writable: false,    // 不可写
        configurable: true, // 可以配置 才可以删除
        value: _this
    })
    var result = target._fn(..._argu)

    delete target._fn

    return result
}

console.log(test.lApply({ name: 'lApply'}, [1, 2, 3]))

// result
> 1, 2, 3
> lApply
> test function

【笔记不易，如对您有帮助，请点赞，谢谢】