# js面向對象的編程基礎 > 今天面試的時候和HR談了很久，其中問道了面向對象的編程的基礎。自己回答的不算太好吧，雖然回答了絕大部分。今天就做個簡單的總結吧 ### 簡單的繼承 ` ~~~ // parentClass function superclass () { this.superValue = 'this is parentClass'; } ~~~ // 添加原型共有方法 superclass.prototype.getsuperVaule = function () { return this.superValue; } // childrenClass function subclass () { this.subclass = 'this is childclass'; } //添加子類原型共有方法 subclass.prototype = new superClass(); //為子類添加構造方法 subclass.prototype.getVaule = function () { return this.subValue; } ` ## 測試使用 ~~~ var instance = new subClass(); console.log(instance.getValue) console.log(instance.getsuperValue) ~~~ ## 解析 其實本質也就是通過將父類的實例賦給子類。之所以將父類實例化，是因為，類要通過prototype才可以訪問prototype上面的方法。而對象（也就是類的實例化)可以直接訪問（內部是通過__proto__)prototype的方法。子類也是同理了。當我們使用new運算符的時候。對象也就可以訪問到prototype上面的方法了。 ## 缺點 1. prototype上面的方法是所以子類公用的。如果是引用類型的變量，那么所有的子類都只有公用一個變量。也就是一個子類改變了引用類型的值，其他子類的引用類型的值也會改變。 2. 無法向父類傳遞參數，初始化父類。畢竟我們是通過父類的實例化賦值給子類的原型。所以在子類實例化的時候。父類早就定下來了。 ## 構造函數的繼承(經典繼承） ~~~ function superclass (item) { this.subjects = ['html','css','js']; this.subjects.push(item) } //添加原型共有方法 superclass.prototype.each = function () { this.subjects.forEach( (item,index) => { console.log(item) } } // 聲明子類 function subclass (item) { superclass.call(this,item) } ~~~ ## 測試 ~~~ var instance = new subclass('king') console.log(instance.subjects) var instance2 = new subclass('luckyman') console.log(instance2.subjects) instance2.each(); //會報錯 ~~~ ## 解析 核心就是通過call或者apply來改變this的指向。將父類的this改變為子類的this。也因為這樣子。父類的this上的方法或者屬性就會定義到子類當中。但是在父類的原型里的this還是指向父類的。（this指向函數賴以執行的環境，可以認為prototype的執行環境永遠都是本身類)。也因此原型上的方法都是無法被繼承的。 ## 缺點 1. 無法公用變量或者屬性。原型上的方法也無法被繼承 ## 組合繼承 ~~~ function supclass(item) { //值類型共有變量 this.name = name //引用類型共有屬性 this.books = ['html','css','js'] item && this.books.push(item) } //原型方法 superclass.prototype.each() { this.books.forEach( (item,index) => { console.log(item); } } //聲明子類 function subclass(item,time) { supclass.call(this,item); this.time = time } //子類原型 subclass.prototype = new supclass(); //子類原型方法 subclass.prototype.getTime = function () { console.log(this.time) } ~~~ ## 測試 ~~~ var instance1 = new subclass('js book',2017'); instance1.each(); instance1.getTime(); var instance2 = new subclass('高級教程', '2014'); instance2.each(); instance2.getTime(); ~~~ ## 解析 組合模式本質就是原型繼承和構造函數繼承兩種方式的組合，繼承兩種方式的優點 ## 缺點 開銷比較大，在子類的原型上，new了一次父類，在構造函數里又執行了new運算符 所以父類執行了兩次初始化 ## 原型式繼承 ~~~ function inheritobject (0) { //聲明過度對象 function F() {} F.prototype = o; //返回過度對象的實例，該實例的原型繼承了父類 return new F(); } ~~~ ### 解析 這種因為構造函數基本沒有任何的開銷，也可以將F過度類緩存起來。這也是Object.create()方法的實現原理。 ### 缺點 1. 引用類型會被所有子類公用 ## 寄生繼承 ~~~ function createObj (obj) { // 通過原型繼承方式創建新對象 var o = new inheriteobject(obj); // 擴展新對象 o.getName = function () { console.log(name) } // 返回對象 return o; } ~~~ ### 測試 ~~~ var books = { name : 'kingEND', age: 23 } var subbooks = new createObj (books); subooks.getName(); ~~~ ## 最后的繼承者 -- 寄生組合式繼承 ~~~ function inheritPrototype (subclass, superclass) { // 復制一份父類的原型副本保存在變量中 var p = inheritobject(supclass.prototype); //修正因為重寫子類原型導致子類的constructor 屬性被修改 // 因為p是父類的prototype,所以constructor會指向父類的構造函數 // 而子類的prototype里的constructor應該是指向子類的構造函數 p.constructor = subclass; // 設置子類的原型 subclass.prototype = p; }