資訊專(zhuān)欄INFORMATION COLUMN
摘要：想方設(shè)法糅合過(guò)程式與函數(shù)式兩種風(fēng)格，忽略了閉包的基本假設(shè)，于是造出天坑。分散在各個(gè)閉包中的狀態(tài)會(huì)成為的溫床。當(dāng)然，嚴(yán)格來(lái)說(shuō)箭頭函數(shù)也是一種閉包，因?yàn)樗呛瘮?shù)和詞法的組合。
編程語(yǔ)言的究極問(wèn)題：過(guò)程式還是函數(shù)式？
閉包是函數(shù)式編程最先引進(jìn)的，基本假設(shè)就是所有量都是常量。Javascript想方設(shè)法糅合過(guò)程式與函數(shù)式兩種風(fēng)格，忽略了閉包的基本假設(shè)，于是造出天坑。
是什么閉包的定義是“函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合” MDN，換言之，就是帶著環(huán)境（上下文、狀態(tài)、屬性、局部變量，找一個(gè)你能理解的詞）的函數(shù)。從ES2015起，最簡(jiǎn)單的閉包變成了這樣：
{
let localVar = 1;
whatever.onclick = () => localVar++;
}
whatever.onclick就是一個(gè)閉包，因?yàn)樗鼛е?b>localVar。
從這個(gè)角度上來(lái)說(shuō)，所有Javascript函數(shù)都是閉包，因?yàn)樗麄兌寄茉L問(wèn)到window下面的全局變量，如果傳遞給另一個(gè)框架的話，用的都是自帶的全局變量環(huán)境。
為什么上面的閉包非常糟糕，糟糕就在于它不是純函數(shù)，它是有狀態(tài)的。分散在各個(gè)閉包中的狀態(tài)會(huì)成為bug的溫床。以foo為例，每次調(diào)用都會(huì)有副作用，得到的值都不一樣，狀態(tài)在哪里又找不著（假設(shè)你忘了localVar是啥），給debug造成極大的困難。
現(xiàn)在主流的狀態(tài)管理框架Flux/Redux/Vuex的思想全都是集中狀態(tài)管理。還把狀態(tài)分散到一個(gè)一個(gè)閉包里面，是過(guò)時(shí)的。
那我們把狀態(tài)保存在哪里？this里。
雖然this也是JS的一個(gè)天坑，但是比起閉包來(lái)，簡(jiǎn)直好太多了。this最偉大的功勛就在于函數(shù)和環(huán)境的解耦（跟閉包正好相反）。
let bar = function() { this.a++ }
let state = { a: 1, bar };
這個(gè)時(shí)候有同學(xué)就要問(wèn)了，state.bar()還是有副作用的呀，得到的值還是不一樣，好處在哪？好處在于
bar前面是什么？是一個(gè)對(duì)象state，我們現(xiàn)在能確定bar的副作用在哪里了；
bar本身沒(méi)有副作用，只要我們深拷貝state，我們就能歷史回放state.bar()是怎么出bug的。
以上兩點(diǎn)簡(jiǎn)直是debug的福音。
怎么辦能減少bug，又實(shí)際的寫(xiě)法：
只有對(duì)象保存狀態(tài)，不論是字面量，還是new。函數(shù)可以讀狀態(tài)，寫(xiě)狀態(tài)必須用this.xxx或者用參數(shù)把對(duì)象傳進(jìn)來(lái)。
為什么說(shuō)2018（其實(shí)2015+就行了）年就可以少用閉包了呢？
因?yàn)槲覀冇?b>class關(guān)鍵字了，以前創(chuàng)建用得上this的類(lèi)實(shí)在是太麻煩了；
因?yàn)槲覀冇屑^函數(shù)了，用閉包保存this的做法也不必要了。
當(dāng)然，嚴(yán)格來(lái)說(shuō)箭頭函數(shù)也是一種閉包，因?yàn)樗呛瘮?shù)和詞法this的組合。但是this能保證只讀，函數(shù)并不能用this寫(xiě)狀態(tài)，因此仍然滿足上面說(shuō)的兩個(gè)好處。
所以直接說(shuō)箭頭函數(shù)就是閉包，我天天用，秀面試官一臉就行了，他不懂的話就瀟灑離去，這破地方配不上你 :)
所以，React強(qiáng)推class，Vue用的也是this，都用對(duì)象存狀態(tài)。既然狀態(tài)都被對(duì)象存了，自然也就沒(méi)閉包什么事了。
我的相關(guān)文章Javascript閉包：從理論到實(shí)現(xiàn)，[[Scopes]]的每一根毛都看得清清楚楚
以上所有代碼按Mozilla Public License, v. 2.0授權(quán)。
以上所有文字內(nèi)容按CC BY-NC-ND 4.0授權(quán)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95482.html
摘要：函數(shù)是一等公民。其實(shí)閉包本身也是函數(shù)式編程的一個(gè)應(yīng)用。劣勢(shì)不能算是嚴(yán)格意義上的函數(shù)式語(yǔ)言，很多函數(shù)式編程的特性并沒(méi)有。 隨著大前端時(shí)代的到來(lái)，在產(chǎn)品開(kāi)發(fā)過(guò)程中，前端所占業(yè)務(wù)比重越來(lái)越大、交互越來(lái)越重。傳統(tǒng)的老夫拿起JQuery就是一把梭應(yīng)付當(dāng)下重交互頁(yè)面已經(jīng)十分乏力。于是乎有了Angular，React，Vue這些現(xiàn)代框架。 但隨之而來(lái)的還有大量的新知識(shí)新名詞，如MVC，MVVM，F(xiàn)l...
摘要：函數(shù)是一等公民。其實(shí)閉包本身也是函數(shù)式編程的一個(gè)應(yīng)用。劣勢(shì)不能算是嚴(yán)格意義上的函數(shù)式語(yǔ)言，很多函數(shù)式編程的特性并沒(méi)有。 隨著大前端時(shí)代的到來(lái)，在產(chǎn)品開(kāi)發(fā)過(guò)程中，前端所占業(yè)務(wù)比重越來(lái)越大、交互越來(lái)越重。傳統(tǒng)的老夫拿起JQuery就是一把梭應(yīng)付當(dāng)下重交互頁(yè)面已經(jīng)十分乏力。于是乎有了Angular，React，Vue這些現(xiàn)代框架。 但隨之而來(lái)的還有大量的新知識(shí)新名詞，如MVC，MVVM，F(xiàn)l...
摘要：聲明式編程一種編程范式，與命令式編程相對(duì)立。常見(jiàn)的聲明式編程語(yǔ)言有數(shù)據(jù)庫(kù)查詢語(yǔ)言，正則表達(dá)式邏輯編程函數(shù)式編程組態(tài)管理系統(tǒng)等。函數(shù)式編程，特別是純函數(shù)式編程，嘗試最小化狀態(tài)帶來(lái)的副作用，因此被認(rèn)為是聲明式的。 編程范式與函數(shù)式編程 一、編程范式的分類(lèi) 常見(jiàn)的編程范式有：函數(shù)式編程、程序編程、面向?qū)ο缶幊獭⒅噶钍骄幊痰取Ｔ诿嫦驅(qū)ο缶幊痰氖澜纾绦蚴且幌盗邢嗷プ饔茫ǚ椒ǎ┑膶?duì)象（Class...
摘要：函數(shù)式編程的定義函數(shù)是一段可以通過(guò)其名稱(chēng)被調(diào)用的代碼。純函數(shù)大多數(shù)函數(shù)式編程的好處來(lái)自于編寫(xiě)純函數(shù)，純函數(shù)是對(duì)給定的輸入返回相同的輸出的函數(shù)，并且純函數(shù)不應(yīng)依賴(lài)任何外部變量，也不應(yīng)改變?nèi)魏瓮獠孔兞俊? 一個(gè)持續(xù)更新的github筆記，鏈接地址：Front-End-Basics，可以watch,也可以star。 此篇文章的地址：JavaScript函數(shù)式編程入門(mén)經(jīng)典 正文開(kāi)始 什么是函...
摘要：從某些方面來(lái)講，這章回顧的函數(shù)知識(shí)并不是針對(duì)函數(shù)式編程者，非函數(shù)式編程者同樣需要了解。什么是函數(shù)針對(duì)函數(shù)式編程，很自然而然的我會(huì)想到從函數(shù)開(kāi)始。如果你計(jì)劃使用函數(shù)式編程，你應(yīng)該盡可能多地使用函數(shù)，而不是程序。指的是一個(gè)函數(shù)聲明的形參數(shù)量。 原文地址：Functional-Light-JS 原文作者：Kyle Simpson － 《You-Dont-Know-JS》作者 關(guān)于譯者：...
閱讀 3077·2021-09-22 15:20
閱讀 2600·2019-08-30 15:54
閱讀 1966·2019-08-30 14:06
閱讀 3114·2019-08-30 13:05
閱讀 2457·2019-08-29 18:36
閱讀 568·2019-08-29 15:10
閱讀 523·2019-08-29 11:17
閱讀 818·2019-08-28 18:11
