半熟前端

軟體工程師 / 台灣人 / 在前端的路上一邊探索其他領域的可能性

程式語言

為什麼心智模型對於程式語言學習至關重要?

為什麼心智模型對於程式語言學習至關重要?

前言

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

什麼是心智模型(mental model)

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

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

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

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

IMG_1170

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

IMG_1171

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

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

心智模型的重要性

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

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

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

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

1

2. 在 a+=1 執行之後

2

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

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

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

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

哪裡出問題了?

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

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

correct

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

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

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