JS中this对象指向总结

在js中，每个函数在被调用时，会产生两个变量，this和arguments。这意味着，只有在函数调用之时，this的指向才能确定。

this在运行时是根据执行环境绑定的，主要分为以下六种情况：
当包含this的函数：
1.作为普通的全局函数调用：在全局函数中，this指向window。
2.作为对象的方法调用：在函数被作为某个对象的方法调用时，this指向那个对象。
3.作为构造函数调用：当函数为构造函数，此时this指向实例出来的对象。
4.被apply,bind，call等改变执行环境时，this指向其他对象。
5.是匿名函数，this永远指向window（在不改变执行环境的情况下）。
6.其他情况。

注意：无论那种情况，this的指向都遵循着根据执行环境绑定的规律。
下面进行详细说明：

一、作为普通全局函数调用

看一个栗子。

1
2
3
4
5
var name='w';
function a(){
	console.log(this.name);
};
a();//'w'

此时，函数a作为普通的全局函数调用，形式为函数名加括号，这种调用方法最常见，在这里，函数a中this指向window。

二、作为对象的方法调用

再看一个栗子。

1
2
3
4
5
6
7
8
var name='w';
var b = {
	name:'b',
	getName:function(){
		return this.name;
	}
};
console.log(b.getName());//'b'

此时，函数getName()作为b对象的方法调用，this指向b。

三、作为构造函数调用

栗子again。

1
2
3
4
5
6
7
8
9
var name='w';
function c(){
	this.name='c';
	this.getName=function(){
		console.log(this.name);
	}
};
var cc = new c();
cc.getName();//'c'

这里的函数c是一个构造函数，cc是c类型的一个实例对象，函数c中的this指向cc,所以cc.name=’c’，所以this.name=’c’。

四、被apply,bind，call等改变执行环境

由于this与执行环境绑定，所以当执行环境改变，this的指向也会改变。
比如：

1
2
3
4
5
6
7
8
9
var name='w';
var d = {
	name:'d'
};
function df(){
	console.log(this.name);
};
df();//'w'
df.call(d);//'d'

当df作为全局函数在全局作用域中调用时，this指向window。
但当df的执行环境通过call改变，df中的this指向也随之改变，指向d。
除了call，使用apply,bind等改变执行环境,效果相同。

五、匿名函数的this

1
2
3
4
5
6
7
8
9
10
var name='w';
var e = {
	name:'e',
	getName:function(){
		return function(){
			return this.name;
		}
	}
};
console.log(e.getName()());//'w'

首先，前面说过，每个函数被调用时，都会自动生成两个变量：this和arguments。而内部函数被调用时，在搜索这两个变量时，只会搜索到活动对象为止，而永远不会访问到外部函数中的这两个变量。
其次，由于匿名函数具有全局性，在不改变执行环境情况的下，匿名函数的this永远指向window。
所以，当匿名函数作为闭包出现，在调用它时，其中的this通常指向window。
在此例中，调用了e对象的getName()方法中的匿名函数，匿名函数作为闭包出现，所以这里的this指向window。
如果非要访问外部作用域中的this，需要将this保存在内部函数能够访问到的变量里。如下：

1
2
3
4
5
6
7
8
9
10
11
var name='w';
var e = {
	name:'e',
	getName:function(){
		var that = this;
		return function(){
			return that.name;
		}
	}
};
console.log(e.getName()());//'e'

六、其他情况

1.函数作为事件处理程序调用
DOM0级和DOM2级事件处理程序在元素的作用域中运行，this指向当前元素。
IE事件处理程序在全局作用域中运行，this指向window。
2.语法细微变化也可能意外的引起this值的改变。
如：

1
2
3
4
5
6
7
8
9
var name='w';
var object={
	name: 'My Object';
	getName: function(){
		return this.name;
	}
}
object.getName();//'My Object'
(object.getName = object.getName)();//'w'

(object.getName = object.getName)();
相当于:
（function(){
return this.name;
})();