Familiar friends all know that software development, prototype is a basic utility model or product data systems, typically develop programs for demonstration purposes or part of the structure. The importance of a prototype self-evident, then I will explain the concept of prototype in JavaScript for you.
Interpretation prototype object
each have a constructor object associated therewith, 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.
Get prototype object:
constructor .prototype
.__ proto __ instance object
has a property __ proto on each instance of an object, the object is to obtain a prototype of the object.
Person.prototype == p proto __; // true .
The following figure 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 be acquired designated prototype object instance of the object, as p. Proto, and Person.prototype acquired
prototype object getPrototypeOf we can 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. Namely:
. Object.getPrototypeOf (P) P == == Person.prototype proto __
extended built-in objects
built-in objects is defined in advance in JS objects, the objects being used can be directly used, in such a subject has a good package 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.
Demand: add an object a method for obtaining an array element number
var of arr1 = [. 1, 2,. 3]; var arr2 is = [ "A", "B", "C", "D"];
arr1.getLength function = () {
return this.length;
} the console.log (arr1.getLength ());
the above array arr1 added a getLength () method to get the number of elements thereof, then there is the case of this method 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.
of arr1 = var [. 1, 2,. 3]; var arr2 is = [ "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, other developers might be affected
if you add too many members in the prototype object, will reduce the efficiency of the search object members.
Extended built-in object security
key way to extend some problems 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 ()); // extension method after
the 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 understand:
Figure prototype chain structure
for each instance of an object is created out by the constructor
each have a default constructor associated prototype object
prototype object is itself an object, so it also has its own constructor
constructor prototype object also has an associated default prototype object
above constitutes a chain-access architecture, called the prototype chain
following the prototype chain shown and Person object Array object:
Above is my understanding prototype and prototype for the chain, this is only my own point of view, if there is inappropriate also please point out. As has been able to help you where I will answer it, I hope we can make progress together.