前端開發 JavaScript 乾貨知識點彙總

不少初學的朋友常常問我，前端JavaScript都須要學習哪些東西呀？哪些是JavaScript的重點知識啊？

其實作前端開發工程師，全部的知識點都是咱們學習必備的東西，只有紮實的技術基礎纔是高薪的關鍵！

不過JavaScript的知識點比較多，一篇文章的內容沒辦法講完。今天就來點知識點難度乾貨，你們來了解一下JavaScript的幾個基礎難點知識，給你們查漏補缺，不懂的知識能夠去查一下，或者也能夠私聊老師。

理解JavaScript面向對象編程

面向對象的三大特色：繼承、封裝、多態

一、JS中經過prototype實現原型繼承

二、JS對象能夠經過對象冒充，實現多重繼承

三、Object類是全部Js類的基類

四、經過function對對象進行封裝

五、經過使用arguments實現參數重載

六、ES6語法糖能夠直接定義類class,繼承對象extends

8個JavaScript數據類型

1.基本數據類型：

Undefined:表明一切未知的事物，啥都沒有，沒法想象，代碼也就更沒法去處理了。

注意：typeof(Undefined) 返回也是 Undefined。能夠將Undefined賦值給任何變量或屬性，但並不意味了清除了該變量，反而會所以多了一個屬性。

Null:有那麼一個概念，但沒有東西。無中似有，有中還無。雖不可思議，但已經能夠用代碼來處理了。

注意：typeof(Null)返回Object，但Null並不是Object，具備Null值的變量也並不是object。

Boolean:布爾類型，true or false，是就是，非就非，沒有疑義。對就對，錯就錯，絕對明確。既能被代碼處理，也能夠控制代碼的流程。

Number:線性的事物，大小和次序分明，多而不亂。便於代碼進行批量處理，也控制代碼的迭代和循環等。

注意：typeof(NaN)和typeof(Infinity)都返回number 。

NaN參與任何數值計算的結構都是NaN，並且 NaN != NaN 。Infinity / Infinity = NaN 。

String:字符串類型，面向人類的理性事物，而不是機器信號。人機信息溝通，代碼據此理解人的意圖等等，都靠它了。

2.引用數據類型：Object、Array、Function

判斷數據類型的幾種方法

一、typeof

二、prototype

三、instanceof

四、constructor

五、Object.prototype.toString.call(a)

注意 ： typeof null === Object

Object對象

JavaScript中全部的對象都繼承自Object

constructor屬性是保存當前對象的構造函數，前面的例子中，constructor保存的就是Object方法。

hasOwnProperty方法接收一個字符串參數，該參數表示屬性名稱，用來判斷該屬性是否在當前對象實例中，而不是在對象的原型鏈中。

isPrototype方法接收一個對象，用來判斷當前對象是否在傳入的參數對象的原型鏈上

Array數據的一些方法用法

Concat() 鏈接兩個或更多數組

splice(index,len,[item]) 刪除元素，並向數組添加一個新元素。

Slice() 從某個已有的數組返回選定的元素

Join() 把數組的全部元素放入一個字符串，元素經過指定的分隔符進行分割

push() 在數組後添加元素，並返回新的長度

unshift() 在數組最前添加元素

pop() 刪除數組最後一個元素並返回該元素的值

reverse() 顛倒數組中元素的順序

shift() 刪除並返回數組中第一個元素

sort() 對數組元素進行排序

toSource() 返回該對象的源代碼

toString() 把數組轉換爲字符串並返回結果

toLocaleString() 把數組轉換爲本地數組，並返回結果

valueOf() 返回對象的原始值

這些數組對象的操做方法，你們能夠多翻閱開發文檔來熟悉。

Function函數的理解

兩種自定義函數的方法

1.function fnName(){}

2. var fnName=function(){}

函數的返回值：

1.當函數無明確返回值時，函數返回undefined。

2.有返回值返回。

函數的參數列表是可變的，數據類型也是任意數據類型，JS中有一個變量，argument能夠訪問全部傳到函數內部的參數。

Js支持建立動態函數，動態函數必須用Function對象來定義。

JavaScript自己不支持函數的重載。若是兩個方法名字同樣，即便參數個數不同，那麼後面定義的就會覆蓋前面定義，調用方法時永遠是調用後定義的那個。

Ajax請求的原理

經過XMLHttpRequest對象來向服務器發送異步請求，從服務器獲取數據。

而後用JavaScript來操做DOM而更新頁面。

XMLHttpRequest是ajax的核心機制，它是IE5中首先引入的，是一種支持異步請求的技術。

簡單的說，也就是JavaScript能夠及時的向服務器提出請求並及時響應。而不阻塞用戶。達到無刷新效果。

由事件觸發，建立一個XMLHttpRequest對象，把HTTP方法 （POST/GET）和目標URL以及請求返回後的回調函數設置到XMLHttpRequest對象，經過XMLHttpRequest向服務器發送請求，請求發送後繼續響應用戶的界面交互，只有等到請求真正從服務器返回的時候才調用callback()函數，對響應數據進行處理。

閉包（Closure）

閉包就是可以讀取其餘函數內部變量的函數。

因爲在JavaScript語言中，只有函數的內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成「定義在函數內部的函數」。因此在本質上，閉包就是講函數內部和函數外部連接起來的一座橋樑。

閉包的用途：1.獲取函數內部的局部變量。2.讓這些變量始終保持在內存中。

注意：

1.因爲閉包會使得函數中的變量一直保存在內存中，因此不能濫用閉包，容易致使內存泄漏，影響網頁性能，解決方法就是在退出函數以前，將再也不使用的變量所有刪除（delete）；

2.閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

this的工做原理

This老是指向一個對象，具體是運行時基於函數的執行環境動態綁定的，而非函數被聲明時的環境。

普通函數調用時，通常指向window對象；

對象方法調用時，指向該對象；

若是對象方法裏有局部方法，裏面的this會指向window對象；

在ES5模式下，this指向window的都會變成undefined；

Apply，call時，動態改變this

原型鏈

每一個JS對象都有一個prototype原型屬性，指向該對象繼承的原型。

原型對象上有一個 constructor 屬性，該屬性指向的就是構造函數。

而實例對象上有一個 __proto__ 屬性，該屬性也指向原型對象，而且該屬性不是標準屬性，不能夠用在編程中，該屬性用於瀏覽器內部使用。

原型鏈：其實就是有限的實例對象和原型之間組成有限鏈，就是用來實現共享屬性和繼承的。

今天的內容，主要是一個知識點彙總和前面的知識回顧，學習前端開發，須要長期的積累和持續的努力。

若是你想成爲前端開發工程師，若是你如今的學習遇到了瓶頸。能夠隨時私信我，也能夠加個人web前端開發qun：{開始是484}{中間757}【最後760】，本身也整理了一份2019最新前端開發的學習視頻和資料，但願能幫助到每一位學習前端的夥伴。