Web前端JAVASCRIPT知識體系

Javascript基礎語法包括：變量定義、數據類型、循環(huán)、選擇、內置對象等。

數據類型有string，number，boolean，null，undefined，object等。其中，string，number和boolean是基礎類型，null和undefined是JS中的兩個特殊類型，object是引用類型。

Javascript可以通過typeof來判斷基礎數據類型，但不能夠準確判斷引用類型， 因此需要用到另外一個方法，那就是Object的toString，關于數據類型及其判斷可以參考以下博客：數據類型詳解 和 判斷JS數據類型的四種方法

JS常用的內置對象有Date、Array、RegExp等。 一般來講，Date和Array用的最頻繁，正則表達式RegExp是處理字符串的利器。

1、函數原型鏈

Javascript雖然沒有繼承概念，但Javascript在函數Function對象中建立了原型對象prototype，并以Function對象為主線，從上至下，在內部構建了一條原型鏈。

簡單來說就是建立了變量查找機制，當訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。因此我們經常會利用函數的原型機制來實現(xiàn)JS繼承。

2、函數作用域

函數作用域就是變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。在JS中沒有會塊級作用域，只有函數作用域，因此JS中還存在著另外一種怪異現(xiàn)象，那就是變量提升。

3、函數指針 this

this 存在于函數中，它指向的是該函數在運行時被調用的那個對象。在實際項目中，遇到this的坑比較多，因此需要對this作深入的理解。

Function對象還提供了call、apply和bind等方法來改變函數的this指向，其中call和apply主動執(zhí)行函數，bind一般在事件回調中使用，而call和apply的區(qū)別只是參數的傳遞方式不同。

4、構造函數 new

JS中的函數即可以是構造函數又可以當作普通函數來調用，當使用new來創(chuàng)建對象時，對應的函數就是構造函數，通過對象來調用時就是普通函數。

普通函數的創(chuàng)建有：顯式聲明、匿名定義、new Function() 等三種方式。

當通過new來創(chuàng)建一個新對象時，JS底層將新對象的原型鏈指向了構造函數的原型對象，于是就在新對象和函數對象之間建立了一條原型鏈，通過新對象可以訪問到函數對象原型prototype中的方法和屬性。

5、閉包

閉包其實是一個主動執(zhí)行的代碼塊，這個代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量，可以形成一個獨立的執(zhí)行過程，因此我們經常用閉包來定義組件。

6、單線程和異步隊列

setTimeout和setInterval是JS內置的兩個定時器，使用很簡單，但這兩個方法背后的原理卻不簡單。

我們知道，JS是單線程語言，在瀏覽器中，當JS代碼被加載時，瀏覽器會為其分配一個主線程來執(zhí)行任務(函數)，主線程會形成一個全局執(zhí)行環(huán)境，執(zhí)行環(huán)境采用棧的方式將待執(zhí)行任務按順序依次來執(zhí)行。

但在瀏覽器中有一些任務是非常耗時的，比如http請求、定時器、事件回調等，為了**其他任務的執(zhí)行效率不被影響，JS在執(zhí)行環(huán)境中維護了一個異步隊列(也叫工作線程)，并將這些任務放入隊列中進行等待，這些任務的執(zhí)行時機并不確定，只有當主線程的任務執(zhí)行完成以后，才會去檢查異步隊列中的任務是否需要開始執(zhí)行。

這就是為什么setTimeout(fn，0) 始終要等到最 后執(zhí)行的原因。

7、異步通訊 Ajax技術

Ajax是瀏覽器專門用來和服務器進行交互的異步通訊技術，其核心對象是XMLHttpRequest，通過該對象可以創(chuàng)建一個Ajax請求。為了防止XSS攻擊，瀏覽器對Ajax做了限制，不允許Ajax跨域請求服務器，就是只能訪問當前域名下的url。

當然，如果確信你的站點不存在跨域的風險，可以在服務端主動開啟跨域請求，也可以通過CORS或JSONP來實現(xiàn)。

JSONP是利用腳本(script)跨域能力來模擬Ajax請求。

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

8、DOM對象 document

document對象里保存著整個web頁面dom結構，在頁面上所有的元素最終都會映射為一個dom對象。document也提供了很多api來查找特定的dom對象，比如getElementById，querySelector等等。

9、事件系統(tǒng) Event

事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 鼠標事件(mouse) 發(fā)展到移動端的 觸摸事件(touch) 和 手勢事件(guesture)

由于DOM結構可能會多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用。利用事件冒泡機制可以實現(xiàn)很多功能，比如頁面點擊統(tǒng)計。

除此之外，在頁面初始化、滾動、隱藏、返回等操作時分別內置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過addEventLisener/attachEvent來進行綁定。

10、全局對象 window

在JS中，當一段JS代碼在瀏覽器中被加載執(zhí)行，JS引擎會在內容中構建一個全局執(zhí)行環(huán)境，執(zhí)行環(huán)境的作用是**所有的函數能按照正確的順序被執(zhí)行，而window對象則是這個執(zhí)行環(huán)境中的一個全局對象，window對象中內置了很多操作api和對象，document對象就是其中一個。