簡述JS值類型和引用類型

簡述類型

在JavaScript中,我們可以簡單的把變量劃分爲值類型,和數據類型,其中值類型可以用運算符typeof判斷,而引用類型則需要使用instanceof判斷,基本類型值指的是簡單的數據段,而引用類型值指那些可能由多個值構成的對象。

值類型的賦值是簡單的值傳遞,而引用類型則是通過指針,也就是對一個對象的引用。值類型和數據類型,在JavaScript中,存放在棧中,引用類型則存放在內存的堆中。棧中數據的存儲是自頂向下的,堆中的數據是自下向上存儲。
在這裏插入圖片描述

typeof運算符

由於JavaScript是動態弱類型的語言,因此需要一種方法去判斷一個變量的類型,於是typeof就應運而生。對一個變量使用typeof後,返回值就是該變量的類型,共有以下情況。

  1. “undefined” —如果一個對象未定義
  2. “boolean” --如果這個值是布爾值
  3. “string” --如果這個值是字符串
  4. “number” --如果這個值數數字類型
  5. “function” --如果是一個函數
  6. “object” --如果是引用類型
  7. ‘symbol’ --ES6中的symbol類型

Null 類型是第二個只有一個值的數據類型,這個特殊的值是 null。從邏輯角度來看, null 值表示一個空對象指針,而這也正是使用 typeof 操作符檢測 null 值時會返回"object"的原因

instanceof運算符

雖然在檢測基本數據類型時 typeof 是非常得力的助手,但在檢測引用類型的值時,這個操作符的用處不大。 通常, 我們並不是想知道某個值是對象,而是想知道它是什麼類型的對象。爲此ES
提供了 instanceof 操作符,其語法如下所示:

result = variable instanceof constructor

如果variable是constructor類型則返回true,否則就返回false。

引用類型

JavaScript 變量鬆散類型的本質,決定了它只是在特定時間用於保存特定值的一個名字而已,在將一個值賦給變量時,解析器必須確定這個值是基本類型值還是引用類型值。常見的引用類型有一下幾種。

  1. Object --大多數引用類型值都是 Object 類型的實例
  2. Array --數組、常用類型
  3. Date --日期類型
  4. RegExp --正則表達式
  5. function --函數、js一等公民
  6. 基本包裝類型 – Boolean、 Number 和String。
  7. 單體內置對象 – 由ES提供,不依賴宿主對象

關鍵字var

ES6之前,JavaScript中創建一個對象通常使用var來聲明,每個變量僅僅是一個用於保存值的佔位符而已。定義變量時要使用 var 操作符,使用var,讓你可保存任何數據類型的值,使用var帶來方便的同時,也帶來有一些問題,比如說變量泄漏的問題,沒有塊級作用域等麻煩

變量提升

在執行代碼前,瀏覽器做一下這些工作,所以我們在定義一個變量前使用不會報錯,函數也能提前調用,上述過程也叫做創建上下執行上下文,函數每次調用也會產生一個執行上下文環境。

  1. 變量、函數表達式 --------變量聲明、默認賦值爲undefined
  2. this -------賦值
  3. 函數聲明 -----賦值

變量提升帶來的問題

  1. 變量容易在不被察覺的情況下被覆蓋掉
  2. 本應銷燬的變量沒有被銷燬
function foo(){
 for (var i = 0; i < 7; i++) {
 }
 console.log(i); 
 }
 foo()

在 for 循環結束之後,i 就已經被銷燬了,但是在 JavaScript 代碼中,i 的值並未被銷燬,所以最後打印出來的是 7。這同樣也是由變量提升而導致的,在創建執行上下文階段,變量 i 就已經被提升了,所以當 for 循環結束之後,變量 i 並沒有被銷燬。

ES6中的let和const

爲了解決ES5中var變量提升帶來的問題,在ES6中引入了let、const關鍵字,使用letconst後,js有了塊級作用域,同時解決了變量提升的問題,根據js編程規範,儘量使用let、const聲明變量。

function foo(){ 
var a = 1 
let b = 2 
	{ 
		let b = 3 
		var c = 4 
		let d = 5 
		console.log(a) 
		console.log(b) 
	} 
	console.log(b) 
	console.log(c) 
	console.log(d)
} 
foo()

我們簡單分析上面js代碼的執行流程,在這段代碼執行前,JavaScript 引擎會先對其進行編譯並創建執行上下文,然後再按照順序執行代碼

第一步是編譯並創建執行上下文
在這裏插入圖片描述
第二步執行代碼,變量賦值
在這裏插入圖片描述

總結

通過上圖,我們可以得出一下結論

  • var的創建和初始化被提升,賦值不會被提升。
  • let的創建被提升,初始化和賦值不會被提升。
  • function的創建、初始化和賦值均會被提升。

最後

JS值類型和引用類型是JS中很重要的一部分,瞭解這些能夠解決工作的的很多問題,面試被問到這些,自然也能很好回答。文章有寫的不詳細或錯誤的地方,歡迎在評論區指正,作者會第一時間答覆,一起學習,一起進步

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章