In the current business development, we should be very few people writing native JavaScript, and everyone will fall to flutter on each frame. Originally, these frameworks for business and developers is a blessing, reducing the development of a variety of pain points, but the negative question is for developers, more and more dependent on the framework, increasingly from native JavaScript the farther basic knowledge and understanding of memory slowly blurred, forgotten.
The prototype, the prototype chain is one of them.
Each constructor have associated therewith an object, the object is called the prototype object.
Each instance of an object can share their properties and methods of the prototype object.
The main role of the prototype object to implement inheritance property, so that the object can be shared instance of the object properties of the prototype, reducing memory allocation.
So, in the previous section, we would like to share a say method in each Person object can be achieved this way.
the Person function (name, Age) {
this.name = name;
this.age = Age;
} // add say the function prototype object, an object instance of the shared function
Person.prototype.say = function () {
the console.log ( "say Hello");
}; var P = the Person new new ( "ZS", 10, say);
p.say (); var new new P2 = the Person ( "ZS", 10, say);
p2.say ();
a method of adding a member on the prototype object:
. constructors members .prototype member name = value;
after the addition method for the Person say prototype object, the method implements shared on multiple instances object functionality.
: The method of obtaining the prototype object
constructor .prototype
instance object. Proto
on each instance of an object has a proto prototype object attributes are used to obtain the object.
== P Person.prototype. Proto ; // to true
at FIG details the relationship between objects:
The core object-oriented concepts
constructor: Person, and create an object with the new keyword
constructor prototype object: Person.prototype,
prototype object: the object and create an instance constructor interrelated
instance objects: created by the constructor For instance objects is called
instantiation: create an instance of the process is called by the constructor instantiated
object members: + method attribute
instance members: properties and methods on instance objects, name, age, only the current instance of the object to access the
prototypical member: properties and methods on the prototype object, say (), all instances of an object using the prototype object corresponds to the constructor creates out can access
static members: directly add properties and methods in the constructor, use only The constructor to access
proto attribute describes
the attribute specification is included only after ES6, before this, only part of the browser implementation.
This property may acquire the specified instance object prototype object, P. Proto as acquired and Person.prototype
prototype object getPrototypeOf we can also use the Object constructor (instance object) method to get the specified instance object
three kinds mentioned above prototype object's methods get results obtained are the same. which is:
Object.getPrototypeOf(p) == Person.prototype == p. proto
Extended built-in objects
Built-in JS objects are pre-defined objects, can be directly used objects used in this type of object has a good package of a bunch of methods and properties, enabling developers to easily perform basic functions.
But in the actual development of these properties or methods may not be able to meet our needs, then we need to make extensions to these built-in objects.
Requirements: Add a method to obtain the number of elements for an array of objects
var arr1 = [1, 2, 3];var arr2 = ["A", "B", "C","D"];
arr1.getLength = function () {
return this.length;
}console.log(arr1.getLength());
The above is an array arr1 added a getLength () method to get its number of elements, then there is at this time on this method of arr2 object? I believe we all know are the answer. If you want to arr2 have the same function, but also need the same operation.
In this way it is desirable, if the array 100 need to want such functionality, the operation is more complicated.
According to the previous learned knowledge, we can use the prototype to solve this problem.
var arr1 = [1, 2, 3];var arr2 = ["A", "B", "C","D"];Array.prototype.getLength = function () {
return this.length;
}console.log(arr1.getLength());// 3console.log(arr2.getLength());// 4
We add getLength () method directly on the Array prototype object, all the array of objects created after have the method to get!
This approach can solve our problems, but there is still the problem:
- In multiplayer development environment, if you use this way of built-in objects do expand, the possible impact on other developers
- If you add too many members in the prototype object, it will reduce the efficiency of the search object members.
Security extensions built-in objects
The key issue there is a certain way to extend the above built-in objects, in fact, the problem is that we are to expand the prototype built directly on the object, which leads to an impact on other developers to use the object.
So, our idea is to solve, custom object, so that the object inherits the need to expand the built-in objects, then only need to operate from a given object can be.
MyArray function () {
} // make prototype MyArray directed // Array object inherits all members i.e. the Array
MyArray.prototype = new new Array ();
MyArray.prototype.getLength = function () {
return this.length;
} var = new new MyArray of arr1 ();
arr1.push ( "a", "B", "C", "D", "E"); // initial built-in objects method console.log (arr1.getLength ()); // method after expansion
Next, if you want to expand the array to do, we only need to operate MyArray can, without the need for direct manipulation Array, so, other developers would not have to use Array's operations affected. Figure understood: 
the structure diagram of the prototype chain
for each instance of an object is created out by the constructor of
each constructor has a default associated prototype object
prototype object is itself an object, so it also has its own constructor
constructor prototype object default prototype object is also associated with
the above constitutes a chain-access architecture, called the prototype chain
following the prototype chain shown and Person object Array object:
Today details about JS prototype and prototype chain would be the first here. You have any questions, you can comment in the comments area. Or have in terms of what you need to know JS Please also positive comments. I hope we can share with each other and learn to work in the knowledge and insight.