深入淺出了解 JavaScript 中的 this

this是Javascript語言的一個關鍵字;它代表函數運作時自動生成的一個内部對象,隻能在函數内部使用

首先必須要說的是,this的指向不是在函數定義時确定的,隻有函數執行的時候才能确定,實際上this最終指向那個調用它的對象(網上大部分的文章都是這樣說的,而且在很多情況下這樣了解不會出問題,但實際上這樣了解是不準确的)

肯定有人會問:既然this這麼難以了解,那麼為個甚還要用它呢?

這段代碼我們定義了兩個函數:identify和sayHello,并且在不同的對象環境下執行它們達到了複用的效果,而不用針對不同的對象環境寫對應的函數了;簡言之,this給函數帶來了複用;也肯定會有人說,我不用this一樣可以實作

顯然這個解決方法也達到了類似的效果,但随着代碼的增加/函數嵌套/各級調用等變得越來越複雜,傳遞一個對象的引用将變得越來越不明智,它會把你的代碼弄得非常亂,甚至你自己都無法了解清楚;而this機制提供了一個更加優雅而靈便的方案,傳遞一個隐式的對象引用讓代碼變得更加簡潔和複用

這是函數的最通常用法,屬于全局性調用,是以this就代表全局對象Global

按照我們上面說的this最終指向的是調用它的對象,這裡的函數a實際是被Window對象點出來的,下面的代碼就可以證明

結果證明:這兩段代碼是一緻的,其實alert也是window的一個屬性,也是window點出來的

函數還可以作為某個對象的方法調用,這時this就指這個上級對象

這裡的this指向的是對象o,因為你調用這個fn是通過o.fn()執行的;再次強調:this的指向在函數建立的時候是決定不了的,在調用的時候才能決定,誰調用的就指向誰

其實上面的例子說的并不夠準确,下面這個例子就可以推翻上面的理論

這段代碼和上面的那段幾乎是一樣的,但這裡的this為什麼不指向window;如果按照上面的理論:this指向的是調用它的對象;window是js的全局對象,我們建立的變量實際上是給window添加屬性,是以可以用window.o對象

這裡先不解釋上面的代碼this為什麼沒有指向window,我們再來看一段代碼

這裡也是對象o點出來的,但是同樣this并沒有執行它,那你肯定會說我一開始說的不就都是錯誤的嗎?其實隻是一開始說的不準确,接下來補充一句話,相信你就可以徹底的了解this的指向的問題

情況1:如果一個函數中有this,但是它沒有被上一級的對象所調用,那麼this指向的就是window,這裡需要說明的是:在js的嚴格版中this指向的不是window,但是我們這裡不探讨嚴格版的問題,想了解可以自行上網查找

情況2:如果一個函數中有this,這個函數有被上一級的對象所調用,那麼this指向的就是上一級的對象

情況3:如果一個函數中有this,這個函數中包含多個對象,盡管這個函數是被最外層的對象所調用,this指向的也隻是它上一級的對象,如果不相信,那麼接下來我們繼續看幾個例子

盡管對象b中沒有屬性a,這個this指向的也是對象b,因為this隻會指向它的上一級對象,不管這個對象中有沒有this要的東西

還有一種比較特殊的情況:

這裡this指向的是window,是不是有些蒙了?其實是因為你沒有了解一句話,這句話同樣至關重要

this永遠指向的是最後調用它的對象,也就是看它執行的時候是誰調用的,上例中雖然函數fn是被對象b所引用,但在将fn指派給變量j的時候并沒有執行是以最終指向的是window

再換種形式：

對于内部函數,即聲明在另外一個函數體内的函數,這種綁定到全局對象的方式會産生另外一個問題

在這個例子中列印this,會發現他是綁定到window的,是以改變了x和y的值而不是對象中的point.x和point.y的值;這屬于JavaScript的設計缺陷,正确的設計方式是内部函數的this應該綁定到其外層函數對應的對象上,為了規避這一設計缺陷,聰明的JavaScript程式員想出了變量替代的方法

所謂構造函數,就是通過這個函數生成一個新對象(object),this就指這個新對象

之是以對象a可以點出函數Fn裡的user是因為new關鍵字可以改變this的指向,将這個this指向對象a;為什麼說a是對象,因為new就是建立一個對象執行個體,即這裡用變量a建立了一個Fn執行個體(相當于複制一份Fn到對象a裡面),此時隻是建立并沒有執行,而調用這個函數Fn的是對象a,那麼this指向的自然是對象a

為了表明這時this不是全局對象,我對代碼做一些改變

運作結果為2,表明全局變量x的值根本沒變

除上面這些外,還可以通過JS中call,apply,bind方法自行改變this的指向

下面這段代碼模拟了new操作符(執行個體化對象)的内部過程

首先在person裡建立一個空對象o,将o的proto指向Person.prototype完成對原型的屬性和方法的繼承

Person.call(o,name)即函數Person作為apply/call調用,将Person對象裡的this改為o,即完成了o.name=name操作

傳回對象o

是以person("xl")傳回了一個繼承了Person.prototype對象上的屬性和方法,以及擁有name屬性為"xl"的對象,并将它賦給變量personB,是以<code>console.log(personB.name)</code>會輸出"xl"

再一次重申,在JavaScript中函數也是對象,對象則有方法,apply和call就是函數對象的方法,他們允許切換函數執行的上下文環境(context),即this綁定的對象;很多JavaScript中的技巧以及類庫都用到了該方法;它們的第一個參數為改變後調用這個函數的對象;是以this指的就是這第一個參數

再看一個

再來

什麼意思呢?如果傳回值是一個對象,this指向的就是那個傳回的對象;如果傳回值不是一個對象,那麼this還是指向函數的執行個體

還有一點就是雖然null也是對象,但在這裡this還是指向那個函數的執行個體,因為null比較特殊

.apply()和.call()都立即執行了函數,而.bind()函數傳回了一個新方法,綁定了預先指定好的this,并可以延後調用;.bind()方法的作用是建立一個新的函數,執行時上下文環境為.bind()傳遞的第一個參數,它允許建立預先設定好this的函數

這裡的setTimeout()定時函數,相當于window.setTimeout(),由window這個全局對象調用,是以this的指向為window, this.name則為XL;那麼如何才能輸出"my name is xl"呢?

這裡setTimeout(function(){console.log(this.name)}.bind(this),50);匿名函數使用bind(this)方法後建立了新的函數,這個新的函數不管在什麼地方執行this都指向Person而非window,是以最後的輸出為"my name is xl"而不是"my name is XL"

使用.bind()時應該注意:.bind()建立了一個永恒的上下文鍊并且不可修改;一個綁定函數即使使用.call()或.apply()傳入其他不同的上下文環境也不會更改它之前連接配接的上下文環境,重新綁定也不會起任何作用;隻有在構造器調用時,綁定函數可以改變上下文,然而這并不是推薦的做法

逾時調用的代碼都是在全局作用域中執行的,是以函數中的this的值,在非嚴格模式下是指向window對象,在嚴格模式下是指向undefined;是以setTimeout/setInterval/匿名函數執行的時候this預設指向window對象,除非手動改變this的指向

this.showName方法即構造函數Person()裡面定義的方法;50ms後執行this.showName方法,this.showName裡面的this此時便指向了window對象,則會輸出"XL";修改上面的代碼:

這裡在Person函數當中将this指派給that,即讓that儲存Person對象,是以在setTimeout(this.showName,50)執行過程當中console.log(that.name)即會輸出Person對象的屬性"xl"

下面來看個匿名函數:

更改後:

該函數執行的時候，this綁定到目前作用域的對象上

es6裡面this指向固定化,始終指向外部對象,因為箭頭函數沒有this,是以它自身不能進行new執行個體化,同時也不能使用call/apply/bind等方法來改變this的指向;箭頭函數一次綁定上下文後便不可更改,即使使用了上下文更改的方法:

在構造函數内部的setInterval()内的回調函數,this始終指向執行個體化的對象并擷取執行個體化對象的seconds的屬性,每1s這個屬性的值都會增加1否則最後在3s後執行setTimeOut()函數執行後輸出的是0

1.在嚴格版中的預設的this不是window而是undefined

2.new操作符會改變函數this的指向問題,雖然我們上面了解過了,但是并沒有深入的讨論這個問題,網上也很少說,是以在這裡有必要說一下

什麼this會指向a?首先new關鍵字會建立一個空的對象,然後會自動調用一個函數apply方法(new一個空對象的時候js内部并不一定是用apply方法來改變this指向的,這裡我隻是打個比方而已)将this指向這個空對象,這樣的話函數内部的this就會被這個空的對象替代

感悟：謙虛，謹慎是每個人都應該具備的