Advanced JavaScript---Prototyping and prototype inheritance

Advanced JavaScript---Prototyping and prototype inheritance

In JavaScript,prototype is a property of a function and is also a property of an object created by the constructor. the prototype of the function is an object. It is used primarily when functions are used as constructors.

function Vehicle (wheels, Engine) {    this. Wheels = wheels;      this. engine = engine;}

In the example above,the prototype of the Vehicle function is the prototype of any object instantiated with the Vehicle constructor.

adding properties and methods using prototypes

You can use the prototype property to add properties and methods to an object, even objects you have created:

var testvehicle = new Vehicle (2, false); Vehicle.prototype.color = "Red"; var testcolor = Testvehicle.color;

　　

The value of Testcolor is "red".

You can even add properties and methods to predefined objects. For example, you can define a Trim method on a string prototype object, and all strings in the script will inherit the method.

String.prototype.trim =function(){    //Replace leading and trailing spaces with the empty string    return  This. Replace (/(^\s*) | ( \s*$)/g, "");}vars = "Leading and trailing spaces";//displays "leading and trailing spaces (+)"Window.alert (S + "(" + s.length + ")");//Remove the leading and trailing spacess =S.trim ();//displays "leading and trailing spaces"Window.alert (S + "(" + s.length + ")");

Use prototypes to derive another object from an object using Object.create

The prototype object can be used to derive another object from one object. For example, you can use the Object.create function to derive a new object Bicycle that uses the prototype of the Vehicle object that we previously defined (and any new properties that are required) .

 var  Bicycle = Object.create ( Object.getprototypeof (Vehicle), { "pedals": {value: true  }});

The Bicycle object has properties wheels,engine,color , and pedals, and its prototype is Vehicle.prototype. The JavaScript engine looks for the pedals property of Bicycle and looks at the prototype chain to find wheels,engine, and color for Vehicle .

Change the prototype of an object

__proto__ property." In Internet Explorer 11, you can replace an internal prototype of an object or function with a new prototype by using the  __proto  property.  

The following example shows how to change the prototype of an object. This example shows how an object's inherited properties will change when the object prototype is changed.

functionFriend () { This. Demeanor = "Happy";}functionFoe () { This. Demeanor = "suspicious";}varFriend =NewFriend ();varFoe =NewFoe ();varPlayer =NewObject ();p layer.__proto__=foe;friend.ally= "Tom";if(Console &&console.log) {console.log (Player.demeanor= = = "Happy");//Returns falseConsole.log (Player.demeanor = = = "suspicious");//Returns TrueConsole.log (player.ally = = = "Tom");//Returns false    //Turn the foe to a friend.player.__proto__ =friend; Console.log (Player.demeanor= = = "Happy");//Returns TrueConsole.log (Player.demeanor = = = "suspicious");//Returns falseConsole.log (player.ally = = = "Tom");//Returns True}

Above is an excerpt from the original text on http://msdn.microsoft.com/zh-cn/library/hh924508 (v=vs.94). aspx.

Here is a question I see from the MU guest online, after careful analysis of the feeling is very interesting, so write down the record.

Careful analysis of man.prototype = new people and Man.prototype = People.prototype The difference between the two types of inheritance

functionpeople () { This. Name = ' Frog ';  This. Age = 29; } People.prototype.getName=function(){        return  This. Name; }        functionMan () { This. Name = ' Rat ';  This. Age = 3; } Man.prototype=Newpeople; //one day, the new little buddy changed the method.Man.prototype.getName =function(){        return  This. Age; }        varp =Newpeople; varn =P.getname (); Console.log (n); //output 29 instead of frog    //description directly with the original open chain, the parent class will affect the quilt class

function=new f ();

Why introduce an instance of an F object? Simply put, it is to break a reference to the people prototype chain and inherit only the method on the people prototype, without inheriting its properties.

Advanced JavaScript---Prototyping and prototype inheritance