3 inheritance implementation methods in javascript_Basic knowledge

Use Object.create to implement class inheritance

The following is an example from the official website

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

At this time, the constructor of the Rectangle prototype points to the parent class. If you need to use your own constructor, you can specify it manually, as follows

Rectangle.prototype.constructor = Rectangle;

Use util.inherites that comes with the utilities tool package

Grammar

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); // true
console.log(MyStream.super_ === EventEmitter); // true

stream.on('data', (data) => {
 console.log(`Received data: "${data}"`);
})
stream.write('It works!'); // Received data: "It works!"

This is also a very 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);
};

Among them, Object.setPrototypeOf is a new feature of ES6, which sets the prototype of a specified object to another object or null

Grammar

Object.setPrototypeOf(obj, prototype)
obj is an object that will be prototyped
prototype is the new prototype of obj (can be an object or null).

If set to null, it is the following example

Object.setPrototypeOf({}, null);
I feel that setPrototypeOf really lives up to its name, specializing in prototypes for fun.
So how is this thing implemented? At this time, you need to use the master __proto__

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

Just assign proto to obj.__proto__.

Use the extends keyword

Students who are familiar with Java should be very familiar with this keyword. Inheritance in Java is realized by it.
The newly added class keyword in ES6 is syntactic sugar, but its essence is still a function.

In the following example, a class named Polygon is defined, and then a class Square that inherits from Polygon is defined. Note that super() and supper() used in the constructor can only be used in the constructor, and 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 set up various prototypes. The keywords have been encapsulated, which is very fast and convenient.