>[danger] 原型鏈繼承 ***** 參考: 1. JS中所有對象都是Object的實例, Object是所有對象的父親, 子類原型prototype指向父類實例對象實現繼承 ``` Student.prototype = new Person(); ``` 2. 構造函數中, 使用call/apply實現繼承, 子類構造函數中, 父類.call(this), 父類.apply(this), 作用是: 讓Student內的this可以調用Person內的屬性和方法 ``` function Student(){ // 區別: Person.call(this); // call(this,arg1, arg2, arg3 ) Person.apply(this); // apply(this, [arg1, agr2, arg3]) } Student.prototype = new Person(); ``` 擴展: 1. ES6 中引入了Class關鍵字, 轉換成ES5以后其實是原型鏈繼承 2. 每個new 出來的對象, 都擁有構造函數和prototype上的屬性和方法, 也可以通過原型鏈去查找繼承的屬性/方法 3. 可以利用prototype給系統類擴展屬性/方法 4. 原型繼承方式, 子類實例化, 無法給父類傳參, 但使用call可以給父類傳參 ***** >[danger] new 都干了什么 ***** new 構造函數, 會讓this指向一個全新Object對象, ``` var obj = {}; obj.__proto__ = Base.prototype; // 繼承原型里屬性/方法 Base.call(obj); // 繼承構造函數里屬性/方法 ``` ***** >[danger] prototype 和 __proto__區別? ***** 1. 方法/類擁有, `__proto__` 和 `prototype`, 對象擁有`__proto__` 2. __proto__解釋: * 一個對象的__proto__指向它構造函數的prototype的值，這也保證了實例能夠訪問在構造函數和prototype中定義的屬性和方法。 * 每個對象的__proto__屬性, 是查找方法/類/對象的原型鏈方式. ``` // b.__proto__ == Boy.prototype 為true (證明1那句話是對的) // 原型的__proto__指向了它構造函數的prototype的值 ``` ***** 3. prototype 解釋: (1) 方法除了__proto__還有prototype屬性, 指向該方法的原型對象。 總結: a.__proto__指向A.prototype 指向 new Person() 原型對象 >[danger]看下面代碼, 有什么問題? ~~~ function Person(){ this.name = "person"; this.grade = { math: 0 } } function Student() { } Student.prototype = new Person(); let stu1 = new Student(); stu1.name = "100"; stu1.grade.math = 100; let stu2 = new Student(); console.log(stu2.name); // name屬性沒有受到stu1的影響 console.log(stu2.grade.math); // 100 (很明顯2個實例對象竟然共享了父類引用類型的數據 console.log(stu2.grade === stu1.grade); // true ~~~ 解決方式, 引入[組合繼承](%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF.md)