Home>

In JavaScript, the "famous" shears between the prototype, constructor, and __proto__ have a chaotic triangle relationship,The landlord is based on his simple understanding of them,Come to rough geography to remember,Anything wrong is still looking right.

The relationship in javascript is many and messy.The scope chain is a one-way chain relationship,Fairly simple and clear;The calling relationship of this mechanism,Slightly complicatedAnd regarding the prototype,It is the triangle relationship of prototype, prototype, and constructor.This article first uses a picture to open the sect of justice.Then explain the triangle relationship of the prototype in detail

concept

of The complex relationship in the picture above,The source is actually two lines of code

function foo () ();var f1=new foo;

【Constructor】

of The function used to initialize a newly created object is a constructor.In the example,foo () function is a constructor

[Instance object]

of The object created by the new operation of the constructor is an instance object.You can use a constructor,Construct multiple instance objects

function foo () {};
var f1=new foo;
var f2=new foo;
console.log (f1 === f2);//false

[Prototype object and prototype]

The constructor has a prototype property that points to the prototype object of the instance object.Multiple objects instantiated by the same constructor have the same prototype object.Prototype objects are often used for inheritance

function foo () {};
foo.prototype.a=1;
var f1=new foo;
var f2=new foo;console.log (foo.prototype.a);
//1
console.log (f1.a);//1
console.log (f2.a);//1

[Constructor]

The prototype object has a constructor property that points to the corresponding constructor of the prototype object

function foo () {};
console.log (foo.prototype.constructor === foo);//true

Since the instance object can inherit the properties of the prototype object,So the instance object also has the constructor property, which also points to the constructor corresponding to the prototype object

function foo () {};
var f1=new foo;
console.log (f1.constructor === foo);//true

[Proto]

The instance object has a proto attribute, which points to the prototype object corresponding to the instance object

function foo () {};
var f1=new foo;
console.log (f1 .__ proto__ === foo.prototype);//true

Description

The concept is finished,The relationship illustrated is now explained in detail

function foo () {};
var f1=new foo;

[Part I:foo]

The instance object f1 is created by the new operation of the constructor foo ().The prototype object of the constructor foo () is foo.prototype;the instance object f1 also points to the prototype object foo.prototype via the __proto__ attribute.

function foo () {};
var f1=new foo;
console.log (f1 .__ proto === foo.prototype);//true

The instance object f1 itself does not have a constructor property, but it can inherit the constructor property of the prototype object foo.prototype

function foo () {};
var f1=new foo;console.log (foo.prototype.constructor === foo);//true
console.log (f1.constructor === foo);//true
console.log (f1.hasownproperty ("constructor"));//false

The figure below is the console effect of the instance object f1

[Part II:object]

foo.prototype is the prototype object of f1,It is also an instance object.In fact, any object can be regarded as an object instantiated through the new operation of the object () constructor. So, foo.prototype is an instance object.Its constructor is object () and the prototype object is object.prototype. Correspondingly, the prototype property of the constructor object () points to the prototype object object;the prototype property of the instance object foo.prototype also points to the prototype object object

function foo () {};
var f1=new foo;
console.log (foo.prototype .__ proto__ === object.prototype);//true

The instance object foo.prototype itself has a constructor property, so it will override the constructor property inherited from the prototype object object.prototype

function foo () {};
var f1=new foo;
console.log (foo.prototype.constructor === foo);//true
console.log (object.prototype.constructor === object);//true
console.log (foo.prototype.hasownproperty ("constructor"));//true

The figure below is the console effect of the instance object foo.prototype

console.log (object.prototype .__ proto__ === null);//true

[Part III:function]

already As mentioned earlier,Functions are also objects,It's just an object with special functions.Any function can be seen as the result of instantiation through the new operation of the function () constructor

If you consider the function foo as an instance object,Its constructor is function (), its prototype object is function.prototype;similarly, the constructor of function object is also function (), its prototype object is function.prototype

function foo () {};
var f1=new foo;console.log (foo .__ proto__ === function.prototype);//true
console.log (object .__ proto__ === function.prototype);//true

The constructor property of the prototype object function.prototype points to the constructor function ();the instance object object and foo itself do not have a constructor property, and need to inherit the constructor property of the prototype object function.prototype

function foo () {};
var f1=new foo;
console.log (function.prototype.constructor === function);//true
console.log (foo.constructor === function);//true
console.log (foo.hasownproperty ("constructor"));//false
console.log (object.constructor === function);//true
console.log (object.hasownproperty ("constructor"));//false

All functions can be seen as instantiated objects of the new operation of the constructor function ().Then, the function can be seen as the result of the instantiation of calling its own new operation

So if function is an instance object,Its constructor is function and its prototype object is function.prototype

console.log (function .__ proto__ === function.prototype);//true
console.log (function.prototype.constructor === function);//true
console.log (function.prototype === function);//true

If function.prototype is used as an instance object,What is its prototype object?As before,All objects can be viewed as the result of instantiation of the new operation of the object () constructor.So, the prototype object of function.prototype is object.prototype, and its prototype function is object ()

console.log (function.prototype .__ proto__ === object.prototype);//true

Introduction Introduced in the second part,The prototype object of object.prototype is null

console.log (object.prototype .__ proto__ === null);//true

to sum up

[1] Functions (functions are also functions) are the result of new function, so functions can be used as instance objects.Its constructor is function () and the prototype object is function.prototype

[2] Objects (functions are also objects) are the result of new object, so objects can be used as instance objects.Its constructor is object () and the prototype object is object.prototype

[3] The prototype object of object.prototype is null

  • Previous C # method to clear cookie cache in WebBrowser
  • Next Javascript Intermediate Grammar Quick Start