Three inheritance implementation methods in javascript and javascript3

Three inheritance implementation methods in javascript and javascript3

Implement class inheritance using Object. create

The following is an example of the official website.

//Shape - superclassfunction Shape() { this.x = 0; this.y = 0;}Shape.prototype.move = function(x, y) {  this.x += x;  this.y += y;  console.info("Shape moved.");};// Rectangle - subclassfunction 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."

In this case, the constructor of the Rectangle prototype points to the parent class. If you need to use its own structure, manually specify the class as follows:

Rectangle. prototype. constructor = Rectangle;

Use util. inherites that comes with the utilities Toolkit

Syntax

Util. inherits (constructor, superConstructor)
Example

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); // trueconsole.log(MyStream.super_ === EventEmitter); // truestream.on('data', (data) => { console.log(`Received data: "${data}"`);})stream.write('It works!'); // Received data: "It works!"

It is also a simple example. In fact, the source code uses the new features of ES6. Let's take a look.

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 is the new feature of ES6. It sets the prototype of a specified Object to another Object or null.

Syntax

Object. setPrototypeOf (obj, prototype)
Obj is an object of the prototype to be set.
Prototype is a new prototype of obj (it can be an object or null ).

If it is set to null, the following example is used:

Object. setPrototypeOf ({}, null );
It seems that setPrototypeOf is really just like its name. It focuses on prototype.
So how is this stuff implemented? In this case, you need to use the example _ proto __

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

Grant proto to obj. _ proto.

Use extends keywords

Students familiar with java should be very familiar with this keyword. Inheritance in java relies on it.
The new class keyword of ES6 is syntactic sugar, essence or function.

In the following example, a class named Polygon is defined and a Square class inherited from Polygon is defined. Note that the super () used in the constructor can only be used in the constructor. The super function must be called before this can be used.

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

After using keywords, you don't need to use various prototype settings. The keywords have been encapsulated, which is fast and convenient.

Articles you may be interested in:

• A good article about javascript-prototype inheritance
• Prototype and Inheritance of JS required for front-end development
• Summary of several inherited usage methods in js (apply, call, prototype)
• Two inheritance methods of js
• Basic explanation of JavaScript inheritance (prototype chain, borrow constructor, hybrid mode, original type inheritance, parasitic inheritance, and parasitic combined inheritance)
• Let's talk about javascript prototype inheritance.
• Prototype chain inheritance instance of js Object Inheritance
• Examples of JS inheritance usage
• Summary of six modes inherited by javascript