Step 3: Implement Javascript inheritance

This article is meaningless if you are a Javascript guru. @ authorYHC first does not inherit the extend keyword in Javascript, so in Java, C #,.... in object-oriented languages, keywords can be used for inheritance. Their operating principles may be different, but they... syntaxHighlig

This article is meaningless if you are a Javascript guru.

 

@ Author YHC

First, Javascript does not inherit the extend keyword, so in Java, C #,.... in object-oriented languages, keywords can be used for inheritance. Their operating principles may be different, but they all have one thing in common:

When a subclass constructor is called, it indicates that the constructor of the parent class is called. In js, we can also implement the Code in three steps:

1. Call the parent class constructor In the subclass constructor.

2. Modify the prototype attribute of the subclass to the instance of the parent class.

3. Reset the constructor attribute of prototype to subclass.

Code:

[Javascript]
/**
Person class
*/
Function Person (name ){
// Assign the name attribute
This. name = name;
/**
Obtain the name attribute of the Person class.
*/
This. getName = function (){
Return this. name;
};
}

/// Create a Person-type instance
Var pp = new Person ('master ');
// Output the name Attribute Value
Alert (pp. getName (); // result: Master

/**
Student Class
**/
Function Student (name, score ){
// Call the parent class constructor and pass the name parameter
Person. call (this, name );
// Assign a Score attribute
This. score = score;
/**
Score Attribute Value
*/
This. getScore = function (){
Return score;
};
}

// Point the prototype chain of Student to the Person object
Student. prototype = new Person ();
// Reset the constructor attribute to the Student class. When the prototype of the Student class is set to Person
// Erase the constructor attribute
Student. prototype. constructor = Student;

// Instantiate the Student class
Var s = new Student ('master', 100 );
// Output the Student name and score attribute values
Alert (s. getName () + ':' + s. getScore (); // result: Master: 100

/**
Person class
*/
Function Person (name ){
// Assign the name attribute
This. name = name;
/**
Obtain the name attribute of the Person class.
*/
This. getName = function (){
Return this. name;
};
}

/// Create a Person-type instance
Var pp = new Person ('master ');
// Output the name Attribute Value
Alert (pp. getName (); // result: Master

/**
Student Class
**/
Function Student (name, score ){
// Call the parent class constructor and pass the name parameter
Person. call (this, name );
// Assign a Score attribute
This. score = score;
/**
Score Attribute Value
*/
This. getScore = function (){
Return score;
};
}

// Point the prototype chain of Student to the Person object
Student. prototype = new Person ();
// Reset the constructor attribute to the Student class. When the prototype of the Student class is set to Person
// Erase the constructor attribute
Student. prototype. constructor = Student;

// Instantiate the Student class
Var s = new Student ('master', 100 );
// Output the Student name and score attribute values
Alert (s. getName () + ':' + s. getScore (); // result: Master: 100

 

In Javascript, each object has a prototype attribute. This attribute is either null or pointing to an object. access s. if this method or member is found in this object during the getName () attribute

Then JavaScript will petition each prototype Object one by one until this member is found, or one finds the Object. prototype object. if so, we just need to point the prototype attribute of the subclass to the example of the parent class,

So why do we need to reset the attributes of the subclass Student. prototype. constructor? Because this attribute is erased when Student. prototype is set to the parent class instance, it needs to be reset.