preface

The class keyword has been introduced in ECMAScript 6 with the ability to define classes. It actually uses the concept of prototypes and constructors.

The type of the class is function. The class is not promoted by declaration. The class is limited by block-level scope and can be passed as a parameter

class Person {
  constructor(name) {
    this._myName = name;
  }

  sayName() {
    console.log('My name is:' + this._myName);
  }

  set myName(value) {
    this._myName = value;
  }

  get myName() {
    return this._myName;
  }

  static sayHi() {
    console.log('Hi'); }}var a = new Person('knight');
a;

class Son extends Person {
  constructor(name, age) {
    super(name);
    this.age = age; }}Copy the code

Using classes has the following benefits:

  • No more references to clutter.prototype 了
  • ButtonThe declaration is directly “inherited”Widget, no longer need to passObject.create()To replace.ptototypeObject, and do not need to be set.__proto__orObject.setPrototypeOf()
  • Can be achieved bysuper()To implement relative polymorphism, so that any method can reference a method of the same name at the top of the prototype chain.
  • classLiteral syntax cannot declare properties, only methods. It rules out a lot of bad cases
  • Can be achieved byextendsNaturally extend object subtypes, even built-in object subtypes

Declaration of a class

We can declare a class using class declarations and class expressions:

/ / the class declaration
class Person1 {}
// Class expression
var Person2 = class {}
Copy the code

Class constructor

If we declare a class without defining a class constructor, we define the constructor as an empty function. If our class has a parent class, the parent constructor is automatically called.

Instantiating a Person with the new operator is equivalent to calling its constructor with new

Calling the class constructor with new does the following:

  • Create a new object in memory
  • Inside this new object[[Prototype]]Pointer (stores its prototype object, is not visible to the developer and can be passed in most browsers__proto__To access) assigned to the constructorprototypeattribute
  • Inside the constructorthisIs assigned to this new object (i.ethisPoint to a new object
  • Execute the code inside the constructor (add attributes to the new object)
  • If the constructor plays on a non-empty object, it returns that object; Otherwise return the newly created object

After instantiation, the class constructor takes a normal function as an attribute of the instance

methods

We can add methods and static class methods, as well as get and set accessors.

The method we add will be defined as a prototype method in the prototype object for all instances to call

The static methods will be defined in the.contructor constructor and can be called by class name

Accessors that are set are added to the instance object as properties of the instance

class Person {
  constructor(name) {
    this._myName = name;
  }

  sayName() {
    console.log('My name is:' + this._myName);
  }

  set myName(value) {
    this._myName = value;
  }

  get myName() {
    return this._myName;
  }

  static sayHi() {
    console.log('Hi'); }}var a = new Person('knight');
a;
Copy the code

Class inheritance

The extends keyword allows you to inherit not only classes but also constructors

function First(name) {
  this.name = name;
}
First.name = 'first';

class Second extends First {
  constructor(name, age) {
    super(name);
    this.age = age
  }
}
Second.name = 'second';

class Third extends Second {}
Third.name = 'third';

var a = new First('knight');
var b = new Second('knight'.19);
var c = new Third('knight'.18);
Copy the code

super

Methods of derived classes can reference their stereotypes through the super keyword.

There are a few points to note when using super:

  • This keyword can only be used in derived classes, and only inside class constructors, instance methods, and static methods
  • Cannot be quoted separatelysuperThe keyword
  • callsuper()The parent constructor is called and the returned instance is assigned tothis
  • super()If you need to pass parameters to the parent constructor, you need to pass them manually
  • If the class constructor is not defined, it is called when the derived class is instantiatedsuper(), and all arguments passed to the derived class
  • In a class constructor, cannot be called againsuper()Before quotingthis
  • If a constructor is shown defined in a derived class, it must either be called in its Chinasuper()Or you must return an object within it
class Person {
  constructor(name) {
    this._myName = name;
  }

  sayName() {
    console.log('My name is:' + this._myName);
  }

  set myName(value) {
    this._myName = value;
  }

  get myName() {
    return this._myName;
  }

  static sayHi() {
    console.log('Hi'); }}class Son extends Person {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayInfo() {
    super.sayName();
    console.log('My age is:' + this.age);
  }

  static sayHellow() {
    super.sayHi(); }}var a = new Son('knight'.18);
Copy the code