对于javascript的初学者来说，一般对“this”关键字都感到非常迷惑。本文的目的旨在让你全面的了解“this”，理解在每一个情景下如何使用“this”，希望通过本文，可以帮助同学们不在害怕“this”！！
从生活中发现
其实“this”就是我们平时用的一个代词。打个简单的比喻：
“小豆豆是一个很幽默的人，他非常喜欢看《暴走漫画》”
但是你也可以这样写：
“小豆豆是一个很幽默的人，小豆豆非常喜欢看《暴走漫画》”
但是日常生活中我们会一直用这种方式来描述一个人吗？如果你的回答是Yes，好吧，估计再也没有人愿意跟你做朋友了，我没骗你…（开个玩笑:-) ）。 所以，人类就发明了这样一种看似高端、洋气、上档次的代名词，说白了javascript中的“this”也就是这么一个东东。
一个简单的例子：
person = { firstName: "zhou",
lastName: "Quan",
fullName:function(){ alert(person.firstName + " " + person.lastName);//Zhou Quan
alert(this.firstName + " " + this.lastName);//Zhou Quan
}
}
person.fullName();
我们可以根据前面所说的方式来理解这个程序的结果， 但是这仅仅停留在表面而已，下面我们再进行更深一步的理解。
this基础
首先，我们知道javascript中所有的函数都拥有属性，就像一个对象也拥有属性一样。当一个函数被执行时，他就拥有了“this”属性--调用this所在函数的对象。this永远指向一个独一无二的对象，这个对象通常包含一个函数/方法，虽然它也可以被用在一个函数之外的全局作用域中（global scope）。注意：在严格模式（strict mode）中，在全局函数或者匿名函数中this的值为“undefined”（也就是说this没有绑定任何对象）。
“this”被用在一个函数内部（假设是function A），那么它包含的值是调用“function A”的对象。我们需要this来访问调用“function A”的对象的属性和方法，特别是当我们不知道到这个对象名叫什么的时候，或者这个对象没有名字的时候。其实，this就是调用当前函数的对象的一个代名词！
我们来举一个简单的例子：
var person = { firstName: "zhou",
lastName: "Quan",
//this将为person对象，因为person对象会调用FullName方法
FullName:function(){ alert(this.firstName + " " + this.lastName); //zhou Quqn
}
}
person.FullName();
$ ("button").click (function (event) { // $(this) 的值将是 ($("button")) 对象 // 因为这个button对象调用了 click () 方法
console.log ($ (this).prop ("name")); });
this中存在的最大的问题
this是没有被指定值的，直到有一个对象调用了this所在的这个函数（我们暂且给它一个称号：this Function）。
也就是说，只有当有一个对象调用了this Function之后，this Fuction中的this才被指定！在大多数情况下，this Function被调用之后，this都会被指定一个值，但是，也有少数的情况下this是没有值的，这个问题我们将在后面进一步探讨。
全局作用域（global scope）中的this
当一段代码在浏览器中执行时，所有的全局变量和函数都是在“window”对象上定义的。因此，当”this”被用在全局函数中是，他指定的值是”window”对象。我们来看下面一段代码：
var firstName = "Peter",
lastName = "Ally";
function showFullName () { // "this" inside this function will have the value of the window object
// because the showFullName () function is defined in the global scope, just like the firstName and lastName
console.log (this.firstName + " " + this.lastName);
}
var person = { firstName :"Penelope",
lastName :"Barrymore",
showFullName:function () { // "this" on the line below refers to the person object, because the showFullName function will be invoked by person object.
console.log (this.firstName + " " + this.lastName);
}
}
showFullName (); // Peter Ally
// window is the object that all global variables and functions are defined on, hence:
window.showFullName (); // Peter Ally
// "this" inside the showFullName () method that is defined inside the person object still refers to the person object, hence:
person.showFullName (); // Penelope Barrymore
解决回调函数中的this问题
当包含this的回调函数作为参数传递时我们会遇到这样这个问题：
// We have a simple object with a clickHandler method that we want to use when a button on the page is clicked
var user = { name:"zhouquan",
age:21,
clickHandler:function (event) { console.log (this.name + " " + this.age);
}
}
// The button is wrapped inside a jQuery $ wrapper, so it is now a jQuery object
// And the output will be undefined because there is no data property on the button object
$("button").click (user.clickHandler); //undefined 在上面的代码中，我们知道$(“button”)是一个对象，”user.clickHandler”作为click()方法的回调函数。user.clickHandler方法中的this不再是指向user对象，它现在指向的是调用点击事件的这个button对象。即使我们是使用“user.clickHandler”来调用clickHandler方法，但是clickHandler()方法是在button对象作为上下文(Context)的环境中运行的，所以，this指向的是button对象。
从这一点上我们可以看出，当上下文（Context）改变--当我们在其他的对象上执行一个方法。“this”所指向的不在是以前的那个对象，而是现在调用这个方法的新的对象。
为了解决这个问题，我们可以使用的方法来指定“this”所指向的对象。所以上面代码的最后一行只需改为：
$("button").click (user.clickHandler.bind (user)); //zhouquan 21 解决闭包(closure)中的this问题
另外一种容易让我们感到困扰的是当我们使用了一个内部函数（闭包）的时候。首先我们应该明确的一点就是：闭包中不能通过“this”关键字来访问外边函数的this变量，因为闭包中的this他指向的window对象。来看一个例子：
var user = { country: "china",
data:[
{name:"ZhouYi", age:21}, {name:"ZhouEr", age:22} ],
clickHandler:function(){ //在这个作用域中使用this是OK的，他指向的是user对象
this.data.forEach(function(person){ //但是这个内部函数的this不再指向user对象
console.log("What is This referring to? " + this); //Object Window console.log(person.name + " is come from " + this.country);
//ZhouYi is come from undefined
//ZhouEr is come from undefined
})
}
};
user.clickHandler();
clickHandler:function(){ //在这个作用域中使用this是OK的，他指向的是user对象
//我们定义一个theUserObj来保存this的值
var theUserObj = this;
this.data.forEach(function(person){ //现在我们再用theUserObj来访问user对象的属性就没问题了
console.log(person.name + " is come from " + theUserObj.country);
//ZhouYi is come from china
//ZhouEr is come from china
})
}
解决方法作为变量进行传递时的this问题
当我们把一个对象里面的函数作为参数传递给另外一个对象时，this所指定的对象往往会超出我们的想象，来看个例子吧：
var data = [
{name: "ZhouYi", age:21}, {name: "ZhouEr", age:22} ];
var user = { //这里的data属性是属于user对象的
data :[
{name:"ZhouYi", age: 31}, {name:"ZhouEr", age: 32} ],
showData:function(){ console.log(this.data[0].name + " " + this.data[0].age) ;
}
}
//把user.showData赋值给一个变量
var showUserData = user.showData;
//当我们执行这个showUserData函数时，输出的数据来自全局的data(最外层定义的)，而不是来自与user对象中的data.
showUserData(); //ZhouYi 21 解决这个问题的方式跟前面提到的解决回调函数中的this问题类似，我们还是采用的方法来绑定指定的上下文，也就是this该指向哪个对象。
var showUserDate = user.showData.bind(user);
解决方法借用中的this问题
何谓方法调用？打个简单的比方，有两个对象A和B，A、B有相同的属性，但是B比A还多了一个方法，这个方法是对B中的数据进行处理，现在我们想把B这种方法也给A用用：
var gameController = { scores : [20, 34, 55, 46, 77],
avgScore: null,
players:[
{name:"Tommy", playerID:987, age:23}, {name:"Pau", playerID: 87, age: 33} ]
}
var appController = { scores: [900, 845, 809, 950],
avgScore: null,
avg: function(){ var sumOfSores = this.scores.reduce(function(prev, cur, index, array){ return prev + cur;
});
this.avgScore = sumOfSores /this.scores.length;
}
}
//由于avg()是被appController调用的，所以avg中的this指向的是appController对象。
gameController.avgScore = appController.avg();
console.log(gameController.avgScore); //undefined
如何解决这个问题呢？ 为了让appController.avg()指向gameController对象，我们可以使用apply()方法：
// Note that we are using the apply () method, so the 2nd argument has to be an array—the arguments to pass to the appController.avg () method.
appController.avg.apply (gameController, gameController.scores);
// The avgScore property was successfully set on the gameController object, even though we borrowed the avg () method from the appController object
console.log (gameController.avgScore); // 46.4
// appController.avgScore is still null; it was not updated, only gameController.avgScore was updated
console.log (appController.avgScore); // null
注意我们这里使用了两个参数，第一个参数表示this的上下文，也就是this所指向的对象；第二个参数表示要进行运算的数据。当然啦，我们还可以通过这种方式达到同样的效果：
gameController.avg = appController.avg;
gameController.avg();
小结
希望我写的这些东西可以给你带来一些帮助，如果你觉得哪个地方存在不足，请你在评论处提出来，我将及时完善，免得误导后面的同学；如果你觉得这篇文章讲得还可以，请帮我推荐给更多的有需要的同学阅读，谢谢！
参考资料：