快捷導(dǎo)航

javascript中的3種繼承實現(xiàn)方法

更新時間：2016年01月27日 11:06:02 投稿：hebedich

這篇文章主要介紹了javascript中的3種繼承實現(xiàn)方法，包括使用Object.create實現(xiàn)類式繼承、使用utilities工具包自帶的util.inherites、使用extends關(guān)鍵字，非常的實用，希望對大家了解javascript繼承能夠有所幫助

使用Object.create實現(xiàn)類式繼承

下面是官網(wǎng)的一個例子

//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."

此時Rectangle原型的constructor指向父類，如需要使用自身的構(gòu)造，手動指定即可，如下

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!"

也很簡單的例子，其實源碼用了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新特性，將一個指定的對象的原型設(shè)置為另一個對象或者null

語法

Object.setPrototypeOf(obj, prototype)
obj為將要被設(shè)置原型的一個對象
prototype為obj新的原型(可以是一個對象或者null).

如果設(shè)置成null,即為如下示例

Object.setPrototypeOf({}, null);
感覺setPrototypeOf真是人如其名啊，專門搞prototype來玩。
那么這個玩意又是如何實現(xiàn)的呢？此時需要借助宗師__proto__

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
 obj.__proto__ = proto;
 return obj; 
}

即把proto賦給obj.__proto__就好了。

使用extends關(guān)鍵字

熟悉java的同學(xué)應(yīng)該非常熟悉這個關(guān)鍵字，java中的繼承都是靠它實現(xiàn)的。
ES6新加入的class關(guān)鍵字是語法糖，本質(zhì)還是函數(shù).

在下面的例子，定義了一個名為Polygon的類，然后定義了一個繼承于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)封裝好了，很快捷方便。

您可能感興趣的文章: