前端面试之手写一个bind方法

最新推荐文章于 2022-08-10 12:54:18 发布

weixin_34167043

最新推荐文章于 2022-08-10 12:54:18 发布

阅读量1.1k

点赞数 1

文章标签：前端面试 javascript ViewUI

原文链接：https://juejin.im/post/5bbdbdbc5188255c393f89c0

版权

bind 函数对于写react的人来说并不陌生。哦！是的，没错我的朋友，它的一个用处就是用来改变函数this指向的。如果细究一下bind的实现，发现里面还是有不少东西的，我们今天展开讨论一下。

在说bind之前呢，我们还要先来讲讲我们的老熟人 **this。今天我们再来看看它的四种绑定规则

1.默认绑定

独立函数调用时， this 指向全局对象，如果使用严格模式，那么全局对象无法使用默认绑定， this 绑定至 undefined 并抛错（TypeError: this is undefined）

2.隐式绑定

当函数作为引用属性被添加到对象中，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象

3.显示绑定

运用apply call 方法，在调用函数时候绑定this，也就是指定调用的函数的this值

4.new绑定

就是使用new操作符的时候的this绑定

上述四条规则优先级由上到下依次递增。

由于js多样的绑定规则，带来了 绑定隐式丢失问题， 即函数中的 this 丢失绑定对象，即它会应用第 1 条的 默认绑定 规则，从而将 this 绑定到全局对象或者 undefined 上。

例如：绑定至上下文对象的函数被赋值给一个新的函数，然后调用这个新的函数时

var obj = {
  a: 2,
 foo: function () {
   console.log(this.a)
  }
}
var a = 2
setTimeout(obj.foo, 0) // 2
复制代码

还记得我们当年我们是怎么做的吗？

...
var me = this;
return function () {
  me.xxx()
}
...
复制代码

还有就是用call 或者apply来显示的绑定：

function <

关注