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 中 的指向非常重要。
领取专属 10元无门槛券
私享最新 技术干货