首頁 > web前端 > js教程 > 在js 中的有哪幾種繼承方法

在js 中的有哪幾種繼承方法

亚连
發布: 2018-05-17 10:30:11
原創
1624 人瀏覽過

#正式發布的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();//小明1234567891011
登入後複製
原型鏈繼承的問題

//當超類別中包含引用類型屬性值時,其中一個子類別的多個實例中,只要其中一個實例引用屬性只發生修改一個修改,其他實例的引用類型屬性值也會立即發生改變//原因是超類別的屬性變成子類別的原型屬性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);//["小红", "小强", "张三"]1234567891011121314151617
登入後複製

二、借用建構子繼承

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);//["小红", "小强"]12345678910111213141516
登入後複製

借用建構子的問題

單獨使用借用建構函數,沒辦法繼承超類別中的原型

屬性與方法

##三、組合式繼承(原型繼承借用建構函式繼承)

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

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();//小明12345678910111213141516171819
登入後複製

組合式繼承的問題

//组合式继承中,超类的构造函数将被调用两次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();1234567891011121314
登入後複製

四、寄生式繼承

######//在主要考慮物件而不是自己定義類型和建構子的情況下,寄生式繼承是一種有用的模式,但無法做到函數的複用   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);//["小红", "小强", "张三"]123456789101112131415161718
登入後複製
###寄生組合式繼承###
//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题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());//小华
登入後複製
###上面是我整理給大家的在js 中的幾種繼承方法,希望未來會對大家有幫助。 ######相關文章:#########JS onclick 中如何傳兩個參數給JS方法的具體步驟##############js基本語法詳細解答###############JS中定義類別的方法講解##########

以上是在js 中的有哪幾種繼承方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板