js中的this

之前对this的用法一直不够清楚，今天回头又看了遍感觉终于理清了思路。

首先总的来说我们可以理解为，this指的就是调用函数的那个对象。

用法

// 1.函数调用
foo();

当我们直接调用一个函数的时候，这里的this会指向全局对象，在浏览器环境中即为window对象

// 2.方法调用
test.foo();

在这个例子中，foo作为test对象的方法调用，此时的this指向的就是这个test对象

// 3.调用构造函数
new foo();

在这种情况下，this将会指向构造函数所创建的新对象

// 4.显式的设置this
function foo(a,b,c){}

var bar = {};
foo.apply(bar,[1,2,3]);
foo.call(bar,1,2,3);

当使用函数对象的apply或者call方法时，函数内的this会被显式设置为函数调用的第一个参数，例子中就是在调用foo函数时将它的this指向了bar

例子

Foo.method = function(){
	function test(){
		// 此处的this指向全局对象
	}
	test();
}

此处容易误以为this指向Foo，而实际上这里因为直接调用test()，所以test()内部的this指向的是全局函数，若要获取对Foo对象的引用，需要在method函数内部创建一个局部变量指向Foo对象

Foo.method = function(){
	var that = this; // 这里的this才是指向Foo
	function test(){
		// 使用that来指向Foo对象
	}
	test();
}

另外还有一个例子：

var a = 10;

function test(){
	a = 5;
	alert(a);
	alert(this.a);
	var a;
	alert(this.a);
	alert(a);
}

// 问：执行test()和new test()的结果分别是什么？

上面这个例子中，执行test()的结果是：5,10,10,5; 执行new test()的结果是5,undefined,undefined,5

首先在函数内部存在变量提升，所以var a会被提升到函数开头，函数内部的a即为一个局部变量，并且被赋值了a = 5，所以两个alert(a)的结果都是5; 然后直接调用test()的时候，this指向的是全局对象，所以alert(this.a)的结果为10; 而new test()的时候，this指向的是创建的新对象，新对象并未定义属性a，所以alert(this.a)的结果为undefined