Is es6 class a function?

es6 class is a function. In es6, class (class) was introduced as a template for objects. Classes can be defined through the class keyword. The syntax is "class class name {...}; the essence of class is function (function), which is a syntactic sugar. The bottom layer is created through the "constructor".

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

es6 class is a function.

In ES6, class (class) is introduced as a template for objects, and classes can be defined through the class keyword.

## The essence of #class is function.

It can be regarded as a syntax sugar, and its bottom layer is created through

constructor, making the object prototype written more clearly and more like The syntax of object-oriented programming.

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    return this.name;
}

const xiaoming = new Person('小明', 18);
console.log(xiaoming);

The above code is implemented using ES6's

class, which is the following

class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    sayName() {
      return this.name;
    }
}
const xiaoming = new Person('小明', 18)
console.log(xiaoming);
// { name: '小明', age: 18 }

console.log((typeof Person));
// function
console.log(Person === Person.prototype.constructor);
// true

constructor method, this is the constructor method, and the this keyword represents the instance Object. The data type of a class is a function, and the class itself points to the constructor.

When defining a class, there is no need to add function in front, and there is no need to separate the methods with commas. If you add it, an error will be reported.

All methods of a class are defined on the prototype attribute of the class.

class A {
    constructor() {}
    toString() {}
    toValue() {}
}
// 等同于
function A () {
    // constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};

Calling a method on an instance of a class is actually calling a method on the prototype.

let a = new A();
a.constructor === A.prototype.constructor // true

Instance of class

Unless the attributes of the instance are explicitly defined on itself (i.e., defined on this object), they are defined on the prototype (i.e., defined on the class) .

Note:

1. There is no variable promotion for class

new A(); // ReferenceError
class A {}

Because ES6 will not promote the class declaration to the head of the code. The reason for this provision is related to inheritance Related, you must ensure that the subclass is defined after the parent class.

{
  let A = class {};
  class B extends A {}
}

The above code will not report an error, because when B inherits A, A already has a definition. However, if there is class promotion, the above code will An error is reported because class will be promoted to the head of the code, but the let command is not promoted, so when B inherits A, Foo has not been defined.

2. If the method this points to the class contains this, which points to the instance of the class by default. However, you must be very careful. Once this method is used alone, an error is likely to be reported.

Inheritance

Class can pass the extends keyword Implement inheritance

class Animal {}
class Cat extends Animal { };

The above code defines a Cat class, which inherits all the properties and methods of the Animal class through the extends keyword. But since no code is deployed, the two classes are exactly the same, which is equivalent to copying an Animal class. Next, we add code inside Cat.

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

The super keyword appears in both the constructor method and the toString method. It represents the constructor of the parent class here and is used to create a new this object of the parent class.

Subclasses must call the super method in the constructor method, otherwise an error will be reported when creating a new instance. This is because the subclass's own this object must first be shaped by the parent class's constructor to obtain the same instance attributes and methods as the parent class, and then it is processed and the subclass's own instance attributes and methods are added. If the super method is not called, the subclass will not get this object.

class Animal { /* ... */ }

class Cat extends Animal {
  constructor() {
  }
}

let cp = new Cat();
// ReferenceError

Cat inherits the parent class Animal, but its constructor does not call the super method, causing the new instance to report an error.

If the subclass does not define a constructor method, this method will be added by default. The code is as follows. In other words, no matter whether it is explicitly defined or not, any subclass has a constructor method.

class Cat extends Animal {

}
// 等同于

class Cat extends Animal {
    constructor(...args) {
        super(...args);
    }
}

Another thing to note is that the es5 constructor can access this before calling the parent constructor, but the es6 constructor cannot access this before calling the parent constructor (ie super).

class A {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class B extends A {
  constructor(x, y, name) {
    this.name = name; // ReferenceError
    super(x, y);
    this.name = name; // 正确
  }
}

In the above code, the constructor method of the subclass uses the this keyword before calling super, and an error is reported. However, it is correct to put it after the super method.

The static methods of the parent class will also be inherited by the subclass.

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

【Related recommendations:

javascript video tutorial, web front-end】

The above is the detailed content of Is es6 class a function?. For more information, please follow other related articles on the PHP Chinese website!