Deep understanding of prototype chains in javascript

To figure out the prototype chain, you have to figure out the function type. In javascript, there is no concept of a class, it is a function, so it is a functional programming language. An important feature of a class is that it can create objects that use it as a template based on its constructor. In javascript, functions have two functions

First, as a general function call
Second, the constructor for its prototype object is new()

Let's look at an example

 
function a(){ 
this.name = 'a'; 
} 

When you create a function, what happens to it?

First, it's going to create a function object which is a itself

Second, it will create a prototype object @a(denoted by @)

Third, the function object will have a prototype pointer to the corresponding prototype object, which in this case points to @a

Fourth, @ a objects have a construtor pointer, point to its constructor, is pointing to a here

http://img.blog.csdn.net/20140222125611500? Watermark / 2 / text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGpsMTU3MDEx/font / 5 a6l5l2t/fontsize / 400 / fill/I0JBQkFCMA = = / dissolve / 70 / gravity/SouthEast

What exactly does this prototype property do?

In fact, the prototype property indicates the scope of the current function to control (or it indicates whose constructor the current function is), where a is the constructor of the @a prototype object, so we'll see this

 
function a(){ 
this.name = 'a'; 
} 

var a1 = new a(); 

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

So we can verify by modifying the property that prototype points to in the object, which also affects all instances created with it as a template

 
function a(){ 
this.name = 'a'; 
} 

var a1 = new a(); 
a.prototype.age = 1; 
alert(a1.age); 

Results: 1.

So why does the a1 object have direct access to the age property? I didn't define the age property in the a1 object,

That's because all instances have a reference to _proto_(which is directly accessible in firfox, chrome, not supported by ie) that points to the prototype, which in this case points to @a,

 
function a(){ 
this.name = 'a'; 
} 

var a1 = new a(); 
alert(a1._proto_ == a.prototype) 

Results: true,

When you access a property, you look inside the a1 object, and if you don't, you look inside the _proto_ object, you look inside the @a object, and if you find it, you return it, if you don't find it, you return undefined.

This is where the protochain comes in, and since the protoobject also has a _proto_ pointer to another prototype, one after another, the protochain is formed. Object. Prototype is the top-level prototype, so if you change the properties of Object. Prototype, you affect all objects.

Here's a piece of code

 
function a(){ 
this.name = 'a'; 
} 

function b(){ 
this.age = 1; 
} 

b.prototype = new a(); 
alert(new b().name); 

We show that the prototype of b points to an instance of a, and then the instance of b can also access the properties of a. This is the inheritance of javascript, so why does b.rototype point to an instance of a instead of directly to a.rototype?

 
b.prototype = new a.prototype ;  

If you change the property in p.prototype, as you wrote above, then the stereotype of a will change as well, which is equivalent to the subclass modifying the parent class, and the subclass mixing with the parent class properties, which is obviously not appropriate. In other words, b also becomes the constructor of @ (a), and a and b become horizontal relations.

We can make a definition:

The function a inherits the function b which is the constructor that makes the function a an instance of the prototype of the function b, where the property declared in the constructor is the property of the function a itself, and the property in the prototype instance is the property inherited from b

 
var $ = jQuery = function(selector,context){ 
//You cannot construct yourself again in your 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 section of jquery source code, we use jquery, did not use the new keyword, then how it is constructed objects?

With that said, jquery is just a general function call that returns an object created by another constructor of the jquery prototype, new init()