ES6 new features (Class) and inheritance (Extends) Related Concepts and Usage Analysis, es6extends

ES6 new features (Class) and inheritance (Extends) Related Concepts and Usage Analysis, es6extends

This article describes the concepts and usage of new features such as ES6 and Extends. We will share this with you for your reference. The details are as follows:

I. Class)

1. Basic syntax

The traditional method of JavaScript is to define and generate new objects through constructors. The following is an example.

function Point(x, y) {  this.x = x;  this.y = y;}Point.prototype.toString = function () {  return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);

ES6 provides a method closer to the traditional language, introducing the concept of Class as an object template. You can use the class keyword to define a class. Basically, the ES6 class can be regarded as just a syntactic sugar, and most of its functions can be done by ES5, the new class writing method only makes the object prototype writing clearer and more similar to the object-oriented programming syntax. The above code is rewritten with the "class" of ES6, which is as follows.

// Define class Point {constructor (x, y) {// constructor construction method this. x = x; this. y = y;} toString () {return '(' + this. x + ',' + this. y + ')';} var p = new Point (1, 2 );

The prototype attribute of the constructor continues to exist on the "class" of ES6. In fact, all methods of the class are still defined on the prototype attribute of the class.

2. constructor Method

The constructor method is the default method of the class. This method is automatically called when an object instance is generated using the new command. A class must have a constructor method. If it is not explicitly defined, an empty constructor method will be added by default.

Ii. Inheritance (Extends)

Classes can be inherited by using the extends keyword, which is much clearer and more convenient than es5.

Class ColorPoint extends Point {constructor (x, y, color) {super (x, y); // call the constructor (x, y) of the parent class this. color = color;} toString () {return this. color + ''+ super. toString (); // call the toString ()} of the parent class ()}}

In the code above, the super keyword is displayed in the constructor method and toString method, which indicates the constructor of the parent class and is used to create the this object of the parent class.

The subclass must call the super method in the constructor method. Otherwise, an error is returned when the instance is created. This is because the subclass does not have its own this object, but inherits the this object of the parent class and then processes it. If the super method is not called, The subclass will not get this object.

Iii. Native constructor inheritance

Native constructor is a built-in constructor used to generate data structures. ECMAScript's native constructor has roughly the following. Previously, these native constructors could not be inherited.

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()

ES6 allows inheritance of native constructor definition subclass, because ES6 first creates the instance object this of the parent class, and then modifies this with the constructor of the Child class, so that all behavior of the parent class can be inherited. The following is an example of inheriting arrays.

class MyArray extends Array {  constructor(...args) {    super(...args);  }}var arr = new MyArray();arr[0] = 12;arr.length // 1arr.length = 0;arr[0] // undefined

The code above defines a MyArray class that inherits the Array constructor, so you can generate an Array instance from MyArray. This means that ES6 can customize the subclass of the native data structure (such as Array and String), which ES5 cannot do.

Iv. Generator method of Class

If an asterisk (*) is added before a method, it indicates that the method is a Generator function.

class Foo {  constructor(...args) {    this.args = args;  }  * [Symbol.iterator]() {    for (let arg of this.args) {      yield arg;    }  }}for (let x of new Foo('hello', 'world')) {  console.log(x);}// hello// world

In the code above, there is an asterisk in front of the Symbol. iterator method of the Foo class, indicating that this method is a Generator function. The Symbol. iterator method returns a default traversal of the Foo class. The for... of loop will automatically call this traversal.

V. Static Class methods

The class is equivalent to the instance prototype. All methods defined in the class will be inherited by the instance. If the static keyword is added before a method, it means that the method will not be inherited by the instance, but called directly through the class, which is called "static method ".

class Foo {  static classMethod() {    return 'hello';  }}Foo.classMethod() // 'hello'var foo = new Foo();foo.classMethod()// TypeError: foo.classMethod is not a function

In the code above, there is a static keyword before the classMethod method of the Foo class, indicating that this method is a static method and can be called directly on the Foo class (Foo. classMethod () instead of calling it on the instance of the Foo class. If you call a static method on an instance, an error is thrown, indicating that the method does not exist.

The static method of the parent class, which can be inherited by the quilt class.

class Foo {  static classMethod() {    return 'hello';  }}class Bar extends Foo {}Bar.classMethod(); // 'hello'

In the code above, the parent class Foo has a static method, and the subclass Bar can call this method.