Web前端技術(shù)由html、css和 javascript三大部分構(gòu)成，是一個龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門后端語言。而我們在學(xué)習(xí)它的時候往往是先從某一個點(diǎn)切入，然后不斷地接觸和學(xué)習(xí)新的知識點(diǎn)，因此對于初學(xué)者很難理清楚整個體系的脈絡(luò)結(jié)構(gòu)。本文將對Web前端知識體系進(jìn)行簡單的梳理，對應(yīng)的每個知識點(diǎn)點(diǎn)到為止，不作詳細(xì)介紹。目的是幫助大家審查自己的知識結(jié)構(gòu)是否完善，如有遺漏或不正確的地方，希望共勉。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? JAVASCRIPT 篇

0、基礎(chǔ)語法

Javascript 基礎(chǔ)語法包括：變量聲明、數(shù)據(jù)類型、函數(shù)、控制語句、內(nèi)置對象等。

在ES5 中，變量聲明有兩種方式，分別是?var 和 function ，var

用于聲明普通的變量，接收任意類型，function用于聲明函數(shù)。另外，ES6 新增了 let、const、import 和 class

等四個命令，分別用以聲明 普通變量、靜態(tài)變量、模塊 和 類 。

JS數(shù)據(jù)類型共有六種，分別是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了

Symbol 類型。其中，Object 是引用類型，其他的都是原始類型(Primitive Type)。

原始類型也稱為基本類型或簡單類型，因?yàn)槠湔紦?jù)空間固定，是簡單的數(shù)據(jù)段，為了便于提升變量查詢速度，將其存儲在棧(stack)中(按值訪問)。為了便于操作這類數(shù)據(jù)，ECMAScript

提供了 3 個?基本包裝類型?：Boolean、Number 和 String

。基本包裝類型是一種特殊的引用類型，每當(dāng)讀取一個基本類型值的時候，JS內(nèi)部就會創(chuàng)建一個對應(yīng)的包裝對象，從而可以調(diào)用一些方法來操作這些數(shù)據(jù)。

引用類型由于其值的大小會改變，所以不能將其存放在棧中，否則會降低變量查詢速度，因此其存儲在堆(heap)中，存儲在變量處的值是一個指針，指向存儲對象的內(nèi)存處(按址訪問)，對于引用類型的值，可以為其添加屬性和方法，也可以改變和刪除其屬性和方法；但基本類型不可以添加屬性和方法。

Javascript 可以通過 typeof 來判斷原始數(shù)據(jù)類型，但不能判斷引用類型，要知道引用類型的具體類型，需要通過 Object 原型上的

toString 方法來判斷。

JS中的函數(shù)存在著三種角色：普通函數(shù)、構(gòu)造函數(shù)、對象方法。同一個函數(shù)，調(diào)用方式不同，函數(shù)的作用不一樣，所扮演的角色也不一樣。直接調(diào)用時就是普通函數(shù)，通過new創(chuàng)建對象時就是構(gòu)造函數(shù)，通過對象調(diào)用時就是方法。

JS常用的內(nèi)置對象有window、Date、Array、JSON、RegExp

等，window是瀏覽器在執(zhí)行腳本時創(chuàng)建的一個全局對象，主要描述瀏覽器窗口相關(guān)的屬性和狀態(tài)，這個后面會講到，Date 和 Array

使用場景最多，JSON主要用于對象的序列化和反序列化，還有一個作用就是實(shí)現(xiàn)對象的深拷貝。RegExp 即正則表達(dá)式，是處理字符串的利器。

1、函數(shù)原型鏈

JS是一種基于對象的語言，但在ES6 之前是不支持繼承的，為了具備繼承的能力，Javascript 在函數(shù)對象

上建立了原型對象prototype，并以函數(shù)對象為主線，從上至下，在JS內(nèi)部構(gòu)建了一條原型鏈。原型鏈把一個個獨(dú)立的對象聯(lián)系在一起，Object

則是所有對象的祖宗，?任何對象所建立的原型鏈最終都指向了Object，并以 Object 終結(jié)。 ****

簡單來說就是建立了變量查找機(jī)制，當(dāng)訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。因此，我們可以通過原型鏈來實(shí)現(xiàn)JS繼承。

2、函數(shù)作用域

函數(shù)作用域就是變量在聲明它們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。因此，JS中沒有塊級作用域，只有函數(shù)作用域

，這種設(shè)計(jì)導(dǎo)致JS中出現(xiàn)了變量提升的問題。簡單來說就是，將變量聲明提升到它所在作用域的最開始的部分，為了解決變量提升帶來的副作用，ES6新增了

let 命令來聲明變量，let 所聲明的變量只在 let 命令所在的代碼塊內(nèi)有效，所以不存在變量提升問題。

3、this 指針

this 指針存在于函數(shù)中，用以標(biāo)識函數(shù)運(yùn)行時所處的上下文。函數(shù)的類型不同，this指向規(guī)則也不一樣：對于普通函數(shù)，this

始終指向全局對象window；對于構(gòu)造函數(shù)，this則指向新創(chuàng)建的對象；對于方法，this指向調(diào)用該方法的對象。另外，F(xiàn)unction對象也提供了call、apply

和 bind 等方法來改變函數(shù)的 this 指向，其中，call 和 apply 主動執(zhí)行函數(shù)，bind一般在事件回調(diào)中使用，而 call 和 apply

的區(qū)別只是參數(shù)的傳遞方式不同。

如果往深的去理解，無論什么函數(shù)，this是否被改變， 本質(zhì)上，this 均指向觸發(fā)函數(shù)運(yùn)行時的那個對象。而在函數(shù)運(yùn)行時，this 的值是不能被改變的。

4、new 操作符

函數(shù)的創(chuàng)建有三種方式，即 顯式聲明、匿名定義 和 new Function()

。前面提到，JS中的函數(shù)即可以是函數(shù)，也可以是方法，還可以是構(gòu)造函數(shù)。當(dāng)使用new來創(chuàng)建對象時，該函數(shù)就是構(gòu)造函數(shù)，JS將新對象的原型鏈指向了構(gòu)造函數(shù)的原型對象，于是就在新對象和函數(shù)對象之間建立了一條原型鏈，通過新對象可以訪問到函數(shù)對象原型prototype中的方法和屬性。

5、閉包

通俗來講，閉包是一個具有獨(dú)立作用域的靜態(tài)執(zhí)行環(huán)境。和函數(shù)作用域不同的是，閉包的作用域是靜態(tài)的，可以永久保存局部資源，而函數(shù)作用域只存在于運(yùn)行時，函數(shù)執(zhí)行結(jié)束后立即銷毀。因此，閉包可以形成一個獨(dú)立的執(zhí)行過程，關(guān)于閉包更

6、單線程和異步隊(duì)列

Javascript

是單線程語言，在瀏覽器中，當(dāng)JS代碼被加載時，瀏覽器會為其分配一個主線程來執(zhí)行任務(wù)(函數(shù))，主線程會形成一個全局執(zhí)行環(huán)境，執(zhí)行環(huán)境在棧中采用后進(jìn)先出(LIFO)的順序來執(zhí)行代碼塊，以保證所有的函數(shù)能按照正確的順序被執(zhí)行。

但在瀏覽器中，有一些任務(wù)是非常耗時的，比如ajax請求、定時器、事件等，為了保證非耗時任務(wù)不受影響，Javascript

在執(zhí)行環(huán)境中維護(hù)了一個異步隊(duì)列(也叫工作線程)，并將這些耗時任務(wù)放入隊(duì)列中進(jìn)行等待，這些任務(wù)的執(zhí)行時機(jī)并不確定，只有當(dāng)主線程的任務(wù)執(zhí)行完成以后，主線程才會去檢查異步隊(duì)列中的任務(wù)是否需要開始執(zhí)行。

JS中的 setTimeout 和 setInterval 就是典型的異步操作，它們會被放入異步隊(duì)列中等待，即使 setTimeout(0)

也不會被立即執(zhí)行，需要等到當(dāng)前同步任務(wù)結(jié)束后才會被執(zhí)行。

想成為一個優(yōu)秀的前端程序員碼？在這里給那些：對于web前端的學(xué)習(xí)有不懂的，或者不知道學(xué)習(xí)路線，不知道學(xué)習(xí)方法，分享最新web前端資料，送給大家，獲取方式：【加企鵝裙】：九五六七六六六零四

學(xué)習(xí)路線：

7、異步通信 Ajax技術(shù)

Ajax是瀏覽器專門用來和服務(wù)器進(jìn)行交互的異步通訊技術(shù)，其核心對象是XMLHttpRequest，通過該對象可以創(chuàng)建一個Ajax請求。Ajax請求是一個耗時的異步操作，當(dāng)請求發(fā)出以后，Ajax

提供了兩個狀態(tài)位來描述請求在不同階段的狀態(tài)，這兩個狀態(tài)位分別是readyState和status，readyState 通過

5個狀態(tài)碼來描述一個請求的5個階段：

0 - 請求未發(fā)送，初始化階段

1 - 請求發(fā)送中，服務(wù)器還未收到請求

2 - 請求發(fā)送成功，服務(wù)器已收到請求

3 - 服務(wù)器處理完成，開始響應(yīng)請求，傳輸數(shù)據(jù)

4 - 客戶端收到請求，并完成了數(shù)據(jù)下載，生成了響應(yīng)對象

status 用于描述服務(wù)端對請求處理的情況，200 表示正確響應(yīng)了請求，404 表示服務(wù)器找不到資源，500 代表服務(wù)器內(nèi)部異常等等。

Ajax對象還可以設(shè)置一個timeout 值，代表超時時間，切記：timeout 只會影響

readyState，而不會影響status，因?yàn)槌瑫r只會中斷數(shù)據(jù)傳輸，但不會影響服務(wù)器的處理結(jié)果。 如果 timeout 設(shè)置的不合理，就會導(dǎo)致響應(yīng)碼

status 是200，但 response里卻沒有數(shù)據(jù)，這種情況就是服務(wù)器正確響應(yīng)了請求，但數(shù)據(jù)的下載被超時中斷了。

為了防止XSS攻擊，瀏覽器對Ajax請求做了限制，不允許Ajax 跨域請求服務(wù)器，只允許請求和當(dāng)前地址同域的服務(wù)器資源。但不限制腳本和標(biāo)簽發(fā)送跨域請求，比如

script 和 img 標(biāo)簽，因此可以利用腳本跨域能力來實(shí)現(xiàn)跨域請求，即JSONP 的原理。

JSONP雖然可以解決跨域問題，但只能是get請求，并且沒有有效的錯誤捕獲機(jī)制，為了解決這個問題，XMLHttpRequest Level2 提出了

CORS 模型，即跨域資源共享，它不是一個新的API，而是一個標(biāo)準(zhǔn)規(guī)范，當(dāng)瀏覽器發(fā)現(xiàn)該請求需要跨域時，就會自動在頭信息中添加一個 Origin

字段，用以說明本次請求來自哪個源。服務(wù)器根據(jù)這個值，決定是否同意這次請求。?

隨著移動端的快速發(fā)展，Web技術(shù)的應(yīng)用場景正在變得越來越復(fù)雜，關(guān)注點(diǎn)分離原則在系統(tǒng)設(shè)計(jì)層面就顯得越來越重要，而XMLHttpRequest 是

Ajax 最古老的一個接口，因而不太符合現(xiàn)代化的系統(tǒng)設(shè)計(jì)理念。因此，瀏覽器提供了一個新的 Ajax 接口，即Fetch API，F(xiàn)etch

API 是基于Promise 思想設(shè)計(jì)的，更符合關(guān)注點(diǎn)分離原則。

8、模塊化

歷史上，Javascript 規(guī)范一直沒有模塊(module)體系，即無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。在 ES6

之前，為了實(shí)現(xiàn)JS模塊化編程，社區(qū)制定了一些模塊加載方案，最主要有 CMD 和 AMD 兩種，分別以commonjs 和 requirejs為代表。ES6

在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊化編程，其設(shè)計(jì)思想是，盡量靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，即編譯時加載，而CMD和AMD是在運(yùn)行時確定依賴關(guān)系，即運(yùn)行時加載。

9、Node.js

Node.js?是一個基于 Chrome V8 引擎的 JavaScript

運(yùn)行環(huán)境，它的運(yùn)行不依賴于瀏覽器作為宿主環(huán)境，而是和服務(wù)端程序一樣可以獨(dú)立的運(yùn)行，這使得JS編程第一次從客戶端被帶到了服務(wù)端，Node.js在服務(wù)端的優(yōu)勢是，它采用單線程和異步I/O模型，實(shí)現(xiàn)了一個高并發(fā)、高性能的運(yùn)行時環(huán)境。相比傳統(tǒng)的多線程模型，Node.js實(shí)現(xiàn)簡單，并且可以減少資源開銷。

10、ES6

ES6 是?ECMAScript 6.0

的簡寫，即Javascript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了，它的目標(biāo)是讓JS能夠方便的開發(fā)企業(yè)級大型應(yīng)用程序，因此，ES6的一些規(guī)范正在逐漸向Java、C#等后端語言標(biāo)準(zhǔn)靠近。ES6

規(guī)范中，比較重大的變化有以下幾個方面：

新增 let、const 命令 來聲明變量，和var 相比，let

聲明的變量不存在變量提升問題，但沒有改變JS弱類型的特點(diǎn)，依然可以接受任意類型變量的聲明；const

聲明的變量不允許在后續(xù)邏輯中改變，提高了JS語法的嚴(yán)謹(jǐn)性。

新增解構(gòu)賦值、rest語法、箭頭函數(shù)，這些都是為了讓代碼看起來更簡潔，而包裝的語法糖。

新增模塊化，這是JS走向規(guī)范比較重要的一步，讓前端更方便的實(shí)現(xiàn)工程化。

新增類和繼承的概念，配合模塊化，JS也可以實(shí)現(xiàn)高復(fù)用、高擴(kuò)展的系統(tǒng)架構(gòu)。

新增模板字符串功能，高效簡潔，結(jié)束拼接字符串的時代。

新增Promise對象，解決異步回調(diào)多層嵌套的問題。