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

本文探讨JavaScript中this的四种绑定规则,并详细解析bind方法的定义和功能。通过分析bind的用途,如改变函数的this指向,解决绑定隐式丢失问题,以及在调用和构造上下文中的应用。最后,通过代码示例展示了如何手写一个bind方法,帮助读者深入理解其工作原理。
摘要由CSDN通过智能技术生成

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

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

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;
r
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值