理解JavaScript 中的 this

理解JavaScript 中的 this

JavaScript中的 this总是让人迷惑，应该是 js众所周知的坑之一。
个人也觉得 js中的 this不是一个好的设计，由于 this晚绑定的特性，它可以是全局对象，当前对象，或者…有人甚至因为坑大而不用 this。
其实如果完全掌握了 this的工作原理，自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么：

1. 全局代码中的 this

alert(this)//window

全局范围内的 this将会指向全局对象，在浏览器中即使 window。

2. 作为单纯的函数调用

function fooCoder(x) {
this.x= x;
}
fooCoder(2);
alert(x);// 全局变量 x值为2

这里 this指向了全局对象，即 window。在严格模式中，则是 undefined。

3. 作为对象的方法调用

var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
console.log(this.name + " says " + sth);
}
}
person.hello("hello world");

输出 foocoder says hello world。this指向 person对象，即当前对象。

4. 作为构造函数

newFooCoder();

函数内部的 this指向新创建的对象。

5. 内部函数

var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var sayhello = function(sth) {
console.log(this.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world");//clever coder says hello world

在内部函数中，this没有按预想的绑定到外层函数对象上，而是绑定到了全局对象。这里普遍被认为是 JavaScript语言的设计错误，因为没有人想让内部函数中的 this指向全局对象。一般的处理方式是将 this作为变量保存下来，一般约定为 that或者 self：

var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var that = this;
var sayhello = function(sth) {
console.log(that.name + " says " + sth);
};
sayhello(sth);
}
}
person.hello("hello world");//foocoder says hello world

6. 使用 call 和 apply 设置 this

person.hello.call(person, "world");

apply和 call类似，只是后面的参数是通过一个数组传入，而不是分开传入。两者的方法定
义：

call( thisArg [，arg1，arg2，…] ); // 参数列表，arg1，arg2，...
apply(thisArg [，argArray] ); // 参数数组，argArray

两者都是将某个函数绑定到某个具体对象上使用，自然此时的 this会被显式的设置为第一个参数。
简单地总结以上几点，可以发现，其实只有第六点是让人疑惑的。其实就可以总结为以下几点：
1.当函数作为对象的方法调用时，this指向该对象。
2.当函数作为淡出函数调用时，this指向全局对象（严格模式时，为 undefined）
3.构造函数中的 this指向新创建的对象
4.嵌套函数中的 this不会继承上层函数的 this，如果需要，可以用一个变量保存上层函数的
this。
再总结的简单点，如果在函数中使用了 this，只有在该函数直接被某对象调用时，该 this才
指向该对象。

obj.foocoder();
foocoder.call(obj, ...);
foocoder.apply(obj, …);

更进一步
我们可能经常会写这样的代码：

$("#some-ele").click = obj.handler;

如果在 handler中用了 this，this会绑定在 obj上么？显然不是，赋值以后，函数是在回调中执行的，this会绑定到$("#some-div")元素上。
这就需要理解函数的执行环境。本文不打算长篇赘述函数的执行环境，可以参考《javascript高级程序设计》中对执行环境和作用域链的相关介绍。这里要指出的时，理解 js函数的执行环境，会更好地理解 this。
那我们如何能解决回调函数绑定的问题？ES5中引入了一个新的方法，

bind():
fun.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg

当绑定函数被调用时,该参数会作为原函数运行时的 this指向.当使用 new 操作符调用绑定函数时,该参数
无效.
arg1, arg2, …
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.该方法创建一个新函数，称为绑定函数，绑定函数会以创建它时传入 bind方法的第一个参数作为 this，传入 bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.显然 bind方法可以很好地解决上述问题。

$("#some-ele").click(person.hello.bind(person));//相应元素被点击时，输出 foocoder says hello world

其实该方法也很容易模拟，我们看下 Prototype.js中 bind方法的源码：

Function.prototype.bind = function(){
var fn = this, args = Array.prototype.slice.call(arguments), object =
args.shift();
return function(){
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
};

明白了么？
相信看完全文以后，this不再是坑～