幾種js繼承的式分享

本文主要跟大家分享幾個js繼承的式分別有原型繼承、借用建構子繼承、組合繼承、##寄生式繼承、寄生組合方式繼承，希望能幫助大家。

原型式繼承

可以在不必預先定義建構子的情況下實現繼承，其本質是執行給定物件的淺複製。而複製得到的副本還可以進一步的改造

function parent(o) {
    this.username = 'father';    this.array = [1,2,3]
}function child() {
    this.age = 20}
child.prototype = new Parent();

缺點：  

1. 父類別和子類別公用原型鏈上的引用變數。
2. 建立子類別實例是無法傳遞參數給父類別的建構函

借用建構函式繼承

借用父類別的建構子來增強子類別的實例，就是說，相當於複製一份父類別的屬性或方法給子類別了

function Parent(name,arr) {
    this.name = name;    this.arr = arr;    this.run = function() {
        console.log('run function')
   }
}function Child(name, arr) {
    this.age = 20;
    Parent.call(this,name,arr);
}var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]);
obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1

優點：

1. 解決了子類別實例共享父類別引用屬性的問題
2.建立子類實例時，可以向父類別建構函數傳遞參數
缺點：
1.無法實作重複使用,每一個子類別實例都有一個新的run函數，如果實例的物件多了，記憶體消耗過大

組合式繼承

組合繼承避免了原型鍊和借用建構子的缺陷，融合它們的優點。

function Parent(name,arr) {
    this.name = name;    this.arr = arr;
}
Parent.prototype.run = function() {
    console.log('run function');
}function Child(naem,arr) {
    this.age = '20';
    Parent.call(this,name,arr);        // 借用构造函数 ==》 核心语句   1》不能复用}
Child.prototype = new Parent(); // 原型链 ==》 核心语句  1》父构造函数不能传递参数 2》arr是引用属性，一个改变，互相影响

優點：

1.不存在引用屬性共享的問題
2.可傳遞參數
3.方法可重複使用
缺點：
子類別原型上右一份多餘的父類實例的屬性

寄生式繼承

與原型式繼承非常相似，也是基於某個對像或某些資訊創建一個對象，然後增強對象，最後返回對象。

function createAnother(original) {
    var clone = Object.create(original); //
    clone.sayHi = function() {
        console.log(Hi) 
   }   return clone;var Person = {
    name: 'Blob',
    friends: ['Shelby', 'Court', 'Van'];
}var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // Hi

寄生組合式繼承

組合繼承是js最常用的繼承模式，組合繼承最大的問題就是無論在什麼情況下，都會呼叫兩次建構子：一次是在創建子類型原型時，另一次是在子類型建構函數的內部。

function beget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。
    var F = function(){};
    F.prototype = obj;    return new F();
}function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;    this.arr = [1];
}//  在此处声明函数Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){
    Super.call(this);   // 核心
    // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub;            // 核心Sub.prototype = proto;              // 核心var sub = new Sub();
alert(sub.val);
alert(sub.arr);

相關推薦：

細說js繼承

#js繼承的實作碼_javascript技巧

JS繼承--原型鏈繼承與類別繼承_基礎知識

以上是幾種js繼承的式分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！