JavaScript Prototype Basics 1

I. Overview of Prototypes:

Each function we create has a prototype (prototype) attribute, which is an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type.

This is logically understood: prototype the prototype object of the object that was created by invoking the constructor.

　　The benefits of using prototypes allow all object instances to share the properties and methods that it contains. That is, instead of defining the object information in the constructor, you can add the information directly to the prototype.

Ii. creating objects using prototypes

functionBox () {}//declares a constructor, the function body has nothing, if there is a property called instance, the instance methodBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';        }; /*Compare the methods in the prototype to the same address:*/    varBox1 =NewBox (); varBox2 =NewBox (); Alert (Box1.run= = Box2.run);//true, the reference address of the method remains consistent

To learn more about how constructors are declared and how the prototype schema is declared, let's look at the diagram:

　　　　

In the prototype schema declaration, there are two more properties, both of which are generated automatically when the object is created.

The __proto__ property is a pointer to the prototype object that the instance points to, and it acts as the prototype property constructor of the constructor. with these two properties, you can access the properties and methods in the prototype.

Internet Explorer will not be recognized in the script Access __proto__, Firefox and Google Browser and some other browsers can be recognized. Although it can be output, it cannot get internal information.

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';        }; varBox1 =NewBox (); varBox2 =NewBox (); alert (box1.prototype);//This property is an object that cannot be accessedalert (box1.__proto__);//This property is a pointer to the prototype prototype object, and the result of the print is [object Object] in IE the result is undefined        /*constructor is the property of a constructor, and getting the constructor itself is positioned by the prototype pointer, and then waits for the constructor itself, which is actually the prototype object for the object instance.*/alert (box1.constructor); alert (box1.age);//properties and methods in the prototype object can be accessed directly because the underlying automatically calls properties such as prototype and __proto__ and constructor

You can use the isPrototypeOf () method to test whether an object is a prototype object that points to the constructor (that is, if an object instance is a prototype object that points to an object).

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';        }; varBox1 =NewBox (); varBox2 =NewBox (); alert (box1.age);//The result prints the value of ageAlert (Box.prototype.isPrototypeOf (box1));//whenever an object is instantiated, it will point to the

Third, the implementation process of prototype mode

1, first find the constructor instance of the property or method, if any, immediately return;
2, if not in the constructor instance, then go to its prototype object to find, if there is, return;

Although we can access the values saved in the prototype through the object instance, we cannot override the values in the prototype through the object instance.

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';        }; varBox1 =NewBox (); alert (box1.name); //Lee, the value in the prototype.Box1.name = ' Jack '; alert (box1.name); //Jack, the nearest principle,    varBox2 =NewBox (); alert (box2.name); //Lee, the value in the prototype, hasn't been box1 modified .

If you want to Box1 can also continue to access the values in the prototype, you can delete the properties in the constructor, as follows:

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';        }; varBox1 =NewBox (); alert (box1.name); //Lee, the value in the prototype.Box1.name = ' Jack '; alert (box1.name); //Jack, the nearest principle,        DeleteBox1.name;//To delete a property in an instancealert (box1.name); Box.prototype.name= ' KKK '//overriding the value of the Name property in the prototypealert (box1.name);//The result is KKK .    DeleteBox.prototype.name;//Delete the attribute value from the prototype, and the result is undefinedalert (box1.name);

How can I tell if a property is in an instance of a constructor or in a prototype? You can use the hasOwnProperty () function to verify that:

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';        }; varBox1 =NewBox (); alert (box1.name); //Lee, the value in the prototype.Box1.name = ' Jack '; alert (box1.name); //Jack, the nearest principle,Alert (Box1.hasownproperty (' name '));//Evaluates whether the instance exists in the specified attribute instance and returns True, otherwise false

The In operator returns True when the given property is accessible through the object, regardless of whether the attribute exists in the instance or in the prototype.

  function  box () {} //  Declare a constructor  Box.prototype.name = ' Lee '; //     add a property to the prototype     Box.prototype.age = 100; Box.prototype.run  = function  () {//   Add method in prototype  return  this . Name + this . Age + ' running ... ' in  box1); // true, existing in instance or prototype  

We can detect whether an attribute exists in an instance by using the hasOwnProperty () method, or it can be used to determine whether an attribute exists in an instance or prototype. The combination of these two methods allows you to determine whether a property exists in the prototype.

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';            }; varBox1 =NewBox (); Alert (Box1.hasownproperty (' Name ')); Alert (' Name 'inchbox1); //If the first false indicates that the attribute is not in the instance, and the second is true, the attribute exists in the prototype    //if the first is true, the Description property exists in the instance

You can also define a function to sentence a segment, the principle is the same

functionBox () {}//declaring a constructorBox.prototype.name = ' Lee ';//adding attributes to a prototypeBox.prototype.age = 100; Box.prototype.run=function() {//Adding a method to a prototype        return  This. Name + This. Age + ' running ... ';    }; functionIsproperty (object, property) {//determine if a property exists in the prototype        return!object.hasownproperty (property) &&inchobject); }        varBox1 =NewBox (); Alert (Isproperty (Box1,' Name '))//true if the prototype has

JavaScript Prototype Basics 1