JS Prototype and prototype chain Ultimate detailed (reprint)

Source: Internet
Author: User

This article needs to be carefully and meticulously read to understand

one. Normal object and Function object
  javascript, everything is object! But the object is also Different. It is divided into ordinary object and function object , object, function is JS self-brought functions Object . The following example illustrates

 function F1 () {};
 var F2 = function () {};
 var f3 = new Function (' str ', ' Console.log (str) ');

 var O3 = new F1 ();
 var O1 = {};
 var O2 =new Object ();

 console.log (typeof Object);//function
 console.log (typeof function);//function
  Console.log (typeof o1); Object
 console.log (typeof o2);//object
 console.log (typeof o3);//object
 console.log ( typeof f1); function
 console.log (typeof f2);//function
 console.log (typeof f3);//function 
 

In the above example O1 O2 O3 is a normal object, F1 F2 F3 is a function object. How to differentiate, in fact, is very simple, all the objects created by the new function () are function objects, others are ordinary objects. f1,f2, in the final analysis, is created by means of new Function (). Function Object is also created through the New function ().

Two. prototype objects
In javascript, each time an object (function) is defined, the object contains some predefined properties. one of the properties of the function object is the prototype object prototype.

Note:Normal object has no prototype, but has __proto__ property。

Prototype Object [xxx.prototype] is actually a normal object(except for function.prototype, [function.prototype] is a function object, but it is special, he has no prototype property(previously, the function object has the prototype Property).) Look at the following example:
Function F1 () {};
Console.log (f1.prototype)//f1{}
Console.log (typeof f1. Prototype)//object
Console.log (typeof function.prototype)/Function, This special
Console.log (typeof Object.prototype)//Object
console.log (typeof Function.prototype.prototype)//undefined

The output from this console.log (f1.prototype)//f1 {} shows that F1.prototype is an instance object of f1. When F1 is created, it creates an instance object of it and assigns it the prototype, the basic process is as follows:
var temp = new F1 ();
f1. Prototype = temp;

so, Function.prototype Why the function object is solved,As mentioned above, the objects produced by the new function () are all function objects, so Temp1 is a function object.
var temp1 = new Function ();
Function.prototype = temp1;

What is the prototype object for? The primary function is for inheritance. Give Examples:
var person = function (name) {
THIS.name = Name
};
Person.prototype.getName = function () {
Return this.name;
}
var zjh = new person (' Zhangjiahao ');
Zjh.getname (); Zhangjiahao

As you can see from this example, by setting a property of a function object to person.prototype, the normal object that comes out of the person instance (in the Example: Zjh) inherits this Property. Specifically how to achieve the inheritance, it is necessary to talk about the following prototype Chain.

Three. Prototype chain
JS has a built-in property called __proto__ when creating an object (whether It's a normal object or a function Object) .the prototype object prototype that is used to point to the function object that created it. Take the example above:

Console.log (zjh.__proto__ = = = Person.prototype)//true

Samethe Person.prototype object also has the __proto__ property, which points to the prototype of the function object (object) that created it

console.log (person.prototype.__proto__ = = Object.prototype)//true

continue, object.prototype object also has a __proto__ property, but it is special, null (remember that object is a function Object)

 < Span class= "STYLE2" > console.log (object.prototype. __proto__)//null

We have this chain of __proto__ strings up until object.prototype.__proto__ is called the prototype Chain. Such as:

For more in-depth and intuitive understanding, let's draw the above memory structure:


Paint convention:


Doubtful explanation:
1.object.__proto__ = = = Function.prototype//true
  object is a function object , , so object.__ Proto__ points to Function.prototype.

2.function.__proto__ = = = Function.prototype//true
  function is also a function object, also through the new function () created, so function.__proto__ points to Function.prototype.

typeof Object = "function

typeof Object.prototype =>object

typeof function = "function

typeof Function.prototype =>function



Oneself is created by oneself, seem not logical, but think carefully, the real world also have some similar, how you come, your mother is born, your mother how come, your grandmother is born, ... The Apes evolved, where the apes came from, all the way back ... that's none, (null for Everything)
As the "moral sutra" says, "no, The beginning of the world of the name."

3.function.prototype.__proto__ = = = Object.prototype//true
In fact, I'm a little confused, but I can also try to Explain.
Function.prototype is a function object, theoretically his __proto__ should point to function.prototype, is himself, he points to himself, no meaning.
JS has always emphasized that everything is object, function object is also object, give him to recognize an ancestor, point to Object.prototype. object.prototype.__proto__ = = = NULL to ensure that the prototype chain ends NORMALLY.

Five. Constructor
the Prototype object prototype has a predefined constructor property that references its function object。 This is a circular reference
Person.prototype.constructor = = = Person//true
Function.prototype.constructor = = = Function//true
Object.prototype.constructor = = = Object//true

Complete the above memory structure diagram:


There are two points to note:
(1) Note that the object.constructor===function;//true itself is a function-constructed object.
(2) how to find the constructor of an object is to look for the object to which the first constructor property is pointing on the prototype chain of the object

Six Summarize
1. Prototype and prototype chain is a model of JS implementation inheritance.
2. The formation of the prototype chain is really by __proto__ rather than prototype

To understand this sentence in depth, let's take another example to see if you really understand.
var animal = function () {};
var dog = function () {};

Animal.price = 2000;//
Dog.prototype = animal;
var tidy = new Dog ();


Console.log (dog.price)//undefined
Console.log (tidy.price)//2000

Why is it? Draw a Memory diagram:


This shows what the problem is, when executing the dog.price, it is found that there is no price attribute, although prototype points to the animal has this attribute, but it does not go along this "chain" to look for. similarly, when executing tidy.price, there is no such attribute, but __proto__ points to animal, which will follow this chain to find, Animal has the price property, so tidy.price output 2000. As a result, the real formation of the prototype chain is __proro__, not prototype.
therefore, if you specify dog.__proto__ = animal in this way. That dog.price = 2000.

The final metaphor, though not very precise, may help with the understanding of the Prototype.

Father (function object), sir, a big son (prototype), that is your eldest brother, father to your eldest brother bought a lot of toys, when you were born, the relationship between you (__proto__) will let you naturally have your eldest brother's toys. likewise, you, the older son of yours, buy a lot of toys for him, and when you regenerate your son, your youngest son will naturally have all the toys of your big boy. As to whether they will fight, it is not our business.
so, you inherit from your eldest brother, confirming the phrase "elder brother as father".

JS Prototype and prototype chain Ultimate detailed (reprint)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.