javascript中的3种继承实现方法

 更新时间:2016年01月27日 11:06:02   投稿:hebedich  
这篇文章主要介绍了javascript中的3种继承实现方法,包括使用Object.create实现类式继承、使用utilities工具包自带的util.inherites、使用extends关键字,非常的实用,希望对大家了解javascript继承能够有所帮助

使用Object.create实现类式继承

下面是官网的一个例子

//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指向父类,如需要使用自身的构造,手动指定即可,如下

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新特性,将一个指定的对象的原型设置为另一个对象或者null

语法

Object.setPrototypeOf(obj, prototype)
obj为将要被设置原型的一个对象
prototype为obj新的原型(可以是一个对象或者null).

如果设置成null,即为如下示例

Object.setPrototypeOf({}, null);
感觉setPrototypeOf真是人如其名啊,专门搞prototype来玩。
那么这个玩意又是如何实现的呢?此时需要借助宗师__proto__

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

即把proto赋给obj.__proto__就好了。

使用extends关键字

熟悉java的同学应该非常熟悉这个关键字,java中的继承都是靠它实现的。
ES6新加入的class关键字是语法糖,本质还是函数.

在下面的例子,定义了一个名为Polygon的类,然后定义了一个继承于Polygon的类 Square。注意到在构造器使用的 super(),supper()只能在构造器中使用,super函数一定要在this可以使用之前调用。

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';
 }
}

使用关键字后就不用婆婆妈妈各种设置原型了,关键字已经封装好了,很快捷方便。

相关文章

  • window.location.hash知识汇总

    window.location.hash知识汇总

    本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下。
    2015-11-11
  • JavaScript 数组some()和filter()的用法及区别

    JavaScript 数组some()和filter()的用法及区别

    下面小编就为大家带来一篇JavaScript 数组some()和filter()的用法及区别。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 浅析JavaScript中的事件机制

    浅析JavaScript中的事件机制

    这篇文章主要介绍了JavaScript中的事件机制,即JS与HTML的一般交互,需要的朋友可以参考下
    2015-06-06
  • 深入理解javascript中return的作用

    深入理解javascript中return的作用

    这篇文章主要介绍了javascript中return的作用,有需要的朋友可以参考一下
    2013-12-12
  • JavaScript入门教程 Cookies

    JavaScript入门教程 Cookies

    使用 Cookies  我们已经知道,在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么?
    2009-01-01
  • 浅谈JavaScript 标准对象

    浅谈JavaScript 标准对象

    下面小编就为大家带来一篇浅谈JavaScript 标准对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 深入了解js原型模式

    深入了解js原型模式

    在js中,创建对象的方式有工厂模式和构造函数模式等,但是,构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用,就需要使用原型模式来创建对象。下面我们来了解一下吧
    2019-05-05
  • 详解JavaScript中基于原型prototype的继承特性

    详解JavaScript中基于原型prototype的继承特性

    这篇文章主要介绍了详解JavaScript中基于原型prototype的继承特性,JavaScript中缺少类等面向对象的重要特性,因而谈到继承也显得十分古怪...需要的朋友可以参考下
    2016-05-05
  • JavaScript中的lastIndexOf()方法使用详解

    JavaScript中的lastIndexOf()方法使用详解

    这篇文章主要介绍了JavaScript中的lastIndexOf()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 四种参数传递的形式——URL,超链接,js,form表单

    四种参数传递的形式——URL,超链接,js,form表单

    本文介绍了四种参数传递的形式,并给出了URL,超链接,js,form表单传参方式,需要的朋友可以参考下
    2015-07-07

最新评论