其实如果完全掌握了this的工作原理，自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么：
1.全局代码中的this
|
1 |
alert(x);// 全局变量x值为2 |
全局范围内的this将会指向全局对象，在浏览器中即使window。
2.作为单纯的函数调用
|
1
2
3
4
5 |
function fooCoder(x) {this.x = x;}fooCoder(2);alert(x);// 全局变量x值为2 |
这里this指向了全局对象，即window。在严格模式中，则是undefined。
3.作为对象的方法调用
|
1
2
3
4
5
6
7
8 |
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.作为构造函数
|
1 |
new FooCoder(); |
5.内部函数
|
1
2
3
4
5
6
7
8
9
10
11
12 |
var name = "clever coder";var person = {name : "foocoder",hello : function(sth){var sayhello = function(sth) {console.log(this.name + " says " + sth);};sayhello(}person.hello("hello world");//clever coder says hello world |
在内部函数中，this没有按预想的绑定到外层函数对象上，而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self：
|
1
2
3
4
5
6
7
8
9
10
11
12 |
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
|
1 |
person.hello.call(person, "world"); |
|
1
2
3 |
call( thisArg [，arg1，arg2，… ] ); // 参数列表，arg1，arg2，...apply(thisArg [，argArray] ); // 参数数组，argArray |
两者都是将某个函数绑定到某个具体对象上使用，自然此时的this会被显式的设置为第一个参数。
简单地总结
简单地总结以上几点，可以发现，其实只有第六点是让人疑惑的。
其实就可以总结为以下几点：
- 当函数作为对象的方法调用时，this指向该对象。
- 当函数作为淡出函数调用时，this指向全局对象（严格模式时，为undefined）
- 构造函数中的this指向新创建的对象
- 嵌套函数中的this不会继承上层函数的this，如果需要，可以用一个变量保存上层函数的this。
再总结的简单点，如果在函数中使用了this，只有在该函数直接被某对象调用时，该this才指向该对象。
|
1
2
3 |
obj.foocoder();foocoder.call(obj, ...);foocoder.apply(obj, …); |
更进一步
我们可能经常会写这样的代码：
|
1 |
$("#some-ele").click = obj.handler; |
那我们如何能解决回调函数绑定的问题？ES5中引入了一个新的方法，bind():
|
1
2
3 |
fun.bind(thisArg[, arg1[, arg2[, ...]]])thisArg |
当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.
|
1 |
arg1, arg2, ... |
该方法创建一个新函数，称为绑定函数，绑定函数会以创建它时传入bind方法的第一个参数作为this，传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
显然bind方法可以很好地解决上述问题。
|
1
2 |
$("#some-ele").click(person.hello.bind(person));//相应元素被点击时，输出foocoder says hello world |
其实该方法也很容易模拟，我们看下Prototype.js中bind方法的源码：
|
1
2
3
4
5
6
7 |
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))); };}; |
明白了么？
