Thorough understanding of JavaScript prototype inheritance

Thorough understanding of JavaScript prototype inheritance

Before writing an article on the topic of JavaScript inheritance, this article as a reading note, analysis is not deep enough.

This article attempts to further consider and strive for a thorough understanding of the principles of JavaScript inheritance

Instance members and prototype members

Example of a high-performance JavaScript book

var book={    title:"High Performance JavaScript",    Publisher:"Yahoo!press"}; Alert (book.tostring ()); // "[Object Object]"

JavaScript objects have two types of members: instance members and prototype members. Instance members exist on the instance itself, while prototype members inherit from the object's prototype

In the example above, the book object has two instance members: Title and publisher. The book object does not define the ToString () method, but it can call this method because the ToString () method is a prototype member inherited by the book object

The book sample member is associated with a prototype member such as. When Book.tostring () is called, the toString method is searched first from the object instance, and if it is not found, it is turned to the search prototype object. In this way, book can access all the properties and methods of his prototype.

Prototype schema creation Object

 function   person () {} Person.prototype.name  = "Nicholas" ; Person.prototype.age  =29; Person.prototype.job  = "Software Engineer" ; Person.prototype.sayName  =function  () {alert ( this  .name)};  var  person1=new   person ();p erson1.sayname ();  //  "Nicholas"  var  person2=new   person ();p erson2.sayname ();  //  "Nicholas"  

In the code above, the person constructor, prototype object, and instance object are shown in the following relationship

When a person property member is no longer defined on a prototype object

function Person (name) {    this.name=name;} Person.prototype.sayName=function() {alert (this. name)}; var p1=New person ("Zhangsan");

In the preceding code, the person constructor, the prototype object, and the instance object relationship are as shown

As you can see from the two diagram above, when a property is defined in a constructor, the property member exists in the instance object, and when the property is defined in the prototype object, the instance object accesses this property and needs to look it up along the prototype chain

Prototype chain inheritance

Make the prototype object of the constructor equal to an instance of another type, and use the prototype to have one reference type inherit the properties and methods of another reference type

functionsupertype () { This. property=true;} SuperType.prototype.getSuperValue=function(){    return  This. property;};functionsubtype () { This. subproperty=false;}//Inherit supertypeSubtype.prototype=Newsupertype (); SubType.prototype.getSubValue=function(){    return  This. Subproperty;}varInstance=Newsubtype (); alert (Instance.getsupervalue ());//true

In the code example, the complete prototype chain is as follows

The notable detail in the figure is that the property properties of the parent class supertype exist in the Supertype instance object, and the Getsupervalue method exists in its prototype object

After assigning the Supertype instance object to the prototype object of subclass subtype, the Subtype prototype object prototype obtains the property properties of the parent class

How about a different way of writing?

The above is the result of inheriting by assigning the instance object of the parent class to the child class's prototype object

To assign the prototype object of the parent class directly to the child class's prototype object row?

functionSuper () { This. attr= ' A ';} Super.prototype.func=function() {alert (' Super '));};functionSub () { This. x= ' 1 ';} Sub.prototype=Super.prototype; Sub.prototype.test=function() {alert (' Sub ');}varsub=NewSub (); Sub.func ();//' Super 'Sub.test ();//' Sub 'sub.attr;//undefinedsub.x;//1

In the code above, the Super.prototype is assigned directly to Sub.prototpye and found to the sub type instance object sub, when accessing the Attr property, cannot get

This is because the Attr property is defined in the Super constructor, not on the Super prototype object, and there is no attr property in Super.prototype

Assume that all properties of super are defined on the prototype object, as shown below, when the sub instance object is accessible to the Attr property of the parent class.

But at this point, all instance objects of the Super class share the Attr property, and the change of one instance to the Attr property causes the change of the property value attr the other instance object, which should be avoided

function Super () {}super.prototype.attr= ' a '; Super.prototype.func=function() {alert (' Super ');}; function Sub () {    this. x= ' 1'=super.prototype; Sub.prototype.test=function() {alert (' Sub ');} var sub=New  Sub (); sub.attr; // asub.x; // 1

Another way to look at it.

function Super () {    this. attr= ' a';} Super.prototype.func=function() {alert (' Super ');}; function Sub () {    this. x= ' 1'=Super (); Sub.prototype.test=function() {alert (' Sub ');} var sub=New  Sub (); Sub.func (); Sub.test (); sub.attr;sub.x;

In fact, the above code will direct an error, suggesting that the test property is not defined

The reason is Sub.prototype=super (); This code, in effect, points sub.prototype to undefined, because the super () statement is a call to the super () method with a function call that has no return value

After this call, Sub.prototype at this time has been undefined, and then define the test property for him, the nature of the error

Thorough understanding of JavaScript prototype inheritance