javascript中的3種繼承實(shí)現(xiàn)方法
使用Object.create實(shí)現(xiàn)類式繼承
下面是官網(wǎng)的一個(gè)例子
//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. } Rectangle.prototype = Object.create(Shape.prototype); var rect = new Rectangle(); rect instanceof Rectangle //true. rect instanceof Shape //true. rect.move(1, 1); //Outputs, "Shape moved."
此時(shí)Rectangle原型的constructor指向父類,如需要使用自身的構(gòu)造,手動(dòng)指定即可,如下
Rectangle.prototype.constructor = Rectangle;
使用utilities工具包自帶的util.inherites
語法
util.inherits(constructor, superConstructor)
例子
const util = require('util'); const EventEmitter = require('events'); function MyStream() { EventEmitter.call(this); } util.inherits(MyStream, EventEmitter); MyStream.prototype.write = function(data) { this.emit('data', data); } var stream = new MyStream(); console.log(stream instanceof EventEmitter); // true console.log(MyStream.super_ === EventEmitter); // true stream.on('data', (data) => { console.log(`Received data: "${data}"`); }) stream.write('It works!'); // Received data: "It works!"
也很簡(jiǎn)單的例子,其實(shí)源碼用了ES6的新特性,我們瞅一瞅
exports.inherits = function(ctor, superCtor) { if (ctor === undefined || ctor === null) throw new TypeError('The constructor to "inherits" must not be ' + 'null or undefined'); if (superCtor === undefined || superCtor === null) throw new TypeError('The super constructor to "inherits" must not ' + 'be null or undefined'); if (superCtor.prototype === undefined) throw new TypeError('The super constructor to "inherits" must ' + 'have a prototype'); ctor.super_ = superCtor; Object.setPrototypeOf(ctor.prototype, superCtor.prototype); };
其中Object.setPrototypeOf即為ES6新特性,將一個(gè)指定的對(duì)象的原型設(shè)置為另一個(gè)對(duì)象或者null
語法
Object.setPrototypeOf(obj, prototype)
obj為將要被設(shè)置原型的一個(gè)對(duì)象
prototype為obj新的原型(可以是一個(gè)對(duì)象或者null).
如果設(shè)置成null,即為如下示例
Object.setPrototypeOf({}, null);
感覺setPrototypeOf真是人如其名啊,專門搞prototype來玩。
那么這個(gè)玩意又是如何實(shí)現(xiàn)的呢?此時(shí)需要借助宗師__proto__
Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) { obj.__proto__ = proto; return obj; }
即把proto賦給obj.__proto__就好了。
使用extends關(guān)鍵字
熟悉java的同學(xué)應(yīng)該非常熟悉這個(gè)關(guān)鍵字,java中的繼承都是靠它實(shí)現(xiàn)的。
ES6新加入的class關(guān)鍵字是語法糖,本質(zhì)還是函數(shù).
在下面的例子,定義了一個(gè)名為Polygon的類,然后定義了一個(gè)繼承于Polygon的類 Square。注意到在構(gòu)造器使用的 super(),supper()只能在構(gòu)造器中使用,super函數(shù)一定要在this可以使用之前調(diào)用。
class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width; } } class Square extends Polygon { constructor(length) { super(length, length); this.name = 'Square'; } }
使用關(guān)鍵字后就不用婆婆媽媽各種設(shè)置原型了,關(guān)鍵字已經(jīng)封裝好了,很快捷方便。
相關(guān)文章
Javascript實(shí)現(xiàn)異步編程的過程
這篇內(nèi)容詳細(xì)分析了Javascript實(shí)現(xiàn)異步編程的過程以及原理解釋,對(duì)此知識(shí)點(diǎn)有興趣的朋友可以學(xué)習(xí)下。2018-06-06JavaScript學(xué)習(xí)筆記整理_簡(jiǎn)單實(shí)現(xiàn)枚舉類型,撲克牌應(yīng)用
下面小編就為大家?guī)硪黄狫avaScript學(xué)習(xí)筆記整理_簡(jiǎn)單實(shí)現(xiàn)枚舉類型,撲克牌應(yīng)用。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09JavaScript函數(shù)學(xué)習(xí)總結(jié)以及相關(guān)的編程習(xí)慣指南
這篇文章主要介紹了JavaScript函數(shù)學(xué)習(xí)總結(jié)以及相關(guān)的編程習(xí)慣指南,整理包含到了匿名函數(shù)和三元運(yùn)算符等非常cool的知識(shí)點(diǎn),需要的朋友可以參考下2015-11-11javascript開發(fā)技術(shù)大全 第2章 開始JAVAScript之旅
1st JavaScript Editor ,除了有著色處,還有html標(biāo)簽、屬性、javascript事件、函數(shù),另外還可調(diào)用外部編輯來編輯網(wǎng)頁(yè),也可將常用瀏覽器內(nèi)置在窗口中。2011-07-07JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記 概述
在JavaScript面世之初,沒有人會(huì)想到它會(huì)被應(yīng)用的如此廣泛,也遠(yuǎn)比一般人想象中的要復(fù)雜強(qiáng)大的多,在我自己學(xué)習(xí)的過程中,曾經(jīng)有過多次震撼2012-10-10JavaScript中CreateTextFile函數(shù)
JavaScript中CreateTextFile函數(shù)是創(chuàng)建指定的文件名并返回一個(gè) TextStream 對(duì)象,可以使用這個(gè)對(duì)象對(duì)文件進(jìn)行讀寫2020-08-08document.getElementBy("id")與$("#id")有什么區(qū)
有朋友問document.getElementBy("id")與$("#id")的區(qū)別,其實(shí)第一個(gè)就是js中獲取對(duì)象的方法, 第二個(gè)是通過自定義函數(shù)方便調(diào)用,而第三個(gè)是jquery中獲取id對(duì)象的方法2013-09-09js中不同的height, top的區(qū)別對(duì)比
今天特地花了一點(diǎn)時(shí)間整理了下height, top的區(qū)別,本篇主要以chrome為準(zhǔn),可能各個(gè)瀏覽器之間還是有一些區(qū)別,需要的朋友可以參考下2015-09-09從數(shù)據(jù)結(jié)構(gòu)分析看:用for each...in 比 for...in 要快些
本篇文章小編將為大家介紹,從數(shù)據(jù)結(jié)構(gòu)分析看:用for each...in 比 for...in 要快些。需要的朋友可以參考一下2013-04-04