其实一直都有用到this，但是平时也没有怎么去思考，所以有时候根本就不知道怎么去使用，有时候甚至是直接避开使用this，今天研究了一天，也看了不少的文章，做个简单的总结吧。
其实this，就是一个我们联系上下文的简称，就像在英文环境下我们会说：" mike is a good guy and he is reat" ,he其实就是指代我们上文提到的mike, 所以this的指向是要结合上下文来理解的，不同的执行环境，this的指向也随之不同，那怎么去判断执行环境呢？、
其实可以总结出的一点就是，函数是在哪里被运行的，this就指向该环境；
看看后面的例子就可以慢慢体会；
var person = {
firstName: "Penelope",
lastName: "Barrymore",
fullName: function () {
// 这里就用this指代person
console.log(this.firstName + " " + this.lastName);
// 当然我们也可以这么写：
console.log(person.firstName + " " + person.lastName);
}
}
我把几种常见的情况列出来吧~~
- 1 全局环境中的this。
- 2 在事件绑定中的this。
- 3 作为构造函数的调用
- 4 如何灵活修改this指向
- 使用call bind apply
- 创建中间变量，将this临时存放给中间变量
在非严格模式下，全局中的this是指向window的；
先看下面这段代码：在console中直接测试
var x = "1";
console.log(this.x); //1
console.log(this) //window
再来看一下这个例子：
var firstname= "lili";
function showname(){
console.log(this.firstname)
}
showname() //输出的就是lili，此时是在全局中执行这个函数的，所以this指向的就是window
- 2 在事件绑定中的this。
js中不可避免的就是需要对dom元素进行事件的绑定，那么绑定事件中的this就是指向被绑定对象本身；
先看个例子吧；
//这种方法还是一个道理，this还是指向被绑定的按钮本身
Obtn1.onclick = show;
function show() {
console.log(this); //这里的this就是指向这个Obtn1这个按钮
}
// 在按钮的点击事件发生的时候，就会激发相应的事件发生，所以this还是指向Obtn1
Obtn1.onclick = function () {
console.log(this);
}
//再来看看这种方法：这一次有点不同
//目标绑定的点击事件，函数内部输出的this还是指向Obtn1本身，但是在这里再去调用函数的话，show函数中的this就不再指向Obtn了，而是指向window，因为这时候调用函数就是在全局中调用了。
Obtn1.onclick = function () {
console.log(this) //Obtn1
show() //输出的是window
}
function show() {
console.log(this)
}
- 3 对象定义中的this指向
一般在对象定义中的this是指向对象本身;
先看个栗子。
var person = {
firstName :"Penelope",
lastName :"Barrymore",
// tshowFullname（）是在person内定义的，而且执行的时候也是在person调用下才执行，所以这个时候的this是指向person的
// "this" will have the value of the person object because the
//person object will invoke showFullName ()
showFullName:function () {
console.log (this.firstName + " " + this.lastName);
}
}
person.showFullName (); // Penelope Barrymore
在此处 ，我们已经提到了两种情况，那 我们这个时候不妨再看看一个例子，看看是否已经掌握了。
var firstName = "Peter",
lastName = "Ally";
function showFullName () {
// 这里面的"this"是指向全局的，因为这个函数是在全局中被定义，就像 firstName 和 lastName也是在全局中被定义
console.log (this.firstName + " " + this.lastName);
}
var person = {
firstName :"Penelope",
lastName :"Barrymore",
showFullName:function () {
// "this" 在这里其实是指向对象本身的，因为被调用的时候也是基于该对象的。
console.log (this.firstName + " " + this.lastName);
}
}
//我们来看看下面输出的结果吧
//这种方法就是相当于在全局中调用了该方法，所以指向的是全局。
showFullName (); // Peter Ally
window.showFullName (); // Peter Ally
// "this" 在 the showFullName () 方法里是指向该对象本身的，所以
输出的是以下结果
person.showFullName (); // Penelope Barrymore
- 4 作为构造函数的调用
当一个函数被用来new一个对象的时候，这个函数就被称为构造函数，那么此时构造函数内的this就会指向该实例化的对象本身；
var x = 4; //这是全局的变量
function test(){
this.x = 1;
}
var o = new test();
alert(o.x) //输出1
//我们再来做一点点操作；
o.x = 3;
alert(o.x) //输出的是3，所以构造函数中的this就是指向对象本身
其实this的指向主要还是要根据上下文，也就是我们所说的context。
当然我们也可以通过使用call bind apply方法来修改this的指向，因为this其实就是一个通用的一个缩略词，那么当我们在一个对象中使用或者在一个构造函数中使用了this，此时this都是指向该对象或者通过该构造函数实例化的对象；
那么，我们如何借用它们的方法呢？
其实构造函数的继承也是使用到该方法；就是我们可以用call bind apply来修改this的指向；
我们可以来看看这个例子:
function Fruits() {
this.color="yellow",
this.say=function(){
console.log("My color is " + this.color);
}
}
function apple(){
this.color="red"
}
var banana = new Fruits();
var apple1 = new apple();
banana.say(); //My color is yellow
//这里相当于将banana.say方法的this指向指到了apple实例化的对象本身，所以输出的就是下面的结果。
banana.say.call(apple1) //My color is red
再来思考一下这个问题。前面我们提到，事件绑定的时候，this是指向该绑定对象本身的，那么有时候我们是直接将一个函数直接传给事件绑定对象，但是这时候this可能就会出错了，怎么解决呢？
还是一样，我们来看个例子吧；
var user = {
name:"lulei",
age:10,
say:function () {
console.log("I am " + this.name,"I am " + this.age +" years old")
}
}
var Obtn = document.querySelector(".btn");
Obtn.onclick = user.say; //此时的this指向的就是Obtnl ,其实我们这么去写的话，是会直接输出undefined的；I am I am undefinedyears old
那么，怎么解决呢？
我们可以这样 ：
把下面这个修改一下：
Obtn.onclick = user.say;
这样修改之后，this就会指向该user了；
Obtn.onclick = user.say.call(user); // I am lulei I am 10years old
除了这种方法之后，我们还可以通过创建中间变量的方法来修改this的指向；
这里我借用的是一个外文网站的例子 ：
var user = {
tournament:"The Masters",
data :[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
clickHandler:function (event) {
// 为了得到这个this对象，我们可以先将这个this对象赋值给一个中间变量
// 这里的this还是指向的是user这个对象；
var theUserObj = this;
this.data.forEach (function (person) {
// 在这个匿名函数内，this不再是user，而是指向了一个全局的变量了，也就是window，所以这个时候我们定义的中间变量theUserObj就可以拿来用了
console.log (person.name + " is playing at " + theUserObj.tournament);
})
}
}
user.clickHandler();
// T. Woods is playing at The Masters
// P. Mickelson is playing at The Masters
解决方法就是：
建立一个中间变量：
var theUserObj = this;
还有一种情况，就是我们将方法赋值给一个变量之后，该变量再去执行该方法之后，此时的this指向也发生了变化；
还是先看个例子吧；
// 这个是全局变量
var data = [
{name:"Samantha", age:12},
{name:"Alexis", age:14}
];
var user = {
// 这是user对象上的数据属性
data :[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
showData:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1
// This line is adding a random person from the data array to the text field
console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
// 将 user.showData赋值给一个变量
var showUserData = user.showData;
// 当我们执行showUserData的时候，输出的是全局变量中的data的值，而不是user内的值，也就是this的指向发生了改变，因为这个时候函数的执行已经是在全局中执行的了
showUserData (); // Samantha 12 (from the global data array)
解决方法如下
// 将数据绑定在user上
var showUserData = user.showData.bind (user);
// 现在我们得到的就是user的数据了，因为this已经被绑定在user上了
showUserData (); // P. Mickelson 43
总结：其实this的指向并不是在定义的时候确定的，而是在真正执行的时候决定的；有时候我们会用到匿名函数或者是回调函数，或者是会将该对象或者构造函数的方法借给其他对象使用，this的指向都会发生相对应的变化，但是我们都不用太着急，因为可以使用apply call bind 的方法去修正和更改this的指向；
PS：
这是我参考的学习链接：
1 国外的一篇，讲得很好，大部分从里面学习到：
http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/
2 阮一峰的文章：
http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
3 还有另外一篇国外的文章：
http://bjorn.tipling.com/all-this
