In JS, create a function object whenever f1, built in the object are some of the properties, including the prototype and proto , prototype, the prototype object.
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 the
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. 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 heap 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, 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.
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 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
The following depicts the prototype chain Person object and Array objects:
If you carefully read this article, I believe you will have a new understanding of JavaScript in the prototype, the prototype chain. If you want to know more JS-related dry goods, remember to continue to focus my updates!