原创 深入理解javascript對象系利第二篇——屬性操作

前面的話 對於對象來說,屬性操作是繞不開的話題,類似於“增刪改查”的基本操作,屬性操作分爲屬性查詢、屬性設置、屬性刪除,還有屬性繼承。 一、屬性查詢 屬性查詢一般有兩種方法,包括點運算符和方括號運算符。 var o = { p

原创 深入理解javascript作用域系列第二篇——詞法作用域和動態作用域

前面的話 大多數時候,我們對作用域產生混亂的主要原因是分不清應該按照函數位置的嵌套順序,還是按照函數的調用順序來進行變量查找,在加上this機制的干擾,使得變量查找極易出錯。這實際上是由兩種作用域工作模型導致的,作用域分詞法作用域

原创 深入理解javascript對象系列第三篇——神祕的屬性描述符

前面的話 對於操作系統中的文件,我們可以輕易的將其設置爲只讀、隱藏、系統文件、普通文件。對於對象來說,屬性描述符提供了類似的功能,用來描述對象中屬性的值,是否可以配置,是否可以修改以及是否可枚舉。 一、屬性描述符類型: 對象的屬性

原创 深入理解javascript作用域系列第三篇——聲明提升(hoisting)

前面的話 一般認爲,javascript代碼在執行時時由上到下一行一行執行的。但是實際上這並不完全正確,主要是因爲聲明提升的存在。 一、變量的聲明提升 a = 2; var a; console.log(a); 直覺上,會認爲是u

原创 React組件測試

前言:有了前面Jest和Enzyme基礎知識的儲備,接下來,我們看如何在項目中測試組件。 一.測什麼和如何測? 當我們看到一個組件時,首要考慮測試什麼?然後纔是如何測試。作爲一個通用的測試原則,我是基於這幾個方面進行考慮。 下面所

原创 Jest學習筆記

一.是什麼? Jest是Facebook開源的一個前端測試框架,自動集成了斷言、JSdom、覆蓋率報告等,內部也是使用了jasmine作爲基礎,在其上進行了封裝。主要用於React和React Native的單元測試,已被集成在c

原创 Enzyme學習筆記

一.是什麼? Enzyme是Airbnb開源的React測試工具庫,它通過對官方提供的測試工具ReactTestUtils進行二次封裝,提供了一套簡潔強大的API,類似jQuery的風格,並且內置Cheerio。 二.環境搭建 上

原创 深入理解javascript閉包系列第一篇——到底什麼纔是閉包

前面的話 閉包已經成爲近乎神話的概念,它非常重要又難以掌握,而且還很難定義。本文就從閉包的定義說起。 一、古老定義:閉包(closure),是指函數變量可以保存在函數作用域內,因此看起來是函數將變量“包裹”了起來。 那這樣說來,包

原创 Git文件上傳的一個錯誤分析

需求: 通過git上傳本地文件到github遠程倉庫 源代碼如下 趙亞峯@DESKTOP-0JOAFKG MINGW64 ~/Desktop $ mkdir test 趙亞峯@DESKTOP-0JOAFKG MINGW64 ~/

原创 深入理解javascript作用域系利第一篇——內部原理

前面的話 javascript擁有一套設計良好的規則來存儲變量,並且之後可以很方便找到這些變量,這套規則被稱之爲作用域。作用域貌似簡單,實則複雜,由於作用域與this機制非常容易混淆,使得理解作用域的原理更爲重要。 內部原理分爲:

原创 深入理解javascript閉包系利第三篇——IIFE

前面的話 嚴格來講,IIFE並不是閉包,因爲它不滿足函數成爲閉包的三個條件,但一般地,人們認爲IIFE就是閉包,畢竟閉包有多個定義,本文將詳細介紹IIFE是實現和用途。 一、實現 函數跟隨一對圓括號()表示函數調用。 //函數聲明

原创 深入理解javascript閉包系利第四篇——常見的一個循環和閉包的錯誤詳解

前面的話 關於常見的一個循環和閉包的錯誤,我們從執行環境圖示的方式對此進行詳細的解釋。 一、犯錯 function foo(){ var arr = []; for(var i = 0; i < 2; i++){

原创 深入理解javascript閉包系列第二篇——從執行環境角度看閉包

前面的話 本文從執行環境的角度來分析閉包,通過用圖示的方式對代碼內容進行逐行解釋。 說明:下面按照代碼執行流的順序對圖示進行詳細說明。 function foo(){ var a = 2; function ba

原创 深入理解javascript作用域系列第五篇——一張圖理解執行環境和作用域

前面的話 對於執行環境(execution contexr)和作用域(scope)並不容易區分,甚至很多人認爲它們就是一回事,只是高程和犀牛書關於作用域的兩種不同翻譯而已。但實際上,它們並不相同,卻相互糾纏在一起。 一、概念 作用

原创 深入理解javascript對象系列第四篇——對象拷貝

前面的話 對象拷貝分爲淺拷貝(shallow)和深拷貝(deep)兩種。淺拷貝只複製一層對象的屬性,並不會進行遞歸複製,而javascript存儲對象時都只是存儲對象的地址。 所以淺拷貝會導致對象中的子對象指向同一塊內存地址(修改