社区首页 >专栏 >this介绍（理论加例子）

this介绍（理论加例子）

用户7293182

发布于 2022-01-17 13:52:30

26200

代码可运行

文章被收录于专栏：jQuery每日经典jQuery每日经典

运行总次数：0

代码可运行

与其他语言相比，一个函数的 this 关键字在JavaScript中的表现略有不同。它在严格模式和非严格模式之间也有一些区别。

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的。

全局上下文

在全局运行上下文中（在任何函数体外部），this指代全局对象，无论是否在严格模式下。

console.log(this.document === document); // true
// 在浏览器中，全局对象为 window 对象：
console.log(this === window); // true
this.a = 37;console.log(window.a); // 37

函数上下文

在函数内部，this的值取决于函数是如何调用的。

1. 直接调用

因为下面的代码不是在严格模式下执行，并且this的值不会在函数执行时被设置，此时的this的值会默认设置为全局对象。

function f1(){
 return this;
}
f1() === window; // true

然而，在严格模式下，this将保持他进入执行环境时的值，所以下面的this将会默认为undefined

function f2(){
 "use strict"; // 这里是严格模式
 return this;
}
f2() === undefined; // true

在严格模式下，如果this未被执行的上下文环境定义，那么它将会默认为undefined。

2. 对象方法中的 this

当以对象里的方法的方式调用函数时，它们的 this 是调用该函数的对象.

下面的例子中，当 o.f() 被调用时，函数内的this将绑定到o对象。

var o = {
 prop: 37,
 f: function() {
   return this.prop;
 }
};
console.log(o.f()); // logs 37

注意，在何处或者如何定义调用函数完全不会影响到this的行为。在上一个例子中，我们在定义o的时候为其成员f定义了一个匿名函数。但是，我们也可以首先定义函数然后再将其附属到o.f。这样做this的行为也一致：

var o = {prop: 37};
function independent() {
 return this.prop;
}
o.f = independent;
console.log(o.f()); // logs 37

这说明this的值只与函数 f 作为 o 的成员被调用有关系。

类似的，this 的绑定只受最靠近的成员引用的影响。在下面的这个例子中，我们把一个方法g当作对象o.b的函数调用。在这次执行期间，函数中的this将指向o.b。事实上，这与对象本身的成员没有多大关系，最靠近的引用才是最重要的。

o.b = {
 g: independent,
 prop: 42
};
console.log(o.b.g()); // logs 42

3. 原型链中的 this

相同的概念在定义在原型链中的方法也是一致的。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，表现得好像是这个方法就存在于这个对象上一样。

var o = {
 f : function(){
   return this.a + this.b;
 }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5

在这个例子中，对象p没有属于它自己的f属性，它的f属性继承自它的原型。但是这对于最终在o中找到f属性的查找过程来说没有关系；查找过程首先从p.f的引用开始，所以函数中的this指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是JavaScript的原型继承中的一个有趣的特性。

4. getter 与 setter 中的 this

再次，相同的概念也适用时的函数作为一个 getter 或者一个setter调用。作为getter或setter函数都会绑定 this 到从设置属性或得到属性的那个对象。

function modulus(){
 return Math.sqrt(this.re * this.re + this.im * this.im);}var o = {
 re: 1,
 im: -1,
 get phase(){
   return Math.atan2(this.im, this.re);
 }
};
Object.defineProperty(o, 'modulus', {
 get: modulus, enumerable:true, configurable:true
});
console.log(o.phase, o.modulus); // logs -0.78 1.4142

5. 构造函数中的 this

当一个函数被作为一个构造函数来使用（使用new关键字），它的this与即将被创建的新对象绑定。

注意：当构造器返回的默认值是一个this引用的对象时，可以手动设置返回其他的对象，如果返回值不是一个对象，返回this。

/*
* Constructors work like this:
*
* function MyConstructor(){
*   // Actual function body code goes here.  
*   // Create properties on |this| as
*   // desired by assigning to them.  E.g.,
*   this.fum = "nom";
*   // et cetera...
*
*   // If the function has a return statement that
*   // returns an object, that object will be the
*   // result of the |new| expression.  Otherwise,
*   // the result of the expression is the object
*   // currently bound to |this|
*   // (i.e., the common case most usually seen).
* }
*/

function C(){
 this.a = 37;
}
var o = new C();
console.log(o.a); // logs 37
function C2(){
 this.a = 37;
 return {a:38};
}
o = new C2();
console.log(o.a); // logs 38

在最后的例子中（C2），因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被取消（本质上这使得语句“this.a = 37;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了但是对于外部没有任何影响，因此完全可以忽略它）。

6. DOM事件处理函数中的 this

当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。

// 被调用时，将关联的元素变成蓝色
function bluify(e){
 console.log(this === e.currentTarget); // 总是 true // 当 currentTarget 和 target 是同一个对象是为 true
 console.log(this === e.target);        
 this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
 elements[i].addEventListener('click', bluify, false);
}