天天看點

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

0 前言

全是幹貨的技術殿堂

文章收錄在我的 GitHub 倉庫,歡迎Star/fork:

Java-Interview-Tutorial https://github.com/Wasabi1234/Java-Interview-Tutorial

this 是函數運作時,在函數體内部自動生成的一個對象,隻能在函數體内部使用。

教科書般的解釋,字都認識,怎麼連在一起還是不知道啥意思呢?

1 this的值究竟是什麼呢?

函數的不同場合,this有不同值。

總的來說,this就是函數運作時所在的環境對象。

1.1 簡單函數調用

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

  • 看下面案例
一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

1.2 作為對象方法的調用

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

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

記住一條:當function被作為method調用時,this指向調用對象。另外,JavaScript并不是OO的,而是object based的一種語言。

1.3 構造函數

所謂構造函數,就是通過這個函數,可以生成一個新對象。這時,this就指這個新對象。

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?
一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

上面兩套代碼等效

可以寫class test,但本質上new test()的時候,還是test構造函數,差不多,class主要是向java之類的語言抄的,可以直接當java的類用,但本質上test還是個構造函數,因為js一開始就沒有class

隻能用構造函數,函數test運作時,内部會自動有一個this對象可以使用。

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

運作結果為1。為了表明這時this不是全局對象,我們對代碼做一些改變:

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

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

1.4 apply 調用

apply()是函數的一個方法,作用是改變函數的調用對象。它的第一個參數就表示改變後的調用這個函數的對象。是以,這時this指的就是這第一個參數。

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

apply()的參數為空時,預設調用全局對象。是以,這時的運作結果為0,證明this指的是全局對象。

如果把最後一行代碼修改為

一文看懂Javascript的this關鍵字(上)0 前言1 this的值究竟是什麼呢?

運作結果就變成了1,證明了這時this代表的是對象obj。