Javascript基礎知識體系化學習總結（二）原型和原型鏈
一、class
1.首先是講一下class，其實大部分語言都是利用class來繼承而js是基於原型來繼承，當然ES6中是對原型繼承進行了一定的封裝，所以可以用class來繼承，但是要記住這個本質上還是基於原型繼承的！
2.ES6中class繼承比較簡單，基本的語法就是：
class 類名 {
constructor () { // 括號中可以傳一些參數
// 在這裏定義類的屬性
}
get () { // 定義方法
// 方法的具體實現
}
}
二、繼承
1.繼承的話主要是extends繼承對應的父類，重點要記住在子類的構造函數即constructor中寫super（）方法，來調用父類的構造函數，最好是利用這個方法而不是直接放複製，這樣子可以做到父類的構造函數有變動的話我這邊子類繼承自父類的構造函數也能跟着自動修改。
2.這是對應的繼承實現，需要注意的是如果父類構造函數有參數，我們需要在super中體現。
class cat extends Animals {
constructor (父類的參數,自己需要的參數) {
super(父類的參數) // 使用父類的構造函數
// 自己的屬性
},
methods () {
// 實現自己的方法
}
}
三、原型
1.前面有提到過原型，那麼什麼是原型？原型主要分爲顯示原型prototype和隱式原型__proto__，每次我們定義class的時候我們的方法都會被自動的放到顯示原型上，實例化的時候會有對應的隱式原型，實例的隱式原型指向對應類的顯示原型。換句話說，顯示原型上存放的是我們的方法，通過隱式原型來指向對應的顯示原型。
2.具體的執行規則是先在實例自身查找是否有這個屬性或者方法，如果沒有則通過實例的隱式原型指向的對應class的顯示原型上的方法，找到了就執行，如果找不到繼續往上一級尋找。
四、原型鏈
1.原型鏈就是將顯示原型和隱式原型的指向問題，每個class中的prototype其實還有一個__proto__指向下一個prototype（即父類的顯示原型），那麼實例與對應的類，子類與父類就形成一個鏈狀的關係。
2.原型鏈上最頂層是Object和它的顯示原型prototype，它顯示原型上的隱式原型__proto__的指向是null即不能再往上指了。
3.另外實例還有一個hasOwnProperty（對應的方法/屬性）的方法來判斷這個屬性/方法是不是屬於本身的方法（如果flase那就是來自原型鏈上的了）。
五、instanceof與手寫簡易Jquery
1.這個instanceof是來判斷變量屬於什麼類型或者實例屬於哪一個類，主要的原理是上面提到的原型和原型鏈，比如 a instanceof Array 就是在a的原型鏈上查找有沒有這個Array的原型，找到即返回true，找不到就是false了。
2.手寫簡易jquery（具體的可以查看我之前的博客）：
<!DOCTYPE html>
<html>
<head>
<title>手寫簡易的jquery</title>
</head>
<body>
<div>
<p>信仰聖光吧！</p>
<p>js基礎體系回顧</p>
</div>
<script type="text/javascript">
class jquery {
constructor (selector) {
console.log(this)
const result = document.querySelectorAll(selector) // 拿到對應元素的集合NodeList(2) [p, p]
console.log(result)
console.log(this)
const length = result.length // 拿到集合的長度
for (let i =0;i<length;i++) { // 循環集合賦值/掛載到jquery上
this[i] = result[i]
console.log(this)
console.log(this[i])
console.log(result[i])
}
this.length = length
this.selector = selector // 並且添加兩個屬性
}
get (index) {
return this[index]
}
each (fn) {
for(let i =0;i<this.length;i++) {
const item = this[i]
fn(item)
}
} // 定義兩個小方法
}
const $p = new jquery('p')
const obj1 = {}
const obj2 = {a:1}
console.log(obj1,obj2);
</script>
</body>
</html>
好了，javascript的第二個模塊大概就是這些內容了，我會將它分爲11個模塊然後13篇文章左右把它講完（有的模塊內容多會範圍上下期大概。。。），學完這些模塊相信大家對基礎的js會有一個比較體系化的認識，那麼大家加油，我是O5,我們下次見！