this的几种用法

其实一直都有用到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

作者：Katherine的小世界
链接：https://www.jianshu.com/p/adaf787a0d4d
著作权归原作者所有。商业转载请联系原作者获得授权，非商业转载请注明出处。