JavaScript study notes (10) js object inheritance_basic knowledge

1. Prototype chain
//Rarely used alone

Copy code The code is as follows:

View Code
//Define the SuperClass class, which has an attribute property and a method getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}

//Define the SubClass class, which has an attribute subproperty and a method getSubValue added later
function SubClass() {
this.subproperty = false;
}

//SubClass class inherits SuperClass class
SubClass.prototype = new SuperClass();

//SubClass class adds a method getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}

//Create an instance of the SubClass class
var instance = new SubClass();
alert(instance.getSuperValue());

2. Determine the relationship between the prototype and the instance
The first way is to use the instanceof operator to test the instance and prototype chain. Constructor

Copy code The code is as follows:

alert(instance instanceof Object); //true , is instance an instance of Object?
alert(instance instanceof SuperClass); //true, is instance an instance of SuperClass?
alert(instance instanceof SubClass); //true, is instance an instance of SubClass?

The second way is to use the isPrototypeOf() method to test the prototype that appears in the prototype chain

Copy code The code is as follows:

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true

3. Points to note when defining methods using prototype chain inheritance
The order in which methods are defined:

Copy code The code is as follows:

View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}

function SubClass() {
this.subproperty = false ;
}

//SubClass inherits SuperClass
SubClass.prototype = new SuperClass(); //This should be written first, and the newly added methods and methods of overriding the superclass should be written later , otherwise the overridden superclass method will never be able to call

//Add new method
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//Override the super class method
SubClass.prototype.getSuperValue = function() {
return false;
}
var instance = new SubClass();
alert(instance. getSuperValue()); //fales, the instance of SubClass here calls the getSuperValue() method of SubClass, but blocks the getSuperValue() method of SuperClass.
//Using the SuperClass method will call the getSuperValue() method of SuperClass

Disadvantages of prototype chain inheritance: 1) Sharing properties in the super class, 2) You cannot pass parameters to the constructor of the super class when creating a subclass. All prototype chains are rarely used alone

4. Borrowing constructors
//Rarely used alone

Advantages: Parameters can be passed to the super class. Disadvantages: functions cannot be reused, all classes must use the constructor pattern

Copy code The code is as follows:

View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); / /Inherited SuperClass and passed parameters to SuperClass
this.age = 29; //Instance attributes
}

var instance = new SubClass();
alert(instance.name ); //RuiLiang
alert(instance.age); //29

6. Combination inheritance
//The most commonly used inheritance pattern

Copy code The code is as follows:

View Code
//Create SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue"," green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}

////Create SubClass
function SubClass(name,age) {
SuperClass.call(this,name); //Inherited attributes
this.age = age; //Own attributes
}

SubClass. prototype = new SuperClass(); //Inherited method
SubClass.prototype.sayAge = function() { //SubClass adds new method
alert(this.age);
};

//Use
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue ,green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30

var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"RuiLiang"
instance2.sayAge(); //30

7. Other inheritance patterns
Prototypal inheritance, parasitic inheritance, parasitic combined inheritance