JS繼承實(shí)現(xiàn)方式

liuchengxu 發(fā)布于2019-08-02 11:11 / 2685人閱讀

摘要：中繼承方式的實(shí)現(xiàn)有多種方法，下面是比較推薦的方法，其它繼承方式可做了解測試其實(shí)，已經(jīng)提供了更簡單的實(shí)現(xiàn)方法，沒必要在這造輪子，而且方法不完善，例子父類父類的方法子類子類續(xù)承父類如果你希望能繼承到多個(gè)對象，則可以使用混入的方式繼承一個(gè)類混

JS中繼承方式的實(shí)現(xiàn)有多種方法，下面是比較推薦的方法，其它繼承方式可做了解：

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType) {
    var newObj = object(superType.prototype);
    newObj.constructor = subType;
    subType.prototype = newObj;
}

function People() {
    this.cls = "people";
}

People.prototype.say = function(name) {
    name = name || this.cls;
    console.log("My class is "+ name);
}

function Student() {
    People.call(this);
    this.type = "student";
}

inheritPrototype(Student, People);

Student.prototype.goToSchool = function() {
    console.log("I go to school every day.");
}

// 測試
var stu = new Student();

console.log("class: " + stu.cls); // class: people
console.log("type: " + stu.type); // type: student
stu.say(); // My class is people
stu.goToSchool (); // I go to school every day.

其實(shí)，javascript 已經(jīng)提供了更簡單的實(shí)現(xiàn)方法，沒必要在這造輪子，而且方法不完善，MDN 例子：

// Shape - 父類(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父類的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - 子類(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子類續(xù)承父類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log("Is rect an instance of Rectangle?",
  rect instanceof Rectangle); // true
console.log("Is rect an instance of Shape?",
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, "Shape moved."

如果你希望能繼承到多個(gè)對象，則可以使用混入的方式:

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 繼承一個(gè)類
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do a thing
};

GPU云服務(wù)器云服務(wù)器 js繼承的幾種方式繼承方式 php 類繼承方式 python實(shí)現(xiàn)繼承

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52820.html

相關(guān)文章

JavaScript繼承方式詳解

摘要：可以通過構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類的功能。原型式繼承與類式繼承類式繼承是在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。寄生式繼承這種繼承方式是把原型式工廠模式結(jié)合起來，目的是為了封裝創(chuàng)建的過程。 js繼承的概念 js里常用的如下兩種繼承方式：原型鏈繼承（對象間的繼承）類式繼承（構(gòu)造函數(shù)間的繼承）由于js不像java那樣是真正面向?qū)ο蟮恼Z言，js是基于對象的，它沒有類的概念。...

Yangyang 2019-08-21 10:23 評論0 收藏0
js原型和繼承

摘要：舉例說明組合繼承組合繼承利用原型鏈借用構(gòu)造函數(shù)的模式解決了原型鏈繼承和類式繼承的問題。示例組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。對js原型和繼承的理解一直處于不懂-懂-不懂-懂-不懂。。。的無限循環(huán)之中，本來打算只是簡單總結(jié)下js繼承方式，可看了些網(wǎng)上的資料后，發(fā)現(xiàn)又不懂繼承了。。。這篇文章只...

Hujiawei 2019-08-21 13:49 評論0 收藏0
JS基礎(chǔ)（對象創(chuàng)建，構(gòu)造函數(shù)、原型、實(shí)例之間關(guān)系，繼承方式）

摘要：對象創(chuàng)建的三種方式字面量創(chuàng)建方式系統(tǒng)內(nèi)置構(gòu)造函數(shù)方式自定義構(gòu)造函數(shù)構(gòu)造函數(shù)原型實(shí)例之間的關(guān)系實(shí)例是由構(gòu)造函數(shù)實(shí)例化創(chuàng)建的，每個(gè)函數(shù)在被創(chuàng)建的時(shí)候，都會(huì)默認(rèn)有一個(gè)對象。 JS 對象創(chuàng)建的三種方式 //字面量創(chuàng)建方式 var person= ｛　name:jack?。? //系統(tǒng)內(nèi)置構(gòu)造函數(shù)方式 var person= new Object(); person.name = jack; ...

PAMPANG 2019-08-26 13:30 評論0 收藏0
面向?qū)ο蟮?JavaScript

摘要：是完全的面向?qū)ο笳Z言，它們通過類的形式組織函數(shù)和變量，使之不能脫離對象存在。而在基于原型的面向?qū)ο蠓绞街?，對象則是依靠構(gòu)造器利用原型構(gòu)造出來的。 JavaScript 函數(shù)式腳本語言特性以及其看似隨意的編寫風(fēng)格，導(dǎo)致長期以來人們對這一門語言的誤解，即認(rèn)為 JavaScript 不是一門面向?qū)ο蟮恼Z言，或者只是部分具備一些面向?qū)ο蟮奶卣?。本文將回歸面向?qū)ο蟊疽?，從對語言感悟的角度闡述為什...

novo 2019-08-21 10:49 評論0 收藏0
JS專題之繼承

摘要：構(gòu)造函數(shù)所以，就有了畸形的繼承方式原型鏈繼承三原型鏈繼承改變構(gòu)造函數(shù)的原型對象繼承了屬性以上例子中，暴露出原型鏈繼承的兩個(gè)問題包含引用類型數(shù)據(jù)的原型屬性，會(huì)被所有實(shí)例共享，基本數(shù)據(jù)類型則不會(huì)。前言眾所周知，JavaScript 中，沒有 JAVA 等主流語言類的概念，更沒有父子類繼承的概念，而是通過原型對象和原型鏈的方式實(shí)現(xiàn)繼承。于是，我們這一篇講一講 JS 中的繼承（委托）。 ...

rollback 2019-08-23 15:09 評論0 收藏0
《javascript高級程序設(shè)計(jì)》繼承實(shí)現(xiàn)方式

摘要：寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似，即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部已某種方式來增強(qiáng)對象，最后再像真的是它做了所有工作一樣返回對象。這篇本來應(yīng)該是作為寫JS 面向?qū)ο蟮那白?，只是作為《javascript高級程序設(shè)計(jì)》繼承一章的筆記原型鏈 code 實(shí)現(xiàn) function SuperType() { this.colors = [red,blu...

cppprimer 2019-08-20 18:28 評論0 收藏0