JavaScript prototype and prototype chain Ultimate detailed _javascript skills

JavaScript prototype and prototype chain Ultimate detailed

I. Common objects and Function objects

In JavaScript, everything is the object! But the objects are also different. It is divided into ordinary object and function object, Object,function is the function object with JS. The following examples illustrate

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

In the above example O1 O2 O3 is a normal object, F1 F2 is a function object. How to distinguish, 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 the new Function (). Function Object is also created by the New function ().

Two. Prototype Object

In JavaScript, objects contain predefined properties whenever an object (function) is defined. One of the properties of a function object is the prototype of the prototype object. Note: Normal objects do not have prototype, but have __proto__ properties.

The prototype object is actually a normal object (except Function.prototype, which is a function object, but it is very special, and he has no prototype attribute (previously said that the function object has the prototype attribute)). Look at the following example:

Function F1 () {};
Console.log (F1. prototype)//f1 {}
Console.log (typeof F1. prototype)//object Console.log
(typeof Function. Prototype)//Function
Console.log (typeof object. prototype)//Object
Console.log (typeof Function. prototype. Prototype)//undefined

The output from this console.log (F1. prototype)//F1 {} can be seen from the result, F1. Prototype is an instance object of F1. When F1 is created, it creates an instance object and assigns it to its prototype, and the basic process is as follows:

var temp = new F1 ();
F1. Prototype = temp;

So, Function. Prototype why is a function object is solved, the above raised general new Function () generated objects are function objects, so temp is a function object.

var temp = new Function ();
Function. Prototype = temp;

What is the prototype object used for? The primary role is for inheritance. For example:

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 the properties of a function object to Person.prototype, the normal object that comes out of the person instance (in the example: ZJH) Inherits this property. Concrete is how to achieve the inheritance, it is necessary to talk about the following prototype chain.

Three Prototype chain

When JS creates an object (whether it is a normal object or a function object), it has a built-in property called __proto__, which points to the prototype object prototype of the function object that created it. Take the example above for example:

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

Similarly, the Person.prototype object also has a __proto__ attribute that points to the prototype of the function object in which it was created (object)

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

Continue, the Object.prototype object also has a __proto__ property, but it is special, null

Console.log (object.prototype.__proto__)//null

We call this chain with __proto__ until the object.prototype.__proto__ is called the prototype chain. The following figure:

Four Memory structure diagram

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

Paint Conventions:

Explanation of doubtful points:

1.object.__proto__ = = Function.prototype//True

Object is a function object that is created by the new function (), so object.__proto__ points to a function. Prototype

2.function.__proto__ = = Function.prototype//True

A function is also an object function and is created by the new function (), so function.__proto__ points to a function. Prototype

Oneself is created by oneself, seem to be illogical, but think carefully, the real world also some similar, how do you come, your mother is born, your mother how come, your grandmother birth, ... The ape evolved, where the ape came from, all the way back ..., that is, nothing, (null-born creatures)

As the Moral sutra says, "No, the beginning of heaven and earth."

3.function.prototype.__proto__ = = Object.prototype//true

In fact, I am a bit confused, but also can try to explain.

Function.prototype is a function object, theoretically his __proto__ should point to Function.prototype, he himself, pointing to himself, no meaning.

JS has always stressed that everything is object, function object is also an object, to his ancestors, pointing to object. Prototype Object. prototype.__proto__ = = NULL to ensure that the prototype chain can end normally.

Five Constructor

There is a predefined constructor attribute in the prototype object prototype to reference 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 memory structure diagram above:

There are two points to note:

1. Note that Object.constructor===function;//true itself object is constructed by function functions
2. How to find the constructor of an object is the object of the prototype chain to find the encounter of the first constructor attribute to point to

Six Summarize

1. Prototype and prototype chain is a model of JS implementation inheritance.

2. The formation of the prototype chain is really relying on __proto__ rather than prototype

To get a deeper understanding of this sentence, let's take another example to see if you really understand the above.

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, then? Draw the memory diagram:

What the problem is, when executing dog.price, we find that there is no price for this attribute, although prototype points to the animal has this attribute, but it does not go along this "chain" to look for. Similarly, when performing tidy.price, there is no such attribute, but __proto__ points to animal, which goes along this chain to find the price attribute in animal, so tidy.price output 2000. As a result, the real formation of the prototype chain relies on the __proro__, not the prototype.

Therefore, if you specify dog.__proto__ = animal in this way. That Dog.price = 2000.

<!--[if!supportlists]-->1.

<!--[endif]--> Last analogy, though not very precise, may be helpful in understanding 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, Mr. and son, have bought him a lot of toys, and when you regenerate your son, your youngest son will naturally have all the toys of your big boy. As for whether they will fight, it is not our business.

So, you are inherited from your eldest brother, the proof of the sentence "brother like Father" Ah