js 使用bind解决this丢失问题、手写一个简单的bind

前言

我们知道，bind是用来绑定函数到固定对象上的，可以用于改变某些函数的this指向，但是并不是所有浏览器都支持bind，我们能不能理解bind的原理，手写一个bind呢？

问题

我们知道一个对象的取决于当前作用域所在的对象，不理解的可以看这篇文章：js this指向详解。

因此下面这段代码很好理解。

    const obj = {
        NAME: 'name',
        call: function () {
            console.log(this.NAME)
        }
    }
    obj.call() //name

当我们将call函数重新声明新函数时，则this会丢失。

    const obj = {
        NAME: 'name',
        call: function () {
            console.log(this.NAME)
        }
    }
    const func = obj.call
    func() //undefined

那么如何防止它丢失呢？我们可以在重新声明时用bind绑定它原来的对象。

    const obj = {
        NAME: 'name',
        call: function () {
            console.log(this.NAME)
        }
    }
    const func = obj.call.bind(obj)
    func() //name

然后问题就出现了，如果浏览器不支持bind，你咋办？

bind的原理不过是把调用bind的函数对象绑定到传入的对象上面，我们可以使用apply实现。

    const obj = {
        NAME: 'name',
        call: function () {
            console.log(this.NAME)
        }
    }

    Function.prototype.bind = Function.prototype.bind || function (obj) {
        const _this = this
        return function () {
            _this.apply(obj, arguments)
        }
    }
    
    const func = obj.call.bind(obj)
    func() //name

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~