Inheritance in JavaScript (prototype chain)

First, the prototype chain

ECMAScript the prototype chain as the main way to implement inheritance , the basic idea is to use the prototype to let one reference type inherit another reference type's properties and methods.

Example 1:

function Suptype () {this.property = true;} SupType.prototype.getSupvalue = function () {return this.property;}; Function subtype () {this.subproperty = false;} The prototype object equals an instance of a type Subtype.prototype = new Suptype (); SubType.prototype.getSubValue = function () {return this.subproperty;}; var instance = new subtype (); alert (Instance.getsupvalue ());//true

　

Principle Analysis:

The principle of inheritance in JavaScript is that a reference type inherits the properties and methods of another reference type through a prototype, when a prototype object equals an instance of a reference type (as if an object is assigned to another object, at which point the assigned object has the property or method of the object). At this point, the prototype object has properties or methods that the instance owns.

An instance of Suptype contains an internal pointer to a prototype object and an instance of an attribute Property,suptype is assigned to the subtype prototype object. The Subtype prototype object now contains internal pointers and property properties that point to the Suptype prototype object. At this point, the instance object of subtype can access the method Getsupvalue in the Suptype constructor, This in the current Getsupvalue points to an instance object of subtype, so the last result is true.

Understanding the prototype pattern in JavaScript, understanding the prototype pattern is a good way to understand the prototype chain in JavaScript, thus understanding the inheritance in JavaScript.

Ii. 2 Rules for defining methods in inheritance.

1. When a subtype is to override a method in a superclass or to add a method that does not exist for a superclass, the code that adds a method to the prototype must be placed after the statement that replaced the prototype.

Example 1:

function Suptype () {this.property = true;} SupType.prototype.getSupvalue = function () {return this.property;}; Function subtype () {this.subproperty = false;} The prototype object equals an instance of a type Subtype.prototype = new Suptype (); SubType.prototype.getSupvalue = function () {return false;}; SubType.prototype.getSubValue = function () {return this.subproperty;};/ /subtype.prototype = new Suptype (), var instance = new subtype (); alert (Instance.getsupvalue ());//false

The subtype overrides the method in the superclass, so the original method is masked and the result returned is false.

Example 2:

If Subtype.prototype = new Suptype (), this replacement of the prototype is placed after the method added to the prototype, the last result is true.

function Suptype () {this.property = true;} SupType.prototype.getSupvalue = function () {return this.property;}; Function subtype () {this.subproperty = false;} The prototype object equals an instance of a type//subtype.prototype = new Suptype (); SubType.prototype.getSupvalue = function () {return false;}; SubType.prototype.getSubValue = function () {return this.subproperty;}; Subtype.prototype = new Suptype (), var instance = new subtype (); alert (Instance.getsupvalue ());//truealert ( Instance.getsubvalue ());//Instance.getsubvalue is not a function

If you are adding a method to a prototype of a subtype, and then assigning the instance of the superclass to the prototype of the subtype, then the prototype of the subtype is rewritten by this super-type prototype, and the methods in the subtype no longer exist, and now the prototype of the subtype points to the super-type prototype object. Call Method Instance.getsupvalue () is a method in the superclass that returns true.

2. When implementing inheritance through the prototype chain, do not use literal creation of the prototype method, which overrides the prototype chain.

Instance:

function Suptype () {this.property = true;} SupType.prototype.getSupvalue = function () {return this.property;}; Function subtype () {this.subproperty = false;} The prototype object equals an instance of a type Subtype.prototype = new Suptype ();//subtype.prototype.getsupvalue = function () {//return false;//};// SubType.prototype.getSubValue = function () {//return this.subproperty;//}; Subtype.prototype = {Getsubvalue:function () {return this.subproperty;}}; var instance = new subtype (); alert (Instance.getsupvalue ()); alert (Instance.getsubvalue ());

Test results:

　

Rewriting the prototype chain cuts off the relationship between subtypes and hyper-types (subtype and Suptype are now out of the relationship).

Inheritance in JavaScript (prototype chain)