To figure out the prototype chain, you must first figure out the function type. There is no concept of classes in JavaScript, they are all functions, so it is a functional programming language. A class has a very important feature, which is that it can create objects with it as a template based on its constructor. In javascript, the function has 2 functions
First, as a general function call
Second, the constructor of its prototype object is new()
Let's take an example
The code copy is as follows:
function a(){
this.name = 'a';
}
What happens when a function is created?
First, it will create a function object, that is, a itself
Second, it will create a prototype object @a (denoted by @)
Third, the function object will have a prototype pointer, which points to the corresponding prototype object, and here it points to @a
Fourth, there is a constructor pointer in the @a object, pointing to its constructor, here it points to a
http://img.blog.csdn.net/20140222125611500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGpsMTU3MDEx/font/5a6L5L2T/fontsize/400/fil l/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
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). Here a is the constructor of the @a prototype object, so we will see that there is such a writing method.
The code copy is as follows:
function a(){
this.name = 'a';
}
var a1 = new a();
This is similar to other common languages. New is to call the constructor in the prototype object (through the prototype pointer) to create a new object instance.
Then modifying the properties of the prototype pointing to the object will affect all instances created with it as a template. We can verify this
The code copy is as follows:
function a(){
this.name = 'a';
}
var a1 = new a();
a.prototype.age = 1;
alert(a1.age);
Results: 1
Then why can the a1 object directly access the age attribute? I do not define the age attribute in the a1 object.
That's because there will be a reference in all instances _proto_ (can be accessed directly under firfox, chrome, but ie does not support it) pointing to this prototype, here it points to @a,
The code copy is as follows:
function a(){
this.name = 'a';
}
var a1 = new a();
alert(a1._proto_ == a.prototype)
Result: true
When accessing attributes, you will first search inside the a1 object. If not, you will search in the object pointed to by _proto_. Here you will search in @a. If you find it, you will return the value. If you don't find it, you will return undefined. To describe it in an idiom, it is just following the clues!
At this point, 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, a prototype chain is formed. Object.prototype is the top-level prototype, so if the Object.prototype property is modified, it will affect all objects.
Looking at a piece of code
The code copy is as follows:
function a(){
this.name = 'a';
}
function b(){
this.age = 1;
}
b.prototype = new a();
alert(new b().name);
We show that b points the prototype of b 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, rather than directly pointing to a.prototype?
The code copy is as follows:
b.prototype = new a.prototype;
If you modify the properties in p.prototype as written above, then the prototype of a will also change, which is equivalent to the subclass modifying the parent class, and the properties of the subclass and the parent class are combined together, which is obviously inappropriate. of. In other words, b also becomes the constructor of @a, and a and b become parallel relationships.
We can define it next:
Function a inherits function b, which is the constructor that makes function a become an instance of the prototype of function b. The attribute declared in the constructor is function a itself, and the attribute in the prototype instance is inheriting b
The code copy is as follows:
var $ = jQuery = function(selector,context){
//It is impossible to construct yourself again in your own constructor, so another constructor instance was 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 source code of jquery. When we use jquery, we do not use the new keyword. So how does it construct the object?
Using the above knowledge, it can be explained that jquery is just a call to a general function, which returns an object created by another constructor of the jquery prototype, that is, new init()