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

WEB開發阿靖發表於2019-06-26

很多初學的朋友經常問我,前端JavaScript都需要學習哪些東西呀?哪些是JavaScript的重點知識啊?

其實做前端開發工程師,所有的知識點都是我們學習必備的東西,只有紮實的技術基礎才是高薪的關鍵!

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

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

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

理解JavaScript物件導向程式設計

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

物件導向的三大特點:繼承、封裝、多型

1、JS中通過prototype實現原型繼承

2、JS物件可以通過物件冒充,實現多重繼承

3、Object類是所有Js類的基類

4、通過function對物件進行封裝

5、通過使用arguments實現引數過載

6、ES6語法糖可以直接定義類class,繼承物件extends

8個JavaScript資料型別

前端開發 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

判斷資料型別的幾種方法

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

1、typeof

2、prototype

3、instanceof

4、constructor

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

注意 : typeof null === Object

Object物件

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

JavaScript中所有的物件都繼承自Object

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

constructor屬性是儲存當前物件的建構函式,前面的例子中,constructor儲存的就是Object方法。

hasOwnProperty方法接收一個字串引數,該參數列示屬性名稱,用來判斷該屬性是否在當前物件例項中,而不是在物件的原型鏈中。

isPrototype方法接收一個物件,用來判斷當前物件是否在傳入的引數物件的原型鏈上

Array資料的一些方法用法

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

Concat() 連線兩個或更多陣列

splice(index,len,[item]) 刪除元素,並向陣列新增一個新元素。

Slice() 從某個已有的陣列返回選定的元素

Join() 把陣列的所有元素放入一個字串,元素通過指定的分隔符進行分割

push() 在陣列後新增元素,並返回新的長度

unshift() 在陣列最前新增元素

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

reverse() 顛倒陣列中元素的順序

shift() 刪除並返回陣列中第一個元素

sort() 對陣列元素進行排序

toSource() 返回該物件的原始碼

toString() 把陣列轉換為字串並返回結果

toLocaleString() 把陣列轉換為本地陣列,並返回結果

valueOf() 返回物件的原始值

這些陣列物件的操作方法,大家可以多翻閱開發文件來熟悉。

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

Function函式的理解

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

兩種自定義函式的方法

1.function fnName(){}

2. var fnName=function(){}

函式的返回值:

1.當函式無明確返回值時,函式返回undefined。

2.有返回值返回。

函式的引數列表是可變的,資料型別也是任意資料型別,JS中有一個變數,argument可以訪問所有傳到函式內部的引數。

Js支援建立動態函式,動態函式必須用Function物件來定義。

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

JavaScript本身不支援函式的過載。如果兩個方法名字一樣,即使引數個數不一樣,那麼後面定義的就會覆蓋前面定義,呼叫方法時永遠是呼叫後定義的那個。

不過javascript的過載可以用別的方法來實現,之前的推文重名就會被覆蓋?那JavaScript中是如何實現過載的呢?李老師很詳細的講解了2種javascript實現過載的方法,大家可以去回顧一下。

Ajax請求的原理

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

通過XMLHttpRequest物件來向伺服器傳送非同步請求,從伺服器獲取資料。

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

XMLHttpRequest是ajax的核心機制,它是IE5中首先引入的,是一種支援非同步請求的技術。

簡單的說,也就是JavaScript可以及時的向伺服器提出請求並及時響應。而不阻塞使用者。達到無重新整理效果。

由事件觸發,建立一個XMLHttpRequest物件,把HTTP方法 (POST/GET)和目標URL以及請求返回後的回撥函式設定到XMLHttpRequest物件,通過XMLHttpRequest向伺服器傳送請求,請求傳送後繼續響應使用者的介面互動,只有等到請求真正從伺服器返回的時候才呼叫callback()函式,對響應資料進行處理。

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

閉包(Closure)

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

閉包就是能夠讀取其他函式內部變數的函式。

由於在JavaScript語言中,只有函式的內部的子函式才能讀取區域性變數,因此可以把閉包簡單理解成“定義在函式內部的函式”。所以在本質上,閉包就是講函式內部和函式外部連結起來的一座橋樑。

閉包的用途:1.獲取函式內部的區域性變數。2.讓這些變數始終保持在記憶體中。

注意:

1.由於閉包會使得函式中的變數一直儲存在記憶體中,所以不能濫用閉包,容易導致記憶體洩漏,影響網頁效能,解決方法就是在退出函式之前,將不再使用的變數全部刪除(delete);

2.閉包會在父函式外部,改變父函式內部變數的值。所以,如果你把父函式當作物件(object)使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函式內部變數的值。

關於閉包的知識點,之前的推文面試官問我:什麼是JavaScript閉包,我該如何回答?,李老師有非常形象化的講解。

this的工作原理

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

This總是指向一個物件,具體是執行時基於函式的執行環境動態繫結的,而非函式被宣告時的環境。

普通函式呼叫時,一般指向window物件;

物件方法呼叫時,指向該物件;

如果物件方法裡有區域性方法,裡面的this會指向window物件;

在ES5模式下,this指向window的都會變成undefined;

Apply,call時,動態改變this

原型鏈

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

理解原型鏈的前提,首先要理解原型,之前的推文前端開發工程師語法基礎:如何理解JavaScript原型?李老師有詳細講解,這裡就不做詳細講解了。

每個JS物件都有一個prototype原型屬性,指向該物件繼承的原型。

原型物件上有一個 constructor 屬性,該屬性指向的就是建構函式。

而例項物件上有一個 __proto__ 屬性,該屬性也指向原型物件,並且該屬性不是標準屬性,不可以用在程式設計中,該屬性用於瀏覽器內部使用。

原型鏈:其實就是有限的例項物件和原型之間組成有限鏈,就是用來實現共享屬性和繼承的。

關於原型鏈,之前的推文如何理解JavaScript的原型和原型鏈?李老師也有詳細講過了


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

如果你想成為前端開發工程師,如果你現在的學習遇到了瓶頸。歡迎新增李老師的微信和老師交流。

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


相關文章