class

When I first learned the word “class”, I was still a little ignorant. I was always thinking, what is a class on earth? Classes, it turns out, are the new basic syntactic sugar structures in ECMAScript that actually use the concepts of stereotypes and constructors. Let’s start with the class summary

1. Know the class

There are two main ways to define classes: class lives and class expressions. Class expressions are not promoted when declared, functions are not promoted when defined, and classes are block-level scoped. The first letter of a class name is usually capitalized.

After assigning a class expression to a variable, the name string of the class expression can be obtained through the name attribute. However, this identifier (class name) cannot be accessed outside the class expression scope because the class is block-level scoped.

let Person = class PersonName {}let p = new Person();
console.log(Person.name);    // PersonName
console.log(PersonName);   / / an error
Copy the code

2. Class constructor

The constructor keyword is used to create class constructors within the class definition block. In fact, when I first saw this I was thinking what’s the difference between a class constructor and a construcor inside a constructor? This will be summarized later. In the class constructor, the method name constructor tells the interpreter that this function should be called when a new instance of the class is created using the new operation. If the constructor is not defined, it is equivalent to defining the constructor as an empty function.

A. instantiation

Calling the class constructor with new does the following:

  1. Create a new object in memory
  2. Inside this new object[[Prototype]]The pointer is assigned to the constructorprototypeattribute
  3. This inside the constructor is assigned to the new object (that is, this refers to the new object)
  4. Execute the code inside the constructor (add attributes to the object)
  5. If the constructor returns a non-empty object, that object is returned; Otherwise return the newly created object. important

Instantiating Person with the new operator is equivalent to new calling its constructor. In point 5 above, the constructor is defined as an empty function and returns the newly created object, so p1===p2 is true.

class Person {}let p1 = new Person();
let p2 = new Person().constructor;
console.log(p1 === p1);   //true
Copy the code

console.log(p1);The print result is as follows:

By default, the class constructor returns this object after execution. The object returned by the constructor is used as the instantiated object, and if no reference is made to the newly created this object, it is destroyed. However, if you return an object other than this, the object cannot be detected as associated with the class by the Instanceof operator because the object’s prototype pointer has not been modified.

I understand this passage through the following example. When p1 is instantiated, no value is returned. By default, the newly created object is returned. P2 instanceof Person is false because it passed a true argument and the return value was changed to this.

class Person {
    constructor(override) {
        this.foo = 'foo';
        if (override) {
            return {
                bar: 'bar'}}}}let p1 = new Person();
let p2 = new Person(true);
console.log(p1 instanceof Person);  // true
console.log(p2 instanceof Person);  // false
Copy the code

The main difference between class constructors and constructors is that class constructors must be called using the new operator. A normal constructor that does not use a new call takes the global this(usually window) as its internal object. Class constructors that do not use new report errors.

function Person {}
class Ball {}
let p = Person();  // Build instance window as this
let b = Ball();    // No new, error reported
// Create a new instance with a reference to the class constructor
let b1 = new Ball();  let b2 = new b1.constuctor;
Copy the code

Class constructors become normal instance methods when instantiated (when new is still needed). Therefore, it can be referenced on the instance after instantiation.

B. Treat classes as special functions

The constructor method defined in the class is not treated as a constructor (at this point Person.constructor is a normal function) and returns false when the instanceof operator is used on it. However, if you use the class constructor directly as a normal constructor when creating the instance. The return value of the instanceof operator is reversed:

class Person {}
let p1 = new Person();
console.log(p1.constructor === Person);         // true 
console.log(p1 instanceof Person);              // true
console.log(p1 instanceof Person.constructor);  // False This constructor will not be treated as a constructor
let p2 = new Person.constructor();
console.log(p2.constructor === Person);         // false
console.log(p2 instanceof Person);              // false
console.log(p2 instanceof Person.constructor);  // true
Copy the code

For p1

instanceofThe internal mechanism for detecting constructors in theprototypeProperty appears on the stereotype chain of an instance object. By the above top1As you can see,PersonThere is inp1, so returns true, andPerson.constructorDoes not exist, so return false.

conclusion

Class constructors are similar to constructors. They are essentially the same, except that the new operator must be used when the class constructor is called, and the class constructor is prettier when written.

After taking notes on classes today, I feel I have a deeper understanding of constructors. If there is any problem, please big brothers give advice!