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指向該對象