Constructors, stereotypes, and stereotype chains

• Constructors, stereotypes, and stereotype chains
  • The constructor
  • prototype
  • The constructor property
  • __proto__
  • Prototype chain

The constructor

Constructors are provided in ECMAScript to create new objects. But a constructor is a function in itself, no different from a normal function, except that it is usually capitalized, but not necessary, to distinguish it.

A function is a constructor when called by the new keyword.

function f(name) {
    console.log("execute");
    this.name = name;
}

var k = new f("k"); // execute
console.log(k); // {name: "k"}
var h = f("h"); // execute
console.log(h); // undefinedCopy the code

As can be seen from the above code:

• The use of f as a constructor does not affect whether the initial letter is capitalized.
• Calling a function without using new is a normal function, executing the internal code directly. With new, the function’s role becomes that of a constructor, creating an object and returning it.

Objects are created by constructors using the new keyword, so how?

Internal implementation mechanism of the new keyword:

• Create a new object;
• Assign the scope of the constructor to the new object;
• Execute the code in the constructor;
• Return a new object

var obj = {}; // create an empty object obj.__proto__ = constructive.prototype; // Add the __proto__ attribute and point to the constructor's prototype attribute. constructor.call(this); // bind this return obj;Copy the code

prototype

Each function has a Prototype attribute.

function Foo() {}

Foo.prototype; // {constructor,__proto__}Copy the code

Whenever a new function is created, a prototype property is created for the function according to a specific set of rules. This property points to the function’s prototype object.

So what is this created prototype object?

{constructor: ƒ Foo(), __proto__: Object}Copy the code

The constructor property

Each stereotype object has a constructor attribute

After a custom constructor is created, its prototype object only acquires the constructor attribute by default. This property solves the object recognition problem of determining which constructor the instance was created by.

Foo.prototype.constructor === Foo; //  trueCopy the code

As mentioned earlier, stereotype objects only get the constructor attribute by default, but other attributes of the stereotype (such as __proto__) come from this way, which brings us to the __proto__ pointer.

__proto__

Each instance has a __proto__ pointer to the constructor’s prototype object.

var foo = new Foo();
foo.__proto__ === Foo.prototype; //trueCopy the code

The prototype object of the constructor mentioned above is itself an instance, so it has a __proto__ pointer inside it.

Want to know what the constructor’s prototype object is created from?

We can use what we’ve just learned about object-oriented problem judgment. We want to know constructor from the instance’s prototype object (since each prototype object has a constructor property), so we can do this:

Prototype.__proto__. Constructor // ƒ Object() {[native code]}Copy the code

The prototype of the constructor’s prototype is generated by Object. Therefore, other methods of constructing prototype objects are inherited from Object.

Foo.prototype.__proto__ === Object.prototype; // trueCopy the code

Prototype chain

The theory of prototype chains is based on the relationship between constructors, instances, and stereotypes mentioned above:

• Each constructor has a prototype object
• Each stereotype object contains a constructor property that points to the constructor
• Each instance contains a pointer to the prototype object__proto__Pointer to the

The most important of these is the third one, which is a chain of examples and prototypes depending on this relationship.

The prototype of the constructor is generated by Object, so what generates the prototype of Object? And where does the prototype chain end?

Object.prototype.__proto__ // null
null.__proto__; // Uncaught TypeError: Cannot read property '__proto__' of null
// game overCopy the code

The endpoint of the stereotype is NULL, because NULL has no proto attribute.

Wow, that feels right in line with the Genesis story — “Null in the beginning.”

Typeof NULL returns object. This is an ECMAScript design error

Finally, a picture is worth a thousand words: