Understanding Javascript_11_constructor implementation principle_javascript skills

What is constructor

To understand simply, constructor refers to the constructor of an object. Please see the following example:

Copy code The code is as follows:

function Foo(){};
var foo = new Foo();
alert(foo.constructor);//Foo
alert(Foo.constructor);//Function
alert(Object.constructor);//Function
alert(Function.constructor);//Function

For foo.constructor is Foo, I think it should be easy to understand, because the constructor of foo is Foo. I think there is nothing controversial about the fact that the constructor of Foo, Object, and Function is Function. (Because Foo, Object, and Function are all function objects, and because all function objects are constructed from the Function object, their constructor is Function. For details, please refer to "js_Function Object")

The relationship between Prototype and Constructor

Copy code The code is as follows:

function Dog() {}
alert(Dog === Dog.prototype.constructor);//true

In JavaScript, each function has an attribute named "prototype", which is used to reference the prototype object. This prototype object in turn has a property called "constructor" which in turn refers to the function itself. This is a circular reference, as shown in the figure:

Where does the constructor attribute come from?
Let’s take a look at the construction process of Function constructing String:

Note: Function constructor The process of any function object is the same, so whether it is a built-in object such as String, Boolean, Number, etc., or a user-defined object, the construction process is the same as the above figure. String here is just a representative!
As can be seen in the figure, constructor is generated by Function when it creates a function object. As mentioned in the 'Relationship between prototype and constructor', constructor is an attribute in the function object prototype chain. That is String=== String.prototype.constructor.

I also want to use a piece of code to prove that the theory is correct:

Copy the code The code is as follows:

function Person(){}
var p = new Person();
alert(p.constructor);//Person
alert(Person.prototype.constructor) ;//Person
alert(Person.prototype.hasOwnProperty('constructor'));//true
alert(Person.prototype.isPrototypeOf(p));//true
alert(Object.prototype .isPrototypeOf(p));//true
alert(Person.prototype == Object.prototype);//false

By now, you will find that this is the same as the previous "Prototype Chain" The default prototype in "Implementation Principles" points to Object.prototype, which conflicts. Obviously, the theory at that time was not very comprehensive.

Special Object
Careful readers may ask this question, your theory does not apply to Object. Because the following code conflicts with your theory above:

Copy code The code is as follows:

alert(Object.prototype.hasOwnProperty('constructor'));//true
alert(Object.prototype.hasOwnProperty('isPrototypeOf'));//true, according to the above theory, false should be returned here

Is this really the case? no! Then let’s take a look at how special Objects are processed:

You will find that the principle of this picture is the same as the principle of the above picture. This can correctly explain that Object.prototype.hasOwnProperty('isPrototypeOf') is true!

constructor exploration

Copy code The code is as follows:

function Animal(){}
function Person(){}
var person = new Person();
alert(person.constructor); //Person

Based on the content of the previous section, can you correctly understand the result of this code? After thinking about it, take a look at its memory representation:

This picture clearly shows the process of Function constructing Animal and Person. It also shows the relationship between the instance person and Person.

Go a little deeper, the code is as follows:

Copy the code The code is as follows:

function Animal(){}
function Person(){}
Person.prototype = new Animal()
var person = new Person()
alert(person) .constructor); //Animal

이때 person의 생성자는 어떻게 설명할까요?

참고: 그림의 점선은 Person의 기본 프로토타입 포인터를 나타냅니다(참고용). 하지만 우리는 Person.prototype을 새로운 Animal로 지정했습니다.
이때 Person의 프로토타입은 Animal의 인스턴스를 가리키므로 person의 생성자는 Animal의 생성자가 됩니다.

결론: 생성자의 원리는 매우 간단합니다. 즉, 객체의 프로토타입 체인에서 생성자 속성을 찾는 것입니다.

참고: 이 기사의 내용을 정확하게 이해할 수 없다면 이전 장의 내용을 검토하시기 바랍니다.