preface

The purpose of writing this series of articles on JavaScript simple meal is to record various knowledge points when reading and learning the book JavaScript advanced programming (4th Edition). Although it is a note and summary of reading, I hope it is light, concise and sharp, will not cause reading fatigue, and can take a light bath of knowledge points in fragmented time and leisure. Each article is only for a small part to explain and sort out, so as to achieve the purpose of personal review, summary and sharing knowledge.

1, Class constructor and its instantiation

The constructor keyword is used to create a constructor for a class within a class definition block. The method name constructor tells the interpreter that this function should be called when creating a new instance of the class using the new operator. The definition of constructor is not necessary. Not defining a constructor is equivalent to defining a constructor as an empty function.

Instantiating Person with the new operator is equivalent to calling its constructor with new. Calling the constructor of the class with new will perform the following operations:

1. Create an object in memory
2. The [[prototype]] pointer inside the new object is assigned to the prototype attribute of the constructor.
3. This inside the constructor is assigned to the new object (that is, this points to the new object).
4. Execute the code inside the constructor (that is, add properties to the new object).
5. Constructor returns the new object just created.

Here is an example:

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

let p = new Person();

console.log(p.name); // Lucy

Of course, you can also pass in parameters when you want to create an instance. When the class is instantiated, the parameters passed in will be used as the parameters of the construct. As follows:

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

let p = new Person('Jack');
console.log(p.name); // Jack

There are two main differences between class constructors and ordinary constructors we have seen before:

1. Calling a class constructor must use the new operator.
2. If the normal constructor does not use the new call, it will take the global this (usually the window this) as the internal object.

If you forget to use new when calling the constructor, an error will be thrown:

function Person() {}
class Animal{}

let p = Person();
let a = Animal(); // TypeError: Class constructor Animal cannot be invoked without 'new'

2, Treat classes as special functions

There is no formal class of this type in ECMAScript. In all respects, the ECMAScript class is a special function. After declaring a class, detect the class identifier through the typeof operator, which will indicate that it is a function:

class Person{}

console.log(typeof Person) // function

The class identifier has a prototype attribute, and the prototype also has a constructor attribute pointing to the class itself:

class Person{}

console.log(Person.prototype); // { constructor: f() }
console.log(Person === Person.prototype.constructor) // true

Like ordinary constructors, you can use the instanceof operator to check whether the constructor prototype exists in the prototype chain of the instance to determine whether the object is an instance of the class.

class Person{}

let p  = new Person();
console.log(p instanceof Person); // true

As mentioned earlier, the class itself has the same behavior as a normal constructor. In the context of a class, the class itself is treated as a constructor when new is called. The point is that the constructor method defined in the class will not be treated as a constructor, and will return false when using the instanceof operator on it. However, if the class constructor is directly used as a normal constructor when creating an instance, the instanceof operator will return true.

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

let p1  = new Person();
console.log(p1.constructor === Person); // true
console.log(p1 instanceof Person); // true
console.log(p1 instanceof Person.constructor); // false

let p2 = new Person.constructor();
console.log(p2.constructor === Person); // false
console.log(p2 instanceof Person); // false
console.log(p2 instanceof Person.constructor); // true

In addition, classes are first-class citizens of JavaScript, so you can pass classes as parameters like other object or function references:

let classList = [
    class Person {
        constructor(name) {
            this.name = name;
        }
    }
]

function createInstance(classDefinition, property) {
    return new classDefinition(property);
}

let p = createInstance(classList[0], 'Lucy');

console.log(p.name); // Lucy

Similar to calling a function expression immediately, a class can also be instantiated immediately:

let p = new class Person{
    constructor() {
        this.name = 'Lucy';
    }
}();

console.log(p.name); // Lucy

summary

The above is what we want to talk about today. Today, we briefly introduce the constructor of a class, the difference between a class and an ordinary constructor, the specific operation behind the instantiation of a class, and the similar use methods of a class and other objects and functions. Next, let's introduce class inheritance. Sprinkle flowers~