this介绍(理论加例子)

2022-01-17 21:52:30 浏览数 (2)

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

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

全局上下文

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

代码语言:javascript复制
console.log(this.document === document); // true
// 在浏览器中,全局对象为 window 对象:
console.log(this === window); // true
this.a = 37;console.log(window.a); // 37

函数上下文

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

1. 直接调用

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

代码语言:javascript复制
function f1(){
 return this;
}
f1() === window; // true

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

代码语言:javascript复制
function f2(){
 "use strict"; // 这里是严格模式
 return this;
}
f2() === undefined; // true

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

2. 对象方法中的 this

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

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

代码语言:javascript复制
var o = {
 prop: 37,
 f: function() {
   return this.prop;
 }
};
console.log(o.f()); // logs 37

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

代码语言:javascript复制
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。事实上,这与对象本身的成员没有多大关系,最靠近的引用才是最重要的。

代码语言:javascript复制
o.b = {
 g: independent,
 prop: 42
};
console.log(o.b.g()); // logs 42
3. 原型链中的 this

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

代码语言:javascript复制
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 到从设置属性或得到属性的那个对象。

代码语言:javascript复制
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。

代码语言:javascript复制
/*
* 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的函数动态添加监听函数时不遵守这个约定)。

代码语言:javascript复制
// 被调用时,将关联的元素变成蓝色
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);
}

0 人点赞