On JavaScript prototype

In JavaScript, all functions have a property called prototype, and the default initial value is an "empty" object (an object without its own property).

　1. Prototype properties

Simply define a function, as shown below:

function foo (A, b) {

return a * b;

}

At this point, you can access the properties of the function as you would access other objects, including the prototype property, whose initial value is an "empty" object.

can be seen as: Foo.prototype = {} .

We can give this empty object some methods and properties that do not affect the Foo function itself, but only if Foo () is used as a constructor (that is, the constructor) .

Here's a look at how to add methods and properties using prototypes.

　　2. Using prototypes to add methods and properties, and methods and properties for using prototypes

First, build a concrete constructor function gadget ():

 1  function   Gadget (name, color) { 2  this . Name = name;  3  this . Color =  color;  4  this . whatareyou = function   () { 5  return  ' I am a ' + this . Color + ' + 

Then, using the prototype property of the constructor function to add two attributes (price and rating) and one method (GetInfo),

Method One:

1 Gadget.prototype.price = +; 2 gadget.prototype.rating= 3; 3 function () {4     return  This  This . Price; 5 };

　　Method Two:

1 gadget.prototype = {2     price:100,3     rating:3,4      function() {5         return this This . Price; 6     }7 }

　　Now, use the constructor to create a new object and access those properties and methods defined earlier:

1 //Create an Object2 varNewtoy =NewGadget (' webcam ', ' black ');3 //to access previously defined properties4Newtoy.name;//output is webcam5 6Newtoy.color;//Output to Black7 8 New. Whatareyou ();//output is I am a black webcam9 TenNewtoy.price;//output is One  Anewtoy.rating;//output is 3 -  -Newtoy.getinfo ();//output is Rating:3, price:100

The most important thing for a prototype is its "real-time" nature, since almost all of JavaScript's objects are passed by reference, so none of the new object entities we create are part of our own prototype, which means you can modify the prototype property at any time. and the prototype property of all objects created by the same constructor also changes (and even affects those objects that were created before the modification).

If you continue to add some more methods to the prototype in the example above, even though the Newtoy object was created before the method definition was added, the Newtoy object still has access to the new method.

Not only can we add new methods and properties to the associated prototype object, we can even replace the original prototype object with a custom object. Note, however, that the prototype declaration is sequential, so the rewritten prototype will cut off the previous prototype.

　3. Attributes of itself and prototype

To get back to the example above, first look at the execution pattern of the prototype chain: When an object Newtoy access to a property, such as the Name property, the JavaScript engine iterates through all the properties of the object and looks for the Name property, and returns immediately if found, because the constructor function This property is indeed defined. If Newtoy accesses the price property, the JavaScript engine still queries all properties of the object, but there is no rating attribute in the object, and the script engine queries the prototype of the constructor function that is used to create the current object (equivalent to direct access Newtoy.constructor.prototype). If the property is found in the re-prototype, it is returned immediately. If it is still not found, it will continue to search for prototypes of its prototype, and so on, to know the search to Object.prototype.

If the object's own property has the same name as the prototype property, the value returned is the property set by itself, because the object's own property has precedence over the prototype property.

You can use the hasOwnProperty () method if you want to determine whether an attribute is a property of its own or a prototype property. If the return value is true, it is the property of the object itself; returns False, which indicates the prototype property of the object.

Attach a reference book: JavaScript Object-Oriented Programming Guide (2nd edition)

On JavaScript prototype