正式發布的ES6中已經封裝實現了其他OO語言中的繼承形式，Class Extends，這里主要記錄js的原型繼承和借用構造函數繼承

一、原型鏈繼承

function Super(){this.name="小明"; } Super.prototype.sayName = function(){alert(this.name) }; function Sub(){}Sub.prototype = new Super(); var instance = new Sub(); instance.sayName();//小明

原型鏈繼承的問題

//當超類中包含引用類型屬性值時，其中一個子類的多個實例中，只要其中一個實例引用屬性只發生修改一個修改，其他實例的引用類型屬性值也會立即發生改變 //原因是超類的屬性變成子類的原型屬性 function Super(){ this.name="小明";this.friends = ['小紅','小強']; } Super.prototype.sayName = function(){alert(this.name) }; function Sub(){}Sub.prototype = new Super(); var instance1 = new Sub(); var instance2 = new Sub(); instance1.friends.push('張三'); console.log(instance1.friends);//["小紅", "小強", "張三"] console.log(instance2.friends);//["小紅", "小強", "張三"]

二、借用構造函數繼承

function Super(){ this.name="小明";this.friends = ['小紅','小強']; } Super.prototype.sayName = function(){alert(this.name) }; function Sub(){Super.call(this); }var instance1 = new Sub(); var instance2 = new Sub(); instance1.friends.push('張三'); console.log(instance1.friends);//["小紅", "小強", "張三"] console.log(instance2.friends);//["小紅", "小強"]

借用構造函數的問題

單獨使用借用構造函數，沒辦法繼承超類中的原型屬性和方法

三、組合式繼承（原型繼承+借用構造函數繼承）

組合式繼承也是實際開發中最常用的繼承方式

function Super(){ this.name="小明";this.friends = ['小紅','小強']; } Super.prototype.sayName = function(){alert(this.name) }; function Sub(){Super.call(this); }Sub.prototype = new Super(); var instance1 = new Sub(); var instance2 = new Sub(); instance1.friends.push('張三'); console.log(instance1.friends);//["小紅", "小強", "張三"] console.log(instance2.friends);//["小紅", "小強"] instance1.sayName();//小明 instance2.sayName();//小明

組合式繼承的問題

//組合式繼承中，超類的構造函數將被調用兩次 function Super(){ this.name="小明";this.friends = ['小紅','小強']; } Super.prototype.sayName = function(){alert(this.name) }; function Sub(){Super.call(this);//第二次調用 }Sub.prototype = new Super();//第一次調用 var instance = new Sub();

四、寄生式繼承

//在主要考慮對象而不是自己定義類型和構造函數的情況下，寄生式繼承是一種有用的模式，但無法做到函數的復用 function createAnother(original){var clone = Object(original);//創建一個新對象，original的副本clone.sayName = function(){ //對象的增強，添加額外的方法alert('hi');}return clone; } var person = {name:'小明',friends:['小紅','小強'] } var person1 = createAnother(person); var person2 = createAnother(person); person1.friends.push('張三'); console.log(person.friends);//["小紅", "小強", "張三"] console.log(person1.friends);//["小紅", "小強", "張三"] console.log(person2.friends);//["小紅", "小強", "張三"]

寄生組合式繼承

//寄生組合式繼承解決了組合式繼承調用兩次超類構造函數的問題 function inheritPrototype(sub,superr){ var prototype = Object.create(superr.prototype);//ES5中創建對象副本的方法prototype.constructor = superr; //彌補重寫原型失去的默認constructor屬性sub.prototype = prototype; } function Super(name){this.name = name;this.friends = ['小紅','小強']; } Super.prototype.sayName = function(){alert(this.name); } function Sub(name){Super.call(this,name); } inheritPrototype(Sub,Super); var person1 = new Sub('小明'); var person2 = new Sub('小華'); person1.friends.push('張三'); console.log(person1.friends);//["小紅", "小強", "張三"] console.log(person2.friends);//["小紅", "小強"] console.log(person1.sayName());//小明 console.log(person2.sayName());//小華

轉載于:https://www.cnblogs.com/tuboshu/p/10752356.html

總結

以上是生活随笔為你收集整理的js 中的五种继承方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。