Introduction of prototype, __PROTO__, Constructor, Object and function relations in JS
An Introduction to Prototype, __proto__ and object, function relations
function, Object:js functions object. Prototype, each function object has a display prototype property that represents the prototype of the object (the Function.prototype function object is an exception and there is no prototype attribute). __PROTO__: Each object has an internal hidden property named __proto__ that points to the prototype object it corresponds to (Chrome, Firefox name is __proto__, and can be accessed). The prototype chain is based on __proto__ (note: Not based on the function object's attribute prototype). For the function object mentioned above, let's take a look at the following example to illustrate:
var O1 = {};
var O2 =new Object ();
Function F1 () {}
var F2 = function () {}
var F3 = new Function (' str ', ' Console.log (str) ');
F3 (' Aabb '); Aabb
Console.log (' typeof object: ' +typeof object); function
Console.log (' typeof function: ' +typeof function); function
Console.log (' typeof O1: ' +typeof O1); Object
Console.log (' typeof O2: ' +typeof O2); Object
Console.log (' typeof F1: ' +typeof F1); function
Console.log (' typeof F2: ' +typeof F2); function
Console.log (' typeof F3: ' +typeof F3); function
- Usually we think O1, O2 is the object, namely the ordinary object; F1, F2, and F3 are functions.
- But in fact functions are objects, which are constructed by function,
- F3 this is the same way the object is created. F1, F2, and finally, like F3, have function.
- F1, F2, and F3 are function objects, and function and object are functional objects themselves.
Each object (except null) in JS is associated with another object, and the relationship between function, object, Prototype, __proto__ object is analyzed using the following example.
function Animal () {
}
var anim = new Animal ();
Console.log (' ***********animal anim proto***************** ');
Console.log (' typeof animal.prototype: ' +typeof animal.prototype); Object
Console.log (' Anim.__proto__===animal.prototype: ' + (Anim.__proto__===animal.prototype)); True
Console.log (' Animal.__proto__===function.prototype: ' + (Animal.__proto__===function.prototype)); True
Console.log (' Animal.prototype.__proto__===object.prototype: ' + (Animal.prototype.__proto__===object.prototype)); True
Console.log (' ***********function proto***************** ');
Console.log (' typeof function.prototype: ' +typeof function.prototype); function
Console.log (' typeof function.__proto__: ' +typeof function.__proto__); function
Console.log (' typeof Function.prototype.prototype: ' +typeof Function.prototype.prototype); Undefined
Console.log (' typeof function.prototype.__proto__: ' +typeof function.prototype.__proto__); Object
Console.log (' function.prototype===function.__proto__: ' + (function.prototype===function.__proto__)); True
Console.log (' ***********object proto***************** ');
Console.log (' typeof object.prototype: ' +typeof object.prototype); Object
Console.log (' typeof object.__proto__: ' +typeof object.__proto__); function
Console.log (' Object.prototype.prototype: ' +object.prototype.prototype); Undefied
Console.log (' Object.prototype.__proto__===null: ' + (object.prototype.__proto__===null)); Null
Console.log (' ***********function Object proto Relationship ***************** ');
Console.log (' function.prototype===object.__proto__: ' + (function.prototype===object.__proto__)); True
Console.log (' function.__proto__===object.__proto__: ' + (function.__proto__===object.__proto__)); True
Console.log (' Function.prototype.__proto__===object.prototype: ' + (function.prototype.__proto__=== Object.prototype)); True
/********************* system-defined object array, Date ****************************/
Console.log (' **************test Array, date**************** ');
var array = new Array ();
var date = new Date ();
Console.log (' Array.__proto__===array.prototype: ' + (Array.__proto__===array.prototype)); True
Console.log (' Array.__proto__===function.prototype: ' + (Array.__proto__===function.prototype)); True
Console.log (' Date.__proto__===date.prototype: ' + (Date.__proto__===date.prototype)); True
Console.log (' Date.__proto__===function.prototype: ' + (Date.__proto__===function.prototype)); True
Function, Object, Prototype, __proto__ memory diagram
The memory graph above and the stack structure can refer to the article javascript_01_ Understanding memory allocation.
Description of the heap area diagram:
The Function.prototype function object graph internally represents the prototype property's red dashed box, just to show that this property does not exist.
through the function, Object, prototype diagram, you can draw a few points:
- All objects, including the prototype chain of the function object, eventually point to Object.prototype, and Object.prototype.__proto__===null, the prototype chain ends.
- Animal.prototype is an ordinary object.
- Object is a function object, which is also a functions construct, and Object.prototype is a normal object.
- OBJECT.PROTOTYPE.__TYPE__ points to null.
- Function.prototype is a function object, which says that the function object has a display prototype property, but Function.prototype has no prototype attribute, that is Function.prototype.prototype ===undefined, all Function.prototype function objects are a special case and have no prototype properties.
- Object is a function object, but Object.prototype does not point to Function.prototype, or Object.prototype!==function.prototype.
Relationship between two prototype and constructor
Introduction
In JavaScript, each function object is named "Prototype" (The Function.prototype function object is an exception, there is no prototype property) and is used to refer to the prototype object. This prototype object is also known as the "constructor" property, which in turn references the function itself. This is a circular reference (i.e. animal.prototype.constructor===animal). Use the following example to analyze the relationship between prototype and constructor with memory. Console.log (' **************constructor**************** ');
Console.log (' Anim.constructor===animal: ' + (anim.constructor===animal)); True
Console.log (' Animal===animal.prototype.constructor: ' + (animal===animal.prototype.constructor)); True
Console.log (' Animal.constructor===function.prototype.constructor: ' + (animal.constructor=== Function.prototype.constructor)); True
Console.log (' function.prototype.constructor===function: ' + (function.prototype.constructor===function)); True
Console.log (' Function.constructor===function.prototype.constructor: ' + (function.constructor=== Function.prototype.constructor)); True
Console.log (' Object.prototype.constructor===object: ' + (object.prototype.constructor===object)); True
Console.log (' object.constructor====function: ' + (object.constructor===function)); True
prototype, constructor memory diagram (add constructor element on function, Object, prototype diagram):
, the Red Arrows indicate the object that the constructor of the prototype of the function object points to.
- Note that the object is the function of the object.constructor===function.
- How to find the constructor of an object is to look for the object on the prototype chain of the object to which the first constructor property is pointing.
Reference:Http://www.cnblogs.com/fool/category/264215.html (Introduction to JavaScript Principles) http://www.libuchao.com/2012/05/14/ prototypes-in-javascript/(JavaScript prototype object Prototype) http://rockyuse.iteye.com/blog/1426510 (understand the prototype chain in JS, Prototype and __proto__ 's relationship)
Introduction of prototype, __PROTO__, Constructor, Object and function relations in JS
