Deep understanding of prototype chain in javascript

To understand the prototype chain, you must first understand the function type. In javascript, all classes are functions, so it is a functional programming language. A very important feature of a class is that it can create an object with it as a template based on its constructor. In javascript, functions have two functions.

1. As a general function call
Second, the constructor used as its prototype object is new ()

Let's look at an example.
Copy codeThe Code is as follows:
Function (){
This. name = 'a ';
}

What happens to a function?

First, it creates a function object, that is, a itself.

Second, it creates a prototype object @ a (expressed)

Third, the function object will have a prototype pointer, which points to the corresponding prototype object. Here it points to @

4. The @ a object has a construtor pointer pointing to its constructor, which points to

Http://img.blog.csdn.net/20140222125611500? Watermark/2/text/plain/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ==/ dissolve/70/gravity/SouthEast

What is the purpose of this prototype attribute?

In fact, the prototype attribute indicates the range that the current function can control (or it specifies the current function's constructor). Here, a is the constructor of the @ a prototype object, so we will see this method.

Copy codeThe Code is as follows:
Function (){
This. name = 'a ';
}

Var a1 = new ();


This is similar to other common languages. new is to call constructor in the prototype object (via prototype pointer) to create a new object instance.

If prototype is modified, all instances created using the prototype as the template are affected. We can verify this.

Copy codeThe Code is as follows:
Function (){
This. name = 'a ';
}

Var a1 = new ();
A. prototype. age = 1;
Alert (a1.age );

Result: 1

Why can an a1 object directly access the age attribute? I have not defined the age attribute in the a1 object,

That's because there will be a reference _ proto _ in all instances (which can be accessed directly under firfox and chrome, which is not supported by ie) pointing to this prototype. Here it points to @,
Copy codeThe Code is as follows:
Function (){
This. name = 'a ';
}

Var a1 = new ();
Alert (a1. _ proto _ = a. prototype)

Result: true.

When accessing the attribute, it will first look for it inside the a1 object. If it does not, it will look for it in the object pointed to by _ proto _. here it will look for it in @, if it is found, the return value will be returned. If it is not found, the undefined will be returned. It is described as an idiom!

So far, the meaning of the prototype chain has come out. Because the prototype object also has a _ proto _ pointer and points to another prototype, one by one, the prototype chain is formed. Object. prototype is the top-level prototype. If the attribute of Object. prototype is modified, all objects are affected.

Let's look at a piece of code.
Copy codeThe Code is as follows:
Function (){
This. name = 'a ';
}

Function B (){
This. age = 1;
}

B. prototype = new ();
Alert (new B (). name );

We show that the prototype of B is directed to an instance of a, and then the instance of B can also access the attributes of. This is the inheritance of javascript. Why does B. prototype point to an instance of a instead of a. prototype?
Copy codeThe Code is as follows:
B. prototype = new a. prototype;

Modify p. in prototype, the prototype of a is changed, which is equivalent to modifying the parent class of the subclass and combining the attributes of the parent class. This is obviously inappropriate. In other words, B has become the @ a constructor, And a and B have a level relationship.

We can define the following:

Function a inherits function B, that is, let function a become an instance constructor of function B's prototype. The attributes declared in the constructor are the attributes of function, the properties in the prototype instance inherit B's
Copy codeThe Code is as follows:
Var $ = jQuery = function (selector, context ){
// It is impossible to construct itself again in your own constructor, so an instance of another constructor is returned.
Return new init (selector, context );
}
JQuery. fn = jQuery. prototype = {
Size: function (){
Return this. length;
}
}

Function init (selector, context ){

}
Init. prototype = jQuery. fn ;;
}

This is a piece of jquery source code. We didn't use the new Keyword when using jquery. How does it construct an object?

In the above knowledge, it can be explained that jquery is just a call to a common function. It returns another object created by the jquery prototype constructor, that is, new init ()