A simple understanding of classes in es6 (with examples)

This article brings you a simple understanding of classes in es6 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Class class

Basic concepts, recorded so that you can deepen your understanding later

Understand what a class is

## What is #class? You might as well write one and take a look at the prototype of

class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo. You can see that these three attributes are not traversable and there is an extra __proto__ prototype chain compared to the Demo class. Let’s take a look at a new Demo

let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

In fact, the Demo class is equivalent to the prototype of the Demo instance

The constructor in the class

In my opinion

    constructor() {
        this.a = 1;
        this.b = this.f;
    }

This part is equivalent to the role of the constructor in es5. In the process of new, this is assigned a value and this is returned to become an instance object.

Therefore, if you return an object in the constructor and it is not equal to null, then the instance object It is the value of return, which has the same effect as the es5 constructor

Method in class

    f() {
        return this;
    }

This method ultimately belongs to the prototype chain of the instance object

Non-traversable method, Therefore, it can also be used by instance objects

New knowledge points

The static method of class

means that the method will not be inherited by the instance, but will be called directly through the class

class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

This in the static method points to the class itself, while

this.a = this points to the instance object itself

Static methods can be inherited by subclasses

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

Static methods can be called from the super object

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

Class has only static methods internally, no static attributes

Immediate execution of class expressions

var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }

}(1)

o.a;             // 1

Class class declaration does not have variables Improving the

new.target attribute

is to return an object after new. For example, the constructor f in es5 does not return undefined through the new call, but returns the constructor itself through the new call

function f() {
    return new.target;
}
console.log((new f()) === f);       //true

In the class class, the class itself is returned. This is the same as in the static method; new will return which class it is.

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

The above is the detailed content of A simple understanding of classes in es6 (with examples). For more information, please follow other related articles on the PHP Chinese website!