Javascript類繼承淺析

Jochen 發布于2019-08-21 12:32 / 2018人閱讀

摘要：推薦高級程序設計，對類繼承有詳細介紹。書中涉及繼承方式多達數種，意味著繼承的靈活性。假設類和類不同公司有不同的公司信息，而同一公司內的員工則需要繼承相同的公司信息。組合繼承組合繼承可以認為是以上兩種組合實現。

前言

高級語言基本上都有類的概念，而javascript因為各種原因相對比較特別，并沒有明確的class類聲明方式（ES6暫不涉及），而是通過構造函數變相實現。推薦《javascript高級程序設計》，對類繼承有詳細介紹。書中涉及繼承方式多達數種，意味著繼承的靈活性。但靈活性，有時也意味著復雜性。總結來說，繼承方案本文介紹兩種即可覆蓋大部分場景。

關于原型鏈

關于原型鏈，花了很久才搞明白。javascript的世界，可以認為變量皆對象。當聲明一個普通變量，即可調用多種方法。

love = ["one", "two", "three"]
["one", "two", "three"]
love.slice(1,2)
["two"]
Object.keys(love)
["0", "1", "2"]

這里聲明一個數組，即可調用slice方法。既然未手工定義slice方法，為么能夠使用，就需要需要提到原型繼承。

對象可訪問變量由兩部分構成，屬性和原型對象。屬性優先級高于原型對象，如上所述，love數組的屬性為"0", "1", "2"，當調用slice方法時，會先在屬性里面尋找slice鍵對應的值，此例中顯然不存在。未找到，則到原型對象中尋找。love變量的原型對象即為Array.prototype，鍵命中，所以不會undefined。注意的一點，原型對象也是對象，即原型對象可能也存在原型對象，在原型對象中匹配鍵時，也遵循先屬性，后原型的法則。這樣的匹配方式就實現了原型鏈。

屬性繼承

某些場合中，不同類具備相同的屬性，而沒有需要共享的原型。舉例來說，基于Person類實現Female類。假設Person屬性為name,age；而Female類也需要有name,age屬性，但是多個sex屬性，既可以如下實現：

function Person(name, age) {
    this.name = name;
    this.age = age;
};

function Female(name, age) {
    this.name = name;
    this.age = age;
    this.sex = "female";
};

function Female(name, age) {
    Person.call(this, name, age);
    this.sex = "female";
};

兩種Female具備共有的屬性定義，主要功能是為了省代碼。從一定意義上來說，Female, Person處于同一層級，并不符合繼承字面義。

原型繼承

某些場合中，子類與超類需要共享信息，就需要原型繼承出場。假設organization類和employee類,不同公司有不同的公司信息，而同一公司內的員工則需要繼承相同的公司信息。

function Organization(boss, belief) {
    this.boss = boss;
    this.belief = belief;
};

function Employee(name, age) {
    this.name = name;
    this.age = age;
};

讓不同的員工共享相同的公司信息可以如下實現：

// first solution
Employee.prototype = new Organization("bruce wayen", "make business easy");
Employee.prototype.constructor = Employee;

// second solution
Employee.prototype.boss = "bruce wayen";
Employee.prototype.belief = "make business easy";

值得注意的點在于，如果Organization不是某一超類的子類的話，兩種方式沒有任何差異。兩種prototype具備相同的三個屬性，且__proto__指針都指向Function.prototype。

如果Organization是Group的子類，那么第一種方式，

function Group() {
    this.label = "Group";
};

function Organization(boss, belief) {
    this.boss = boss;
    this.belief = belief;
};

Organization.prototype = new Group();
Organization.prototype.constructor = Organization;

function Employee(name) {
    this.name = name;
};

Employee.prototype = new Organization("bruce wayen", "make business easy");
Employee.prototype.constructor = Employee;

Employee同時具備訪問Group內部變量的能力，此時原型對象__proto__指針指向Group.prototype。那么所有的employee.label即為Group。

從一定意義上來說，這種處理方式，Employee比Organization更高一級，可訪問變量出自身屬性外，還包含Organization可訪問的所有鍵值，比較符合繼承的字面意。

組合繼承

組合繼承可以認為是以上兩種組合實現。組合繼承從一定程度上來說，就是類之間的深拷貝，兩者具有完全相同的原型對象，也存在一些共有的屬性，依舊拿Person, Female舉例：

function Person(name, age) {
    this.name = name;
    this.age = age;
};

function Female(name, age) {
    Person.call(this, name, age);
    this.sex = "female";
};

Female.prototype = Person.prototype;
Female.prototype.constructor = Female;

如果你使用Nodejs的話，會不會覺得Female的定義有點熟悉，看下面代碼：

var Orchestrator = require("orchestrator");

function Gulp() {
  Orchestrator.call(this);
}
util.inherits(Gulp, Orchestrator);

上面繼承屬性，下面繼承原型。

總結

記錄比較零散，如有機會，閱讀《javascript高級程序設計》可以收獲更多，暫且記錄到這里。

GPU云服務器云服務器繼承類類繼承類繼承問題繼承Thread類

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

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

JavaScript系列--淺析原型鏈與繼承

摘要：綜上所述有原型鏈繼承，構造函數繼承經典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優點于一身是實現基于類型繼承的最有效方法。一、前言繼承是面向對象（OOP）語言中的一個最為人津津樂道的概念。許多面對對象（OOP）語言都支持兩種繼承方式:：接口繼承和實現繼承。接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由于js中方法沒有簽名...

draveness 2019-08-23 18:06 評論0 收藏0
淺析ES6新特性 —— Class

摘要：如下示例構造函數實例化對象新特性使用類實例化對象引入了類這一概念，可以通過關鍵字，定義類。否則報錯，這是類和構造函數的一個主要區別。其實，的類，可以看作是構造函數的另外一種寫法。前言類語法是ES6中新增的一個亮點特性，下文簡單對類的使用進行簡要說明（僅作為個人層面的理解） js傳統模式實例化對象方法——prototype 在JavaScript中，實例化一個對象的傳統使用方法是通過...

LiveVideoStack 2019-08-22 15:21 評論0 收藏0
淺析Node與Element

摘要：坑當然，也有可能會遇到踩坑的現象。與的關系至于與的關系，從繼承方面講可能為清晰很多。總結是節點，其中包含不同類型的節點，只是節點的一種。繼承與，可以調用的方法。起因起因有二：在看winter老師的分享：《一個前端的自我修養》時，有注意到這么一幅圖，里面有寫childNode和children屬性。showImg(https://segmentfault.com/img/remo...

U2FsdGVkX1x 2019-08-01 17:03 評論0 收藏0
LinkedList源碼淺析

摘要：重要方法在鏈尾添加元素除了這個方法以外，還提供了等一些方法，都是為實現和方法服務的，因為雙向鏈表的原因，這些實現都很簡單。類聲明 LinkedList類聲明如下： public class LinkedList extends AbstractSequentialList implements List, Deque, Cloneable, java.io.Seria...

DC_er 2019-08-14 12:25 評論0 收藏0