前言

我们知道，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.callfunc() //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 = thisreturn function () {_this.apply(obj, arguments)}}const func = obj.call.bind(obj)func() //name

尾言

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