javascript中this的用法----我的看法

时间 2019-11-25

原文原文链接

this在javascript里面一直是让人比较纠结的一块，特别是混在在复杂对象、继承、函数里面，还有一些call、apply这些变态的函数，更是让人头疼不已。javascript

本文只是我我的对this的一些总结，分享给你们，只求你一看能有收获。具体内容可能有误差，也可能比较肤浅，敬请你们留言交流指正。java

首先，我认为，理解js里面的this，首先是理解this这个东西。相信很不少人和我同样，只知道this这样用，那样用，却忽略了一个最基本的事实：this其实指的就是一个对象。一个对象的代名词，不是指一个字符串，也不是一个函数等等。仅仅是一个对象。数组

基本含义：this 对象返回“当前”对象。在不一样的地方，this 表明不一样的对象。也就是所谓的this所表明的对象要看实际运行时候的上下文环境。app

我今天也正好就单单从“this只是指向对象”这个思路来展开，下面经过几个简单例子来看一下几种状况，而后进行简单的分析：函数

e.g.1

好比：var a=function(){
return this;
}
console.log(a()==window) //true

此时，a是一个全局的函数表达式，外面没有对象，因此其值默认就是最外面的window对象。页面里面全部的对象和内容都是window对象的子孙，因此上面的this指向值实际上是window。

从这个，能够总结：

若是外部没有对象定义，this指向默认的window对象。

e.g.2

再好比，var person={

name:"张三",

sayThis:function(){

return this;

}

console.log(person.sayThis()==window) //false

console.log(person.sayThis()==person) //true

此次把相同的函数声明，放到一个对象里面，从测试结果能够看出，this此时已经不指向外侧的window了，已经指向定义其的外部对象了。这里就是person

从这个，能够总结：

若是外部有对象定义，this指向其外部的对象。

e.g.3

若是将此对象的内部方法赋予外部的其余对象呢，这样，this值指向什么呢

var person={
                   name:"123",
                 returnThis:function(){
                     return this;
                 }
             }
            var man={
                name:"456",
                getNowThis:this,
                sayThis1:person.returnThis(),
                sayThis2:person.returnThis
            }
 
           console.log(man.sayThis1);                        //person   这里在赋予sayThis1的值时候，returnThis方法已经运行，
                                                             //         this值已经肯定, 指向returnThis所在的环境里面的this
          console.log(man.sayThis2());             
                                                             //man      这里在赋予sayThis2的值时候 ，只是把returnThis所表明的
                                                              //         函数赋予给sayThis2，因此最后在运行man.sayThis2()函数的时候，
                                                             //        实际上运行的是return this,故this指向man

 //这里,主要把person对象returnThish和returnThish()分别赋予给man对象

从这个，能够总结：

this值指向的对象确实如你们所说，看实际运行时候的环境变量。this值相应的也会有所改变。（这恐怕是js里面最让人费解又很是强大的功能之一了吧）

e.g.4

数组里面有没有this指向呢？

 var arr=[
                
            function(){     return this;     } ,
             2,
             3,
             4           
       ]
     console.log(arr[1])              //2
     console.log(arr[0]())           // arr       获得的是这个数组，说明this指向的是这个数组本事
     arr[0]()==arr                   // true       证明了this等于这个数组
     arr[0]()[1]                      //2            this能够正常当作数组也使用

由上面的例子能够看出，数组的this值也指向该this，我猜想了一下，得出下面的结论：

数组也有this，由于数组原本就是object对象的一种。听从于this指向对象的结论。（此处我不由想，字符串等也是一种隐式声明的对象，有this值么。感兴趣的能够测试一下）

e.g.5

在构造函数里面也会存在this

 function Person(){
      this.age=25;
      this.title="title";
       this.sayThis=function(){
          return this;
      }
   }
  var person1=new Person();
  Person.age                      // undefined
  person1.age                     //  25
  person1.sayThis() .title        //  "title"
  person1.sayThis()==Person       // fasle
  person1.sayThis()==person1      // true

这里首先发现，函数里面的this并无指向函数自己，也没有指向外面的window对象等。这里我想起来了书上说的这个过程，要理解这个this被赋值的过程，关键是注意那个new操做字符串。

这种Person（）实际上是一种构造函数定义对象的方法。经历了四个步骤

（1）、建立一个新对象

（2）、将构造函数的做用域赋给新对象。（所以this就指向了这个新对象）；
（3）执行构造函数里面的代码（为这个新对象添加属性）
（4）返回新对象。
上面4条过程来源于javascript高级程序设计相关内容。

因此，由此咱们看出，经过构造函数，person1对象被构造出来了，这种构造方法产生的this，其实最终也是指向对象的。不过过程比较隐蔽，经过结果也能够看出，最后this实际上是指向了person1实例对象。

从上面的例子，我简单得出了下面的结论：

构造函数的this指向并非构造函数自己，而是指向相应的实例对象，再次证实了this指向对象

-----------------------------------------------------------------------------------------------------------------------------------------------

总结上面：

一、this指向的必定是一个对象。

二、在外面没有对象时候，this指向默认的window对象

三、外部有对象时候，this指向该对象

四、对象调用其余对象的this，要看具体的this运行环境来决定this指向的是哪一个对象。

五、数组里面的this对象也会指向数组自己，数组也是对象的一种。

六、构造函数里面的this对象，指向是实例对象自己，而不是构造函数。

上面的几个例子仅仅是个人简单测试，但愿经过这个角度对this有个更好的认识和了解。其实应该还有更多更复杂的用法，迫于如今还不是很熟悉，就先不献丑了。待往后补充。。。。

若有错误，但愿多多留言补充~