理解 JavaScript Mutation 突變和 PureFunction 純函數

• 做者：Chidume Nnamdi
• 英文原文：blog.bitsrc.io/understandi…

[譯] 理解 JavaScript Mutation 突變和 PureFunction 純函數

不可變性、純函數、反作用，狀態可變這些單詞咱們幾乎天天都會見到，但咱們幾乎不知道他們是如何工做的，以及他們是什麼，他們爲軟件開發帶來了什麼好處。

在這篇文章中，咱們將深刻研究全部這些，以便真正瞭解它們是什麼以及如何利用它們來提升咱們的Web應用程序的性能。

Javascript：原始數據類型和引用數據類型

咱們將首先了解JS如何維護以及訪問到咱們的數據類型。

在JS中，有原始數據類型和引用數據類型。原始數據類型由值引用，而非原始/引用數據類型指向內存地址。

原始數據類型是：

• Boolean
• Number
• String
• Null
• Undefined
• Symbol

引用數據類型：

• Object
• Arrays

當咱們寫原始數據類型時是這個樣子：

let one = 1

在調用堆棧中，one 變量直接指向值 1：

Call Stack
#000 one -> | 1 |
#001 | |
#002 | |
#003 | |
複製代碼

若是咱們改變這個值：

let one = 1
one = 3
複製代碼

變量 one 的內存地址 #000 本來存儲 1 這個值，會直接變成 3

可是，若是咱們像這樣寫一個引用數據類型：

let arr = {
    one: 1
}
複製代碼

或：

let arr = new Object()
arr.one = 1
複製代碼

JS將在內存的堆中建立對象，並將對象的內存地址存儲在堆上：

Call Stack       Heap
#000 arr -> | #101 | #101 | one: 1 |
#001 | | #102 | |
#002 | | #103 | |
#003 | | #104 | |
複製代碼

看到 arr 不直接存儲對象，而是指向對象的內存位置（＃101）。與直接保存其值的原始數據類型不一樣。

let arr = { one: 1 }
// arr holds the memory location of the object {one: 1}
// `arr` == #101
let one = 1;
// `one` a primitive data type holds the value `1`
// one == 1
複製代碼

若是咱們改變 arr 中的屬性，以下所示：

arr.one = 2

那麼基本上咱們就是在告訴程序更改 arr 對對象屬性值的指向。若是你對 C/C++ 等語言的指針和引用比較熟悉，那麼這些你都會很容易理解。

傳遞引用數據類型時，你只是在傳遞其內存位置的遞值，而不是實際的值。

function chg(arg) {
    //arg points to the memory address of { one: 1 }
    arg.one = 99
    // This modification will affect { one: 1 } because arg points to its memory address, 101
}
let arr = { one: 1 } 
// address of `arr` is `#000`
// `arr` contains `#101`, adrress of object, `{one: 1}` in Heap
log(arr); // { one: 1 }
chg(arr /* #101 */)
// #101 is passed in
log(arr) // { one: 99 }
// The change affected `arr`
複製代碼

譯者注：arr 自己的內存地址是 #000；arr 其中保存了一個地址 #101；這個地址指向對象 {one:1}；在調用 chg 函數的時候，那麼修改 arg 屬性 one 就會修改 arr 對應的 #101 地址指向的對象 {one:1}

由於引用數據類型保存的是內存地址，因此對他的任何修改都會影響到他指向的內存。

若是咱們傳入一個原始數據類型：

function chg(arg) {
    arg++
}
let one = 1; // primitive data types holds the actual value of the variable.
log(one) // 1
chg(one /* 1 */)
// the value of `one` is passed in.
log(one) // one is still `1`. No change because primitives only hold the value
複製代碼

譯者注：不像原始數據類型，他的值是多少就是多少若是修改了這個值，那麼直接修改所在內存對應的這個值

狀態突變和不可變性

在生物學領域，咱們知道 DNA 以及 DNA 突變。DNA 有四個基本元素，分別是 ATGC。這些生成了編碼信息，在人體內產生一種蛋白質。

ATATGCATGCGATA
||||||||||||||   
TACGAGCTAGGCTA
|
|
v
AProteinase
Information to produce a protein (eg, insulin etc)
複製代碼

上述DNA鏈編碼信息以產生可用於骨結構比對的AP蛋白酶蛋白。

若是咱們改變DNA鏈配對，即便是一對：

ATATGCATGCGATA
||||||||||||||   
TACGAGCTAGGCTA
|
v 
GTATGCATGCGATA
||||||||||||||   
TACGAGCTAGGCTA
複製代碼

DNA將產生不一樣的蛋白質，由於產生蛋白質AP蛋白酶的信息已經被篡改。所以產生了另外一種蛋白質，其多是良性的或在某些狀況下是有毒的。

GTATGCATGCGATA
||||||||||||||   
TACGAGCTAGGCTA
|
|
V
Now produces _AProtienase
複製代碼

咱們稱這種變化突變或DNA突變。

突變引發DNA狀態的改變。

而對於 JS 來講，引用數據類型（數組，對象）都被稱爲數據結構。這些數據結構保存信息，以操縱咱們的應用程序。

let state = {
    wardens: 900,
    animals: 800
}
複製代碼

上面名爲 state 的對象保存了 Zoo 應用程序的信息。若是咱們改變了 animals 屬性的值：

let state = {
    wardens: 900,
    animals: 800
 }
state.animals = 90
複製代碼

咱們的 state 對象會保存或編碼一個新的信息：

state = {
    wardens: 900,
    animals: 90    
}
複製代碼

這就叫突變 mutation

咱們的 state 從：

state = {
    wardens: 900,
    animals: 800    
}
複製代碼

變爲：

state = {
    wardens: 900,
    animals: 90    
}
複製代碼

當咱們想要保護咱們的 state 時候，這就須要用到不可變性了 immutability。爲了防止咱們的 state 對象發生變化，咱們必須建立一個 state 對象的新實例。

function bad(state) {
    state.prp = 'yes'
    return state
}
function good(state) {
    let newState = { ...state }
    newState.prp = 'yes'
    return newState
}
複製代碼

不可變性使咱們的應用程序狀態可預測，提升咱們的應用程序的性能速率，並輕鬆跟蹤狀態的變化。

純函數和反作用

純函數是接受輸入並返回值而不修改其範圍以外的任何數據的函數（反作用）。它的輸出或返回值必須取決於輸入/參數，純函數必須返回一個值。

譯者注：純函數必需要知足的條件：不產生反作用、返回值只取決於傳入的參數，純函數必須返回一個值

function impure(arg) {
    finalR.s = 90
    return arg * finalR.s
}
複製代碼

上面的函數不是純函數，由於它修改了其範圍以外的狀態 finalR.s。

function impure(arg) {
    let f = finalR.s * arg
}
複製代碼

上面的函數也不是純函數，由於雖然它沒有修改任何外部狀態，但它沒有返回值。

function impure(arg) {
    return finalR.s * 3
}
複製代碼

上面的函數是不純的，雖然它不影響任何外部狀態，但它的輸出返回 finalR.s * 3 不依賴於輸入 arg。純函數不只必須返回一個值，還必須依賴於輸入。

function pure(arg) {
    return arg * 4
}
複製代碼

上面的函數纔是純函數。它不會對任何外部狀態產生反作用，它會根據輸入返回輸出。

可以帶來的好處

就我的而言，我發現的惟一可以讓人理解的好處是 mutation tracking 變異追蹤。

知道什麼時候渲染你的狀態是很是重要的事情。不少 JS 框架設計了不錯的方法來檢測什麼時候去渲染其狀態。可是最重要的是，要知道在首次渲染完畢後，什麼時候觸發再渲染 re-render。這就被稱爲變異追蹤了。這須要知道何時狀態被改變了或者說變異了。以便去觸發再渲染 re-render。

於咱們已經實現了不變性，咱們確信咱們的應用程序狀態不會在應用程序中的任何位置發生變異，何況純函數徹底準尋其處理邏輯和原則（譯者注：不會產生反作用）。這就很容易看出來究竟是哪裏出現變化了（譯者注：反正不是純函數也不是 immutable 變量）。

let state = {
    add: 0,
}
funtion render() {
    //...
}
function effects(state,action) {
    if(action == 'addTen') {
        return {...state, add: state.add + 10}
    }
    return state;
}
function shouldUpdate(s) {
    if(s === state){
        return false
    }
    return true
}
state = effects(state, 'addTen')
if(shouldUpdate(state)) {
    render();
}
複製代碼

這裏有個小程序。這裏有個 state 對象，對象只有一個屬性 add。render 函數正常渲染程序的屬性。他並不會在程序的任何改變時每次都觸發渲染 state 對象，而是先檢查 state 對象是否改變。

就像這樣，咱們有一個 effects 函數和一個純函數，這兩個函數都用來去修改咱們的 state 對象。你會看到它返回了一個新的 state 對象，當要更改狀態時返回新狀態，並在不須要修改時返回相同的狀態。

所以，咱們有一個shouldUpdate函數，它使用===運算符檢查舊狀態和新狀態是否相同。若是它們不一樣，則調用render函數，以更新新狀態。

結論

咱們研究了 Web 開發中這幾個最多見的術語，並展現了它們的含義以及它們的用途。若是你付諸實踐，這將是很是有益的。

若是有任何對於這篇文章的問題，如我應該增長、修改或刪除，請隨時評論、發送電子郵件或直接 DM 我。乾杯 🙏