In-depth understanding of prototype chain in javascript_Basic knowledge

To understand the prototype chain, you must first understand the function type. There is no concept of classes in JavaScript, they are all functions, so it is a functional programming language. A very important feature of a class is that it can create objects based on it as a template based on its constructor. In JavaScript, functions have two functions

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

Let’s take a look An example

Copy code The code is as follows:

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

When you create a function, what happens to it?

First, it will create a function object, which is a itself

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

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

Fourth, the @a object has a construtor pointer, pointing to its constructor, here It points to a 0/ gravity/SouthEast

What is the use of this prototype attribute?

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

Copy code The code is as follows:

function a(){

this .name = 'a';
}

var a1 = new a();

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

Then modifying the attributes in the object pointed to by prototype will affect all instances created using it as a template. We can verify this

Copy code The code is as follows:

function a(){

this.name = 'a';
}

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


Result: 1

Then why Can the a1 object directly access the age attribute? I did not define the age attribute in the a1 object.

That’s because all instances will have a reference _proto_ (direct access in firfox and chrome, not supported by ie) pointing to this prototype, here it is Pointed to @a,

Copy code The code is as follows:

function a(){

this.name = 'a';
}

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


Result: true

When accessing attributes, it will first search inside the a1 object. If not, it will search along the object pointed to by _proto_. Here it will search in @a and find it. Just return the value. If it is not found, it will return undefined. To use an idiom to describe it, it is just following the clue!

Now the meaning of the prototype chain comes out. Since the prototype object also has a _proto_ pointer, it points to another prototype, one after another, forming a prototype chain. Object.prototype is the top-level prototype, so if the properties of Object.prototype are modified, it will affect all objects.

Let’s look at a piece of code

Copy the code The code is as follows:

function a(){

this.name = 'a';
}

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

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


We explicitly point the prototype of b to an instance of a, and then the instance of b also You can access the properties of a. This is the inheritance of JavaScript, so why does b.prototype point to an instance of a instead of directly pointing to a.prototype?

Copy code The code is as follows:

b.prototype = new a.prototype;

If you modify the attributes in p.prototype as written above, then the prototype of a will also change. It is equivalent to the subclass modifying the parent class, and the attributes of the subclass and the parent class are blended together. This is obviously is inappropriate. In other words, b has also become the constructor of @a, and a and b have a equal relationship.

We can make a definition:

Function a inherits function b, which is a constructor that makes function a an instance of the prototype of function b. The attributes declared in the constructor are function a’s own , the attributes in the prototype instance are inherited from b

Copy code The code is as follows:

var $ = jQuery = function(selector,context){
//It is impossible to construct yourself 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 source code of jquery. When we use jquery, The new keyword is not used, so how does it construct the object?

Using the above knowledge, it can be explained that jquery is just a general function call, which returns an object created by another constructor of the jquery prototype, which is new init()