A thorough understanding of the prototype chain in JavaScript

To find out the prototype chain is to understand the function type first, in JavaScript there is no class concept, are functions, so it is a functional programming language. A class has an important feature, which is that it can create an object that is a template based on its constructor. In JavaScript, functions have 2 functions

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

Let's take a look at an example

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

When you create a function, what happens to it.

First, it creates 1 function objects, which is the a itself.

Second, it will create 1 prototype objects @a (expressed in @)

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

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

What is the use of this prototype attribute?

In fact, the prototype attribute represents the range that the current function can control (or it indicates whose constructor the current function is), where a is the constructor of the @a prototype object, so we'll see that it's written

	function A () {
		this.name = ' a ';
	}
	
	var a1 = new A ();

This is similar to other common languages, and new is to create a new object instance by invoking the constructor (constructor) inside the prototype object (through the prototype pointer).

So modifying the prototype point to the attributes inside the object also affects all instances created with it as templates, so we can verify

	function A () {
		this.name = ' a ';
	}
	
	var a1 = new A ();
	A.prototype.age = 1;
	alert (a1.age);

Results: 1

So why is the A1 object able to access the age attribute directly? A1 Object I didn't define the age attribute.

That's because all instances have a reference _proto_ (accessible directly under Firfox,chrome, IE does not support) point to the prototype, which points to the @a,

	function A () {
		this.name = ' a ';
	}
	
	var a1 = new A ();
	Alert (a1._proto_ = = A.prototype)

Result: True

In accessing the property, will first in the A1 object to look for, if not, will follow the _proto_ point of the object inside to find, here will find in the @a, find the return value, did not find the return undefined, using an idiom to describe, is the following.

The meaning of this prototype chain came out, because the prototype object also has a _proto_ pointer, and pointed to another prototype, one after another, formed a prototype chain. Object.prototype is the topmost prototype, so if you modify the properties of the Object.prototype, it affects all of the objects.

Look at 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.prototype point to an instance of a instead of pointing directly to A.prototype?

B.prototype = new A.prototype;

If you modify the attributes in P.prototype as described above, the prototype of a will also change, which is tantamount to a subclass that modifies the parent class, and the subclass and the parent attribute are blended together, which is obviously inappropriate. In other words, B has become a @a constructor, A,b is a lateral relationship.

We can define the next:

Function A inherits function B, which makes function a the constructor of an instance of the function B prototype, the property declared in the constructor is function A, and the property in the prototype instance inherits B

var $ = JQuery = function (selector,context) {
		//cannot construct itself again in its own constructor, so it returns an instance of another constructor 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, when we use jquery, and do not use the new keyword, how it constructs the object.

Using the above knowledge, you can explain that jquery here is just a call to a generic function that returns the object created by another constructor of the jquery prototype, that is, new Init ()