JavaScript 繼承

xcc3641 發布于2019-08-21 17:49 / 868人閱讀

摘要：寄生組合繼承稱為完美繼承其他繼承方式都有缺陷以下為種繼承的簡單寫法包括原形鏈借用構造函數組合繼承原形式寄生式寄生組合式種繼承父類原形鏈繼承借用構造函數繼承組合式繼承原形式繼承寄生式繼承寄生組合式繼承以下為種繼承的詳細寫法。

寄生組合繼承稱為完美繼承（其他繼承方式都有缺陷）

以下為6種繼承的簡單寫法:
（包括：原形鏈、借用構造函數、組合繼承、原形式、寄生式、寄生組合式6種繼承）

//父類
function Parent(name) {
    this.name = name;
}
Parent.prototype.alertHi = function () {
    alert("Hi");
};

//原形鏈繼承
function Child1() {}
Child1.prototype = new Parent();

//借用構造函數繼承
function Child2(name) {
    Parent.call(this,name);
}

//組合式繼承
function Child3(name) {
    Parent.call(this,name);
}
Child3.prototype = new Parent();
Child3.prototype.constructor = Child3;

//原形式繼承
var Child4 = Object.create(Parent);

//寄生式繼承
function createChild(child) {
    var clone = Object(child);
    clone.sayHello = function () {
        alert("Hello");
    };
    return clone;
}
var Child5 = createChild(Person);

//寄生組合式繼承
var Child6 = function (name) {
    Parent.call(this,name);
};
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
inheritPrototype(Child6,Parent);

以下為6種繼承的詳細寫法。

原形鏈繼承

//原形鏈繼承
//父類
function Parent() {
    this.flag = true;
}
//父類的原形方法
Parent.prototype.alertFlag = function () {
    alert(this.flag);
};
//子類
function Child() {
    this.flag = false;//修改屬性（不寫則不修改）
}
//Child 繼承 Parent
Child.prototype = new Parent();
//添加原形方法
Child.prototype.sayHello = function () {
    alert("Hello");
};

var child = new Child();
child.alertFlag();//彈出 false
child.sayHello();// 彈出 Hello

//子類修改父類方法
Child.prototype.alertFlag = function () {
    alert(!this.flag);
};
child.alertFlag();//彈出 true

//總結：繼承的方法為 Child.prototype = new Parent();（只有一句話）

借用構造函數繼承

//借用構造函數繼承
function Parent(name) {
    this.name = name;
}
function Child(name,age) {
    Parent.call(this,name);
    this.age = age;
}

//實例
var child = new Child("Andy",28);
alert(child.name);//Andy
alert(child.age);//28

//總結：繼承的代碼為Parent.call(this,name);（也是一句話），主要解決了this指向的轉變和參數的傳遞。

組合繼承

//組合繼承
//父類
function Parent(name) {
    this.name = name;
    this.friends = ["Jay","Jolin"];
}
Parent.prototype.sayName = function () {
    alert(this.name);
};

//子類
function Child(name,age) {
    Parent.call(this,name);
    this.age = age;
}
//繼承
Child.prototype = new Parent();
//改變constructor指向
Child.prototype.constructor = Child;

//子類添加方法
Child.prototype.sayAge = function () {
    alert(this.age);
};

//創建實例
var c1 = new Child("Andy",29);
var c2 = new Child("Lucy",24);

c1.friends.push("Jack");
c2.friends.push("Coco");

console.log(c1.friends.toString());//Jay,Jolin,Jack
console.log(c2.friends.toString());//Jay,Jolin,Coco

console.log(c1.sayName());//Andy
console.log(c2.sayName());//Lucy

原形式繼承

//原形式繼承
//實現繼承的方法
function obj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

//但是ECMA5，通過Object.create()方法規范化了原形式繼承（即上面的方法）

var person = {
    name:"Andy",
    age:29,
    friends:["Lily","Lucy","Jack"]
};

var Jay = Object.create(person);
Jay.name = "Jay";
Jay.friends.push("Jolin");

var Coco = Object.create(person);
Coco.name = "Coco";
Coco.friends.push("Sunny");

console.log(Jay.name);//Jay
console.log(Coco.name);//Coco
console.log(Jay.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny
console.log(Coco.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny

//沒有重寫的屬性會被共享

var K = Object.create(person);
K.name = "Coco";
K.friends = ["J","Q","A"];

console.log(Jay.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny
console.log(Coco.friends.toString());//Lily,Lucy,Jack,Jolin,Sunny
console.log(K.friends.toString());//J,Q,A

寄生式繼承

//寄生式繼承

//通過該方法，為子類添加方法，以實現繼承；（即增強子類）
function create(child) {
    var clone = Object(child);
    clone.sayHi = function () {
        alert("Hi");
    };
    return clone;
}

var Me = {
    name : "Firefly",
    friends:["Bee","Cicada","Butterfly"]
};
var me = create(Me);

me.sayHi();

寄生組合繼承（又稱完美繼承）

//寄生組合繼承
function Parent(a) {
    this.a = a;
}
Parent.prototype = {
    fn:function () {
        alert("Hi");
    }
};
function Child(a,b) {
    Parent.call(this,a);
    this.b = b;
}
//實現繼承的方法
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
//繼承
inheritPrototype(Child,Parent);
//為Child添加原型方法
Child.prototype.sayB = function () {
    alert(this.b);
}

注：以下著重介紹組合寄生繼承。

例：

function Super(name) {
    this.name = name;
}
Super.prototype = {
    constructor:Super,
    sayName:function () {
        alert(this.name);
    }
    //其他方法...
};
function Sub(name,age){
    Super.call(this,name);
    this.age = age;
}
//實現繼承
inheritPrototype(Sub,Super);
//添加原形方法
Sub.prototype.sayAge = function () {
    alert(this.age);
};
//實現繼承的方法
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

//創建實例
var s = new Sub("Andy",28);
//調用方法
s.sayName();
s.sayAge();
//修改屬性
s.age = 24;
s.sayAge();
s.name = "Lily";
s.sayName();

實現多繼承（修改inheritPrototype()方法）

//父類1
function Super1(name) {
    this.name = name;
}
Super1.prototype = {
    constructor:Super1,
    sayName:function () {
        alert(this.name);
    }
    //其他方法...
};
//父類2
function Super2(gender) {
    this.gender = gender;
}
Super2.prototype = {
    constructor:Super1,
    sayGender:function () {
        alert(this.gender);
    }
    //其他方法...
};
//子類
function Sub(name,gender,age){
    Super1.call(this,name);
    Super2.call(this,gender);
    this.age = age;
}
inheritPrototype(Sub,Super1);
inheritPrototype(Sub,Super2);
//添加原形方法
Sub.prototype.sayAge = function () {
    alert(this.age);
};
//實現繼承的方法
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    //修改的地方
    //subType.prototype = prototype;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}
//創建實例
var s = new Sub("Andy","man",26);
s.sayName();
s.sayGender();
s.sayAge();

另外，你可以將Super1、Super2和Sub類放在不同的js文件中，在html中引入后調用。

例如：

//將以下代碼方法myjs1.js文件中
function Super1(name) {
    this.name = name;
}
Super1.prototype = {
    constructor:Super1,
    sayName:function () {
        alert(this.name);
    }
    //其他方法...
};

//將以下代碼放入myjs2.js文件中
function Super2(gender) {
    this.gender = gender;
}
Super2.prototype = {
    constructor:Super1,
    sayGender:function () {
        alert(this.gender);
    }
    //其他方法...
};

//將以下代碼放入myjs3.js文件中
function Sub(name,gender,age){
    Super1.call(this,name);
    Super2.call(this,gender);
    this.age = age;
}
inheritPrototype(Sub,Super1);
inheritPrototype(Sub,Super2);
//添加原形方法
Sub.prototype.sayAge = function () {
    alert(this.age);
};
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    //subType.prototype = prototype;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}

//在html中引用

Demo：超級瑪麗
超級瑪麗，有兩個屬性：name和size，有三個方法：show()、run()和jump()；
大的超級瑪麗：繼承自超級瑪麗，在超級瑪麗的三個方法基礎上修改一個方法：jump();
醫生超級瑪麗：繼承自大的超級瑪麗，在大的超級瑪麗的三個方法基礎上多了一個方法：shot();

超級瑪麗類(js1.js)：

function SuperMarie(name,size) {
    this.name = name;
    this.size = size;
}
SuperMarie.prototype = {
    constructor:SuperMarie,
    jump:function () {
        console.log(this.name+" jump.");
    },
    run:function () {
        console.log(this.name+" run.");
    },
    show:function () {
        console.log(this.name+""s size is "+this.size);
    }
};

大的超級瑪麗類(js2.js)：

function BigSuperMarie(name,size) {
    SuperMarie.call(this,name,size);
}
inheritPrototype(BigSuperMarie,SuperMarie);
BigSuperMarie.prototype.jump=function () {
        console.log(this.name+" super jump!");
    };
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}

醫生超級瑪麗類(js3.js)：

function DoctorSuperMarie(name,size) {
    BigSuperMarie.call(this,name,size);
}
inheritPrototype(DoctorSuperMarie,BigSuperMarie);
DoctorSuperMarie.prototype.shot = function () {
        console.log(this.name+" shot!");
    };
function inheritPrototype(subType,superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    for(par in prototype){
        subType.prototype[par] = prototype[par];
    }
}

html代碼：

GPU云服務器云服務器 javascript繼承 javascript繼承方法 Javascript實現繼承 javascript類的繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90048.html

徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構造函數繼承，在中是一種關鍵的實現的繼承方法，相信你已經很好的掌握了。你應該知道，JavaScript是一門基于原型鏈的語言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關。甚至可以說，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構造函數，原型屬性與實例對象要搞清楚如何在JavaScript中實現繼承，...

_ivan 2019-08-21 17:48 評論0 收藏0
講清楚之 javascript 對象繼承

摘要：中的繼承并不是明確規定的，而是通過模仿實現的。繼承中的繼承又稱模擬類繼承。將函數抽離到全局對象中，函數內部直接通過作用域鏈查找函數。這種范式編程是基于作用域鏈，與前面講的繼承是基于原型鏈的本質區別是屬性查找方式的不同。這一節梳理對象的繼承。我們主要使用繼承來實現代碼的抽象和代碼的復用，在應用層實現功能的封裝。 javascript 的對象繼承方式真的是百花齊放，屬性繼承、原型繼承、...

Jonathan Shieber 2019-08-26 11:58 評論0 收藏0
javascript繼承 --- 多種繼承方式解析(ES5)

摘要：繼承前言作為一門輕量級的腳本語言在和的橫空出世之后將其推向的新的高度雖然中出現的新的生成對象的類語法格式但依然為的語法糖而我們依然有必要從的原生實現入手來了解它的繼承實現方式給出了更加簡潔的固定的類聲明方式有興趣的可以查看阮一峰的入門下面給 javascript繼承前言 javascript作為一門輕量級的腳本語言在ES6和node.js的橫空出世之后將其推向的新的高度,雖然 ES6...

yankeys 2019-08-26 11:35 評論0 收藏0
白話解釋 Javascript 原型繼承(prototype inheritance)

摘要：我們有了構造函數之后，第二步開始使用它構造一個函數。來個例子這種方式很簡單也很直接，你在構造函數的原型上定義方法，那么用該構造函數實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數原型上的方法。來源: 個人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學過面向對象的同學們是否還記得，老師整天掛在嘴邊的面向對象三大特...

kid143 2019-08-21 15:09 評論0 收藏0
javascript的繼承你了解多少？

摘要：和構造函數前面提到，是個內置隱藏屬性，雖然在可以通過訪問，但是其設計本意是不可被讀取和修改的，那么我們如何利用原型鏈來建立繼承關系提供了關鍵字。到這兒，思路就清晰了，怎么讓對象和對象的相連實現繼承只需把的構造函數的連接到就行了。什么是繼承? 大多數人使用繼承不外乎是為了獲得這兩點好處，代碼的抽象和代碼的復用。代碼的抽象就不用說了，交通工具和汽車這類的例子數不勝數，在傳統的OO語言中(...

baishancloud 2019-08-23 14:08 評論0 收藏0