与其他语言相比,函数的 this
关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。
在绝大多数情况下,函数的调用方式决定了this
的值。this
不能在执行期间被赋值,并且在每次函数被调用时this
的值也可能会不同。ES5引入了bind方法来设置函数的this
值,而不用考虑函数如何被调用的,ES2015 引入了支持this
词法解析的箭头函数(它在闭合的执行环境内设置this
的值)。
语法
this
值
当前执行代码的环境对象
全局环境
无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this
都指向全局对象。
函数(运行内)环境
在函数内部,this
的值取决于函数被调用的方式。
简单调用
因为下面的代码不在严格模式下,且 this
的值不是由该调用设置的,所以 this
的值默认指向全局对象。
然而,在严格模式下,this
将保持他进入执行环境时的值,所以下面的this
将会默认为undefined
。
所以,在严格模式下,如果 this
没有被执行环境(execution context)定义,那它将保持为 undefined
。
this
的确应该是undefined,因为f2
是被直接调用的,而不是作为对象的属性或方法调用的(如 window.f2()
)。有一些浏览器最初在支持严格模式时没有正确实现这个功能,于是它们错误地返回了window
对象。如果要想把 this
的值从一个环境传到另一个,就要用 call
或者apply
方法。
当一个函数在其主体中使用 this
关键字时,可以通过使用函数继承自Function.prototype
的 call
或 apply
方法将 this
值绑定到调用中的特定对象。
使用 call
和 apply
函数的时候要注意,如果传递给 this
的值不是一个对象,JavaScript 会尝试使用内部 ToObject
操作将其转换为对象。因此,如果传递的值是一个原始值比如 7
或 'foo'
,那么就会使用相关构造函数将它转换为对象,所以原始值 7
会被转换为对象,像 new Number(7)
这样,而字符串 'foo'
转化成 new String('foo')
这样,例如:
bind
方法
ECMAScript 5 引入了 Function.prototype.bind
。调用f.bind(someObject)
会创建一个与f
具有相同函数体和作用域的函数,但是在这个新函数中,this
将永久地被绑定到了bind
的第一个参数,无论这个函数是如何被调用的。
箭头函数
在箭头函数中,this
与封闭词法环境的this
保持一致。在全局代码中,它将被设置为全局对象:
注意:如果将this
传递给call
、bind
、或者apply
,它将被忽略。不过你仍然可以为调用添加参数,不过第一个参数(thisArg
)应该设置为null
。
无论如何,foo
的 this
被设置为他被创建时的环境(在上面的例子中,就是全局对象)。这同样适用于在其他函数内创建的箭头函数:这些箭头函数的this
被设置为封闭的词法环境的。
在上面的例子中,一个赋值给了 obj.bar
的函数(称为匿名函数 A),返回了另一个箭头函数(称为匿名函数 B)。因此,在 A
调用时,函数B的this
被永久设置为obj.bar(函数A)的this
。当返回的函数(函数B)被调用时,它this
始终是最初设置的。在上面的代码示例中,函数B的this
被设置为函数A的this
,即obj,所以即使被调用的方式通常将其设置为 undefined
或全局对象(或者如前面示例中的其他全局执行环境中的方法),它的 this
也仍然是 obj
。
作为对象的方法
当函数作为对象里的方法被调用时,它们的 this
是调用该函数的对象。
下面的例子中,当 o.f()
被调用时,函数内的this
将绑定到o
对象。
请注意,这样的行为,根本不受函数定义方式或位置的影响。在前面的例子中,我们在定义对象o
的同时,将函数内联定义为成员 f
。但是,我们也可以先定义函数,然后再将其附属到o.f
。这样做会导致相同的行为:
这表明函数是从o
的f
成员调用的才是重点。
同样,this
的绑定只受最靠近的成员引用的影响。在下面的这个例子中,我们把一个方法g
当作对象o.b
的函数调用。在这次执行期间,函数中的this
将指向o.b
。事实证明,这与他是对象 o
的成员没有多大关系,最靠近的引用才是最重要的。
原型链中的 this
对于在对象原型链上某处定义的方法,同样的概念也适用。如果该方法存在于一个对象的原型链上,那么this
指向的是调用这个方法的对象,就像该方法在对象上一样。
在这个例子中,对象p
没有属于它自己的f
属性,它的f属性继承自它的原型。虽然在对 f
的查找过程中,最终是在 o
中找到 f
属性的,这并没有关系;查找过程首先从 p.f
的引用开始,所以函数中的 this
指向p
。也就是说,因为f
是作为p
的方法调用的,所以它的this
指向了p
。这是 JavaScript 的原型继承中的一个有趣的特性。
getter 与 setter 中的 this
再次,相同的概念也适用于当函数在一个 getter
或者 setter
中被调用。用作 getter
或 setter
的函数都会把 this
绑定到设置或获取属性的对象。
作为构造函数
当一个函数用作构造函数时(使用new关键字),它的this
被绑定到正在构造的新对象。
虽然构造器返回的默认值是this
所指的那个对象,但它仍可以手动返回其他的对象(如果返回值不是一个对象,则返回this
对象)。
在刚刚的例子中(C2
),因为在调用构造函数的过程中,手动的设置了返回对象,与this
绑定的默认对象被丢弃了。(这基本上使得语句 “this.a = 37;
”成了“僵尸”代码,实际上并不是真正的“僵尸”,这条语句执行了,但是对于外部没有任何影响,因此完全可以忽略它)。
作为一个DOM事件处理函数
当函数被用作事件处理函数时,它的this
指向触发事件的元素(一些浏览器在使用非addEventListener
的函数动态添加监听函数时不遵守这个约定)。
作为一个内联事件处理函数
当代码被内联on-event 处理函数调用时,它的this
指向监听器所在的DOM元素:
上面的 alert 会显示button
。注意只有外层代码中的this
是这样设置的:
在这种情况下,没有设置内部函数的this
,所以它指向 global/window 对象(即非严格模式下调用的函数未设置this
时指向的默认对象)。
规范
Specification | Status | Comment |
---|---|---|
ECMAScript Latest Draft (ECMA-262) The this keyword | Draft | |
ECMAScript 2015 (6th Edition, ECMA-262) The this keyword | Standard | |
ECMAScript 5.1 (ECMA-262) The this keyword | Standard | |
ECMAScript 3rd Edition (ECMA-262) The this keyword | Standard | |
ECMAScript 1st Edition (ECMA-262) The this keyword | Standard | Initial definition. Implemented in JavaScript 1.0. |
浏览器兼容
Update compatibility data on GitHubYes | Yes | 1 | Yes | Yes | Yes | Yes | Yes | 4 | Yes | Yes | Yes | Yes |
Legend
Full support