摘要:中繼承方式的實(shí)現(xiàn)有多種方法,下面是比較推薦的方法,其它繼承方式可做了解測(cè)試其實(shí),已經(jīng)提供了更簡(jiǎn)單的實(shí)現(xiàn)方法,沒必要在這造輪子,而且方法不完善,例子父類父類的方法子類子類續(xù)承父類如果你希望能繼承到多個(gè)對(duì)象,則可以使用混入的方式繼承一個(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."); } // 測(cè)試 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)提供了更簡(jiǎn)單的實(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è)對(duì)象,則可以使用混入的方式:
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 };
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/96680.html
摘要:可以通過構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類的功能。原型式繼承與類式繼承類式繼承是在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。寄生式繼承這種繼承方式是把原型式工廠模式結(jié)合起來,目的是為了封裝創(chuàng)建的過程。 js繼承的概念 js里常用的如下兩種繼承方式: 原型鏈繼承(對(duì)象間的繼承) 類式繼承(構(gòu)造函數(shù)間的繼承) 由于js不像java那樣是真正面向?qū)ο蟮恼Z言,js是基于對(duì)象的,它沒有類的概念。...
摘要:舉例說明組合繼承組合繼承利用原型鏈借用構(gòu)造函數(shù)的模式解決了原型鏈繼承和類式繼承的問題。示例組合式繼承是比較常用的一種繼承方法,其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。 對(duì)js原型和繼承的理解一直處于不懂-懂-不懂-懂-不懂。。。的無限循環(huán)之中,本來打算只是簡(jiǎn)單總結(jié)下js繼承方式,可看了些網(wǎng)上的資料后,發(fā)現(xiàn)又不懂繼承了。。。這篇文章只...
摘要:對(duì)象創(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è)對(duì)象。 JS 對(duì)象創(chuàng)建的三種方式 //字面量創(chuàng)建方式 var person= { name:jack?。? //系統(tǒng)內(nèi)置構(gòu)造函數(shù)方式 var person= new Object(); person.name = jack; ...
摘要:是完全的面向?qū)ο笳Z言,它們通過類的形式組織函數(shù)和變量,使之不能脫離對(duì)象存在。而在基于原型的面向?qū)ο蠓绞街?,?duì)象則是依靠構(gòu)造器利用原型構(gòu)造出來的。 JavaScript 函數(shù)式腳本語言特性以及其看似隨意的編寫風(fēng)格,導(dǎo)致長(zhǎng)期以來人們對(duì)這一門語言的誤解,即認(rèn)為 JavaScript 不是一門面向?qū)ο蟮恼Z言,或者只是部分具備一些面向?qū)ο蟮奶卣?。本文將回歸面向?qū)ο蟊疽猓瑥膶?duì)語言感悟的角度闡述為什...
摘要:構(gòu)造函數(shù)所以,就有了畸形的繼承方式原型鏈繼承三原型鏈繼承改變構(gòu)造函數(shù)的原型對(duì)象繼承了屬性以上例子中,暴露出原型鏈繼承的兩個(gè)問題包含引用類型數(shù)據(jù)的原型屬性,會(huì)被所有實(shí)例共享,基本數(shù)據(jù)類型則不會(huì)。 前言 眾所周知,JavaScript 中,沒有 JAVA 等主流語言類的概念,更沒有父子類繼承的概念,而是通過原型對(duì)象和原型鏈的方式實(shí)現(xiàn)繼承。 于是,我們這一篇講一講 JS 中的繼承(委托)。 ...
摘要:寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似,即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù),該函數(shù)在內(nèi)部已某種方式來增強(qiáng)對(duì)象,最后再像真的是它做了所有工作一樣返回對(duì)象。 這篇本來應(yīng)該是作為寫JS 面向?qū)ο蟮那白?,只是作為《javascript高級(jí)程序設(shè)計(jì)》繼承一章的筆記 原型鏈 code 實(shí)現(xiàn) function SuperType() { this.colors = [red,blu...
閱讀 2052·2021-10-08 10:05
閱讀 1892·2021-09-22 15:31
閱讀 3013·2021-09-22 15:13
閱讀 3492·2021-09-09 09:34
閱讀 2098·2021-09-03 10:46
閱讀 3128·2019-08-30 15:56
閱讀 1709·2019-08-30 15:53
閱讀 2364·2019-08-30 15:44