前言

• 本文章使用 JavaScript 的原始型別當作範例，運作方式與其他程式語言可能有不同之處。
• 原始型別的運作方式與物件、陣列運作方式不同，這邊只以原始型別當作舉例

什麼是心智模型（mental model）

心智模型是指我們如何預期事物的發展，或是事物會如何運作的認知過程。

聽起來有點學術，舉例來說當我們在畫面上看到一個按鈕的 UI 時，我們會預期這個 UI 是可以點擊的，點擊之後可能會發生一連串的事件。因此當使用者發現這個 UI 不如預期時它會感到困惑。

不過為什麼我們會把這樣的 UI 當作按鈕？一方面是因為我們所處的環境，另一方面則是經驗，使用者從接觸網頁開始就是依照這樣的法則在判斷按鈕，也因此很自然地它會套用在其他網頁上。

像是這個旋鈕，為什麼我們看到它第一個想到的不是按下它而是旋轉？因為在日常生活當中，大部分擁有圓形的機關，通常都是以旋轉當作調整的方式，因此我們就會把這個法則套用到其他地方上。

又或者是門的手把，為什麼我們不會用旋轉的方式來打開它，而是使用壓下手把的方式？也是因為我們對手把的運作有一定的認知，所以會預期壓下後門可以打開。

在學習程式語言的時候，隨著學習的腳步，我們也會對程式語言的運作產生出心智模型，在心中編譯並預期這些程式碼會如何執行。

心智模型的重要性

在這邊以 JavaScript 程式碼做舉例。

let a = 3;
let b = a + 3;
a += 1;
console.log(b); // b

這是一個非常基本的 JavaScript 程式碼，有經驗的人已經知道答案是什麼，以及陷阱在哪裏。假設今天我們以一個錯誤的心智模型來描繪這串程式碼，可能會得到這樣的結果。

1. 在 a+=1 還沒執行前：

2. 在 a+=1 執行之後

很自然地，因為 a+1 了，所以我們將圓圈圈裡的 3 改為 4。

因為 b=a+3，既然 a 改變了，所以 b 所指向的圓圈圈也應該變為 7 才對。因此理解不正確的人來說，他們會很自然地回答：「7」。

我想強調一下，雖然答案是錯的，但我不認為這完全是學習者的錯，就正常的思考模式來說，我把 b = a + 3 當作公式理解，那麼後面 a+=1 了，那麼理所當然 b 也要跟著一起變化。

一旦學習者產生這樣的思考模式，往後的學習要修正就會變得格外困難，也容易遇到自己無法解釋的 bug。

哪裡出問題了？

在 JavaScript 當中無法改變 primitive 的值。這句話看起來很短，但對於初學者來說幾乎沒辦法從本質上去理解它代表的意思是什麼。

正確的運作方式應該是這樣的：

因為任何 primitive type 是沒有辦法改變值的，因此我們並沒有辦法將圓圈圈中的 3 直接改成 4（3 + 1），而是必須重新建立一個 4 的數字，然後將 a 的箭頭指過去。原本的 3 並不會被改變（藍色圈圈），所以不管 a 的值有任何變化，b 的結果都不會受到影響。

比起引用教科書的陳述：「JavaScript 當中的原始值是不可變的」，我其實更傾向於用這種方式回答。因為它能夠幫助理解，也的確是實際 JavaScript 程式碼運作的方式。仔細觀察一下，兩個模型非常接近，但最關鍵的地方在於學習者是否理解了 JavaScript 原始值的特徵與運作原理。

學習者是否能套用到各個例子當中仰賴於心智模型，如果學習者一直使用第一套心智模型，儘管在學習過程當中有看過：「primitive type 是 immutable」這句話，還是很容易得到錯誤的結果。