使用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'; } }
使用关键字后就不用婆婆妈妈各种设置原型了,关键字已经封装好了,很快捷方便。
本文向大家介绍Javascript中3种实现继承的方法和代码实例,包括了Javascript中3种实现继承的方法和代码实例的使用技巧和注意事项,需要的朋友参考一下 继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制。 Javascript中实际上是没有继承的概念的,但是我们可以通过一
本文向大家介绍JavaScript实现继承的4种方法总结,包括了JavaScript实现继承的4种方法总结的使用技巧和注意事项,需要的朋友参考一下 JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。 1、原型链继承: 优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。 缺点:子类区别于父类的属性和方法,必须在Sub.
本文向大家介绍JavaScript中实现继承的三种方式和实例,包括了JavaScript中实现继承的三种方式和实例的使用技巧和注意事项,需要的朋友参考一下 javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式。 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的
本文向大家介绍JavaScript的9种继承实现方式归纳,包括了JavaScript的9种继承实现方式归纳的使用技巧和注意事项,需要的朋友参考一下 不同于基于类的编程语言,如 C++ 和 Java,JavaScript 中的继承方式是基于原型的。同时由于 JavaScript 是一门非常灵活的语言,其实现继承的方式也非常多。 首要的基本概念是关于构造函数和原型链的,父对象的构造函数称为Parent
本文向大家介绍js中实现继承的五种方法,包括了js中实现继承的五种方法的使用技巧和注意事项,需要的朋友参考一下 借用构造函数 这种技术的基本思想很简单,就是在子类型构造函数的内部调用超类型的构造函数。另外,函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。 从中可以看到,继承来的只有实例属性,而原型上的属性是访问不到的。这种模式
本文向大家介绍JavaScript是如何实现继承的(六种方式),包括了JavaScript是如何实现继承的(六种方式)的使用技巧和注意事项,需要的朋友参考一下 前言:大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠 原型链 来实现。 1.原型链 基本思想:利用原型让一个引用类型继承另外一个