如有錯誤煩請指正
js代碼的運行環境
- 瀏覽器 內核（引擎）
- node
- webview（hybrid，嵌入到手機app里面，在app里面運行）
- ...
下面通過幾個例子理解不同資料型別的堆疊記憶體處理
js如何運行（示例1）
var a = 12;
var b = a;
b = 13;
console.log(a);
瀏覽器能夠運行js代碼，是因為瀏覽器會在計算機記憶體中分配出一塊記憶體，用來供代碼執行，這塊記憶體叫堆疊記憶體，也叫Stack，或者ECStack（Execution Context Stack）執行環境堆疊，
為了區分是哪個區域（全域或者函式等）下的代碼執行，會產生一個執行背景關系（EC ： Execution Context），所謂執行背景關系，其實是一個抽象的概念，簡單來理解就是代碼執行區域的劃分，
在全域環境下會產生 EC（G） ：Execution Context （golbal） 全域執行背景關系，其中VO（G）全域變數物件（Varibale Object）存盤全域執行背景關系宣告的變數，然后進入堆疊記憶體執行，
宣告變數的步驟
接著開始執行，先宣告變數，宣告變數有三步
var [變數] = [值]
- 先創建值（執行等號右邊）
- 基本資料型別是直接存盤在堆疊記憶體當中
- 參考型別的值，都是開辟一個單獨的記憶體空間（堆記憶體Heap）存盤資訊
- 宣告變數 declare
- 存放到當前背景關系的變數物件中（VO/AO）
- 定義（賦值）變數：讓變數和值關聯到一起，也就是所謂的賦值操作，也叫定義（defined）或指標指向
- 所以
var n; //默認值是undefined 未定義
- 所以
所以var a = 12步驟是
- 在記憶體中開辟空間，存盤
12值 - 宣告變數
a - 將
12賦值給a
而var b = a處理是
因為右側的a不是值，所以不需要第一步，不需要在堆疊里面開辟空間，直接進行第二步宣告，然后執行第三步，關聯到12值（指標）
b=13的處理步驟是
- 在記憶體中開辟空間，存盤
13值 - 因為
b已經在當前背景關系的變數物件中，所以不需要第二步宣告 - 將
13賦值給b
結果：
總體執行邏輯：
js如何運行（示例2）
var a = {n: 12};
var b = a;
b['n'] = 13;
console.log(a.n);
當第一步創建的值是一個參考型別的值時候，值就沒法直接存到堆疊里（沒有這么大的空間），當創建參考型別值的時候，會進行以下處理
- 在計算機記憶體中分配一個單獨的記憶體出來（堆記憶體 Heap）
- 這塊堆記憶體有一個16進制的地址用來尋找
- 把物件中的鍵值對分別存盤到堆記憶體當中
- 把堆記憶體地址放置到堆疊中，供變數呼叫
這就是第一步，創建值的程序
第二步宣告，第三部賦值，將16進制的地址賦值給變數
var b = a;時，因為a為 變數，所以不需要創建值，接著宣告b，最后賦值，將堆疊中a指向的地址也同樣賦值給b，讓b也指向那個16進制地址
b['n'] = 13運行原理：
b['n'] = 13屬于物件的成員訪問
b首先基于地址0x000000找到堆記憶體- 把堆記憶體中成員為
n的值改為13 console.log(a.n)也屬于成員訪問 所以輸出13
順序如下
總結：基本資料型別和參考資料型別的區別？
基本型別的值直接存盤在堆疊記憶體當中，直接按照值操作，參考資料型別值是開辟單獨的堆記憶體存盤資訊的，將堆記憶體的地址存在堆疊當中，操作的都是參考地址
js如何運行（示例3）
var a = {n: 12};
var b = a;
b = {n: 13};
console.log(a.n);
當到b = {n: 13};時
新開辟一個堆記憶體{n: 13}，將地址指向b
GO global object 全域物件
不同于VO，VO（G）是全域變數物件，存盤當前背景關系宣告的變數的
GO global object 全域物件，是加載頁面默認形成的，在瀏覽器中，加載頁面時，在全域背景關系中會默認定義一個叫window的物件，其中有setTimeout,setInterval等供js呼叫的屬性和方法
注意區分VO和GO
JavaScript 中有一個特殊的物件，稱為全域物件（Global Object），它及其所有屬性都可以在程式的任何地方訪問，即全域變數
在瀏覽器 JavaScript 中，通常window是全域物件， 而 Node，js 中的全域物件是global，所有全域變數（除了global本身以外）都是global物件的屬性，
在 Node，js 我們可以直接訪問到global的屬性，而不需要在應用中包含它，
global，process，__filename，__dirname
js如何運行（示例4）
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b);
var a = {n: 1};
var b = a;
前兩行代碼執行如下，不在闡述：
要想理解a.x = a = {n: 2};
簡單說一下運算子優先級
var a=12,b=13;
相當于
var a=12
var b=13
var a=b=13
相當于
b=13
var a=b//或者var a=13
正常計算都是從右到左處理的（當然第一步還是創建值）
但是不管是a.x=b=13還是b=a.x=13
都要先計算a.x因為優先級比較高（成員訪問的優先級為19，僅次于()運算，運算子優先級 ）
a.x = a = {n: 2};運算步驟如下
- 開辟記憶體，假設地址為0x000001
- 將地址放入堆疊中
a.x = 地址
a = 地址
所以現在a指向0x000001，b指向0x000000，即
a為{n：2}，b為{n:1,x:{n:2}}
結果：
一個變數只可以關聯一個堆疊中的值，但是一個堆疊中的值，可以被多個變數關聯
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/161780.html
標籤：JavaScript
上一篇：資料型別與typeof