首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

520继续卷,JS中this的指向问题

JavaScript 中的 关键字是一个非常重要且常用的概念,它代表当前函数执行时的上下文对象。 的指向在 JavaScript 中是非常灵活的,不同的情况下指向不同的对象,下面我们来详细讲解 的指向问题。

常见this的绑定

1. 默认绑定

当函数没有明确指定 的绑定对象时,即在非严格模式下, 的指向会默认绑定到全局对象上(在浏览器环境下是 对象,在 Node.js 环境下是 对象),例如:

2. 隐式绑定

当函数作为对象的方法进行调用时, 的指向会隐式绑定到调用该方法的对象上,例如:

在上面的例子中, 方法的调用者是 对象,因此 的指向就会隐式地绑定到 对象上,从而访问到 对象的 属性。

需要注意的是,如果在对象内部定义一个函数,并将其作为参数传递到其他函数中,那么该函数内部的 指向可能会发生改变,例如:

在上面的例子中, 方法内部通过 调用了 方法,由于 是一个独立的函数调用,因此其中的 指向会被绑定到全局对象上,导致 方法内部访问不到 对象的 属性。

3. 显示绑定

通过使用 、 或者 等函数,可以显式地绑定 的指向,例如:

在上面的例子中,通过 、 或者 函数,将 函数的 指向显式地绑定到 对象上,从而访问到 对象的属性。

需要注意的是,当使用、 或者 函数显式绑定 指向时,如果同时使用了默认绑定,那么默认绑定会被忽略。例如:

在上面的例子中,虽然 显式绑定了 指向,但在 调用时依然使用了默认绑定,因此 的指向是全局对象。

4. new 绑定

在使用 关键字调用构造函数时, 的指向会被绑定到新创建的对象上,例如:

在上面的例子中,通过 关键字调用 构造函数创建了一个新的对象 ,此时 的指向会被自动绑定到新创建的对象 上,从而将 属性添加到 对象中。

需要注意的是,如果构造函数内部返回一个对象,那么 的指向会被忽略,返回的对象会被作为新创建的对象返回,例如:

在上面的例子中,虽然 构造函数内部使用了 ,但返回了一个新的对象 ,因此 的指向会被忽略, 对象会被返回成为 的结果。

5.箭头展示中this的指向

在箭头函数中, 的指向是固定的,始终指向外层函数的 。箭头函数的 指向是静态的,一旦确定了指向,就无法更改。例如:

在上面的例子中, 函数返回了一个箭头函数,该箭头函数的 指向 函数的 ,即 对象。当调用 函数时,箭头函数的 指向仍然是 对象,因此输出了 。

需要注意的是,如果箭头函数是在全局作用域中定义的,那么它的 指向就是全局对象。例如:

在上面的例子中, 是在全局作用域中定义的箭头函数,因此它的 指向是全局对象。

需要注意的问题

除了上面提到的情况外,还有一些值得注意的地方:

严格模式下的默认绑定

在严格模式下,默认绑定的行为会与非严格模式有所不同。在非严格模式下,如果函数调用不符合任何绑定规则,则默认绑定会绑定到全局对象上。而在严格模式下,如果函数调用不符合任何绑定规则,则默认绑定的 值会被设置为 ,例如:

在上面的例子中,虽然 函数没有任何显式绑定,但在严格模式下, 的值会被设置为 。

DOM 事件处理函数中的 this

在处理 DOM 事件时,事件处理函数中的 指向的是触发事件的元素。例如:

在上面的例子中,事件处理函数中的 指向的是按钮元素,因为该函数是通过按钮元素的 方法注册的。

jQuery 中的 this

在 jQuery 中,大多数方法都会返回 jQuery 对象,以便支持链式调用。在 jQuery 方法链中, 指向的始终是 jQuery 对象本身,例如:

在上面的例子中, 方法返回的是 jQuery 对象,后续的方法链中的 始终指向该对象。在事件处理函数中, 指向的是触发事件的元素。

总结

默认绑定:在函数调用中,如果没有其他绑定规则适用,则默认绑定到全局对象或 (严格模式下)。

隐式绑定:在函数调用中,如果函数作为对象的方法被调用,则隐式绑定到该对象。

显式绑定:可以使用 、 或 方法显式指定函数的 。

绑定:在使用 运算符创建新对象时,会自动将 绑定到新对象上。

箭头函数绑定:箭头函数的 始终指向外层函数的 ,无法通过 、 或 方法更改。

严格模式下的默认绑定:在严格模式下,默认绑定的 值会被设置为 。

DOM 事件处理函数中的 :在处理 DOM 事件时,事件处理函数中的 指向的是触发事件的元素。

jQuery 中的 :在 jQuery 方法链中, 始终指向 jQuery 对象本身,在事件处理函数中指向触发事件的元素。

谁在调用函数, 指向就是谁,不然就是全局对象。然而,也存在一些特殊情况,其中 的指向不仅仅取决于调用函数的对象。例如,使用 、 或者 等方法可以显式地指定函数的 。此外,箭头函数具有固定的词法作用域,其中的 始终指向外层函数的 ,而不会被调用方式所改变。

因此,虽然 "谁在调用函数, 指向就是谁" 可以在一些情况下成立,但为了准确理解 的指向,需要考虑更多的因素,如绑定规则、箭头函数和特殊的调用方式。

了解这些绑定规则对于正确理解 JavaScript 中 的指向非常重要。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20230520A01E9X00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券