理解js中this的指向
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理解js中this的指向相关的知识，希望对你有一定的参考价值。
学习自原文 http://www.cnblogs.com/pssp/p/5216085.html后的一点小结（原文作者总结的很棒^_^）！
关于js中this的指向，在函数定义的时候还无法确定，只有在函数执行的时候才能确定this到底指向谁，实际上this最终指向的是调用它的对象。
eg1：
function a(){
var user = "xxxx";
console.log(this.user); //undefined
console.log(this); //Window }
var user = "xxxx";
console.log(this.user); //undefined
console.log(this); //Window }
a();//此处和执行window.a()是一样的效果
··········································································································································································································································································
eg2：
var o = {
user:"xxxx",
fn:function(){
console.log(this.user); //xxxx
}
}
o.fn(); //此处和执行window.o.fn();是一样的效果。 这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那this自然指向的就是对象o
···········································································································································································································································································
eg3：
var o = {
a:10,
}
a:10,
b:{
fn:function(){
console.log(this.a); //undefined }
}}
o.b.fn();//尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。
··········································································································································································································································································
eg4：
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window }
}
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window }
}
}
var j = o.b.fn;//将对象o的属性b的方法即函数fn赋给变量j，此时并没有执行；
j(); //加了一个()立即执行函数fn，此处和执行window.fn();是一样的效果，此时this指向的是window。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的， 这句话至关重要。
例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn。
··········································································································································································································································································
eg5：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc( )( )); // The Window
这里object.getNameFunc( )( )会先执行object.getNameFunc( )，返回function( ){ return this.name; }这个函数，函数function(){ return this.name;}后面跟了一个( )会执行这个函数，此时这里的this指向的是window对象，所以this.name的值就是The Window。
··········································································································································································································································································
eg6：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
console.log(object.getNameFunc()()); // My Object
这里object.getNameFunc( )( )会先执行object.getNameFunc( )，返回function( ){ return this.name; }这个函数，函数function(){ return this.name; }后面跟了一个( )会执行这个函数，此时这里的this被赋值给了that，改变了this的指向，此时的this指向的是object对象，而不是window对象，所以this.name的值就是My Object 。
备注：
(function(){
....
})()
第一个括号是个运算符，它会返回这个匿名函数，然后最后一个小括号会执行这个函数。
······································································································································································································································································
结论：
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。这里需要说明的是在js的严格版中this指向的不是window，严格模式下禁止this关键字指向全局对象，严格模式下，this的值为undefined。
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，
以上是关于理解js中this的指向的主要内容，如果未能解决你的问题，请参考以下文章