Web前端技術(shù)由html腾窝、css和 javascript三大部分構(gòu)成，是一個龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門后端語言。而我們在學(xué)習(xí)它的時候往往是先從某一個點切入狠轻，然后不斷地接觸和學(xué)習(xí)新的知識點查吊，因此對于初學(xué)者很難理清楚整個體系的脈絡(luò)結(jié)構(gòu)。本文將對Web前端知識體系進行簡單的梳理评也，對應(yīng)的每個知識點點到為止熙含，不作詳細(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)。

原始類型也稱為基本類型或簡單類型骤星，因為其占據(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主要用于對象的序列化和反序列化模软，還有一個作用就是實現(xiàn)對象的深拷貝伟骨。RegExp 即正則表達式，是處理字符串的利器燃异。

1携狭、函數(shù)原型鏈

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

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

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

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

2舟舒、函數(shù)作用域

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

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

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

3食呻、this 指針

this 指針存在于函數(shù)中流炕，用以標(biāo)識函數(shù)運行時所處的上下文。函數(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ù)運行時的那個對象断箫。而在函數(shù)運行時拂酣，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绪商、閉包

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

6自沧、單線程和異步隊列

Javascript

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

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

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

JS中的 setTimeout 和 setInterval 就是典型的異步操作传透，它們會被放入異步隊列中等待耘沼，即使 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ù)器進行交互的異步通訊技術(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觉渴，因為超時只會中斷數(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)簽，因此可以利用腳本跨域能力來實現(xiàn)跨域請求，即JSONP 的原理逻杖。

JSONP雖然可以解決跨域問題奋岁，但只能是get請求，并且沒有有效的錯誤捕獲機制荸百，為了解決這個問題闻伶，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)注點分離原則在系統(tǒng)設(shè)計層面就顯得越來越重要顶别，而XMLHttpRequest 是

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

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

8册着、模塊化

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

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

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

9伞租、Node.js

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

運行環(huán)境贞谓，它的運行不依賴于瀏覽器作為宿主環(huán)境，而是和服務(wù)端程序一樣可以獨立的運行葵诈，這使得JS編程第一次從客戶端被帶到了服務(wù)端裸弦，Node.js在服務(wù)端的優(yōu)勢是，它采用單線程和異步I/O模型作喘，實現(xiàn)了一個高并發(fā)理疙、高性能的運行時環(huán)境。相比傳統(tǒng)的多線程模型泞坦，Node.js實現(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弱類型的特點盔几，依然可以接受任意類型變量的聲明；const

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

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

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

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

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

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