JavaScript prototype and prototype chain learning notes

I. What is a prototype?
A prototype is an object that other objects can use to implement property inheritance.
Simply put, any object can be a prototype.

Prototype properties: Each function we create has a prototype property, which is a pointer to an object that contains properties and methods that can be shared by all instances of a particular type. This object is the prototype object (that is, the object referenced by the prototype of an object).
1. In summary, whenever a function is created, the function has a prototype property that points to the prototype object of the function.

For example, person is a function, and the box on the right is its prototype.

2. By default, all prototype objects automatically get a constructor(constructor) property that contains a pointer to the function where the prototype property is located.

In a nutshell, the prototype property value is an object (a collection of attributes that we can set for him), and the default is only a property called constructor , pointing to the function itself.

Here is an example of a prototype object:

1 function Person () {2             3         }4 person.prototype.name= "Flower";5 person.prototype.sex= "female";6 person.prototype.showname=function () {7 Console.log (' My name is: ' +this.name+ ' I am: ' +this.sex+ ');8             }9      Ten var p1=new person (); One           AP1.showname ();

So in this case: the constructor attribute of the prototype object Person.prototype points to person.

3. The interior of the prototype object also includes a pointer to the prototype object that __proto__ to the constructor. Each object has a __proto__ property.
Note: Object.prototype is a special case-its __proto__ points to null

This __proto__ is a hidden property that is supported in Ff,safari and Ghrome.

As the above example, person is a function, P1 object is from the person function new, so that the P1 object can call the properties in Person.prototype. Because each object has a hidden property--"__proto__", this property references the prototype of the function that created the object. That is: p1.__proto__ = = = Person.prototype
In the example above, add the following code to verify:

1 console.log (p1.__proto__ = = = Person.prototype);//ture

The result is true to prove that they are equal

Simple analysis: The constructor person has a prototype Property object (i.e.: Person.prototype), where the prototype Property object will include __proto__,constructor (constructor) to the constructor, There are also some added properties. The instance object that creates the constructor p1,p1 will have the __proto__ property, pointing to its prototype Person.prototype.

Take a look at the picture below.

So the question comes, before we say that each object has a __proto__ property, and the function is also an object, then the function is naturally __proto__ , and the function is created. Who created the function? That's--function-- attention to this uppercase "F".

The demo code is as follows:

1 function Fn1 (A, b   ) {2            return a+b; 3     }4    console.log (fn1 (2,6)); 5 6     var fn2=new Function ("A", "B", "Return A+b")7     console.log (fn2 (6,6));

In the above code, the first method is to compare the traditional method of function creation, and the second is to create it with new Functoin . Note: The second way is not recommended

In summary: The constructor in the first example is also an object, so it also has the __proto__ attribute, which points to its prototype Function.prototype.

(It can be verified by the following method according to the diagram)

The object that Function.prototype points to is also a normal object created by object, so Function.prototype points to the object, its __proto__ also points to Object.prototype

Verify that:

1 console.log (function.prototype.__proto__);//Result is Object {}

There are three ways to judge a prototype:

1         Console.log (object.getprototypeof (person)); 2         Console.log (object.__proto__);//Function Prototype object 3         console.log (Person.constructor.prototype);

Object.getprototypeof () method is ECMAScript5 new addition, mainstream browsing can be used.

To summarize: Each function has a prototype, which is the prototype (the prototype object that points to the function). Each object has a __proto__ property (the prototype object that points to the constructor), which can be an implicit prototype.
Then the prototype is the prototype object of the constructor that the __proto__ property of the instance object of the constructor is pointing to.

Two Prototype chain

Prototype chain: When accessing an object's properties, look in the basic properties first, if not, and then look up along the __proto__ chain, which is the prototype chain

Here is an example of a prototype chain:

1 function Person (name,sex) {2 This.name=name;3 This.sex=sex;4         }5         6 person.prototype.show=function () {7 Console.log (' My name is: ' +this.name+ ' I am: ' +this.sex+ ');8             }9 person.prototype.showname=function () {Ten Console.log (' Name: ' +this.name '); One             } A                - function Worker (name,sex,job) { - Person.call (this,name,sex);//Inherit the person property the This.job=job; -         }
 - worker.prototype=person.prototype;//This is the prototype chain (passed on a chain to the parent) - worker.prototype.showjob=function () {//Child Add New method + Console.log (this.job); -         }
 + worker.prototype.show=function () { A Console.log (' Name: ' +this.name+ ' sex: ' +this.sex+ ' work: ' +this.job '); at             }
 - var p2=new Worker (' Mumu ', ' female ', ' student '); - p2.showname (); -P2.show ();

Analyze the following example: Create a person function and create a show and showname function on the person's prototype object

The worker function is created, the worker prototype object inherits the prototype object of person Worker.prototype = Person.prototype, and the show on the prototype object that overrides person on the worker prototype object

Function.

Then, the instance object of the worker is created P2, when the function ShowName () is called, it is looked up in the instance itself, if not found, and then along the __proto__ chain to find the upper-level prototype object, Look up one layer at a object.prototype (the top of the prototype chain) until you find it.

If the __proto__ property is found to be null, the undefinedis returned, proving that there is no such method or property. The properties on the prototype on a layer-by-layer Lookup instance form a prototype chain.

Okay, here we go, there's something wrong, please correct me ~ ~ ~ ~

JavaScript prototype and prototype chain learning notes