How does javascript implement inheritance?

Method: 1. Use the prototype to let one reference type inherit the properties and methods of another reference type; 2. Borrow the constructor and call the superclass constructor inside the subclass constructor by using call() and apply() can execute the constructor on the newly created object; 3. Combine the prototype chain and the technology of borrowing the constructor to realize inheritance.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Foreword: Most OO languages ​​support two inheritance methods: interface inheritance and implementation inheritance. However, interface inheritance cannot be implemented in ECMAScript. ECMAScript only supports implementation inheritance, and its implementation inheritance mainly relies on the prototype chain. to fulfill.

1. Prototype chain

Basic idea: Use prototypes to let one reference type inherit the properties and methods of another reference type.

The relationship between constructors, prototypes, and instances: Each constructor has a prototype object, the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

Prototype chain implementation inheritance example:

function SuperType() {
this .property = true ;
}
SuperType.prototype.getSuperValue = function () {
return this .property;
}
function subType() {
this .property = false ;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this .property;
}
var instance = new SubType();
console.log(instance.getSuperValue()); //true

2. Borrowing the constructor

Basic idea: call inside the subtype constructor Superclass constructor, the constructor can be executed on the newly created object by using the call() and apply() methods.

Example:

function SuperType() {
this .colors = [ "red" , "blue" , "green" ];
}
function SubType() {
SuperType.call( this ); //继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push( "black" );
console.log(instance1.colors); //"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors); //"red","blue","green"

3. Combined inheritance

Basic idea: combine the prototype chain and the technology of borrowing constructors, An inheritance model that leverages the best of both worlds.

Example:

function SuperType(name) {
this .name = name;
this .colors = [ "red" , "blue" , "green" ];
}
SuperType.prototype.sayName = function () {
console.log( this .name);
}
function SubType(name, age) {
SuperType.call( this ,name); //继承属性
this .age = age;
}
//继承方法
SubType.prototype = new SuperType();
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function () {
console.log( this .age);
}
var instance1 = new SubType( "EvanChen" ,18);
instance1.colors.push( "black" );
consol.log(instance1.colors); //"red","blue","green","black"
instance1.sayName(); //"EvanChen"
instance1.sayAge(); //18
var instance2 = new SubType( "EvanChen666" ,20);
console.log(instance2.colors); //"red","blue","green"
instance2.sayName(); //"EvanChen666"
instance2.sayAge(); //20

4. Prototypal inheritance

Basic idea: With the help of prototypes, new objects can be created based on existing objects. It is also not necessary to create custom types.

The idea of ​​prototypal inheritance can be illustrated by the following function:

function object(o) {
function F(){}
F.prototype = o;
return new F();
}

Example:

var person = {
name: "EvanChen" ,
friends:[ "Shelby" , "Court" , "Van" ];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg" ;
anotherPerson.friends.push( "Rob" );
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda" ;
yetAnotherPerson.friends.push( "Barbie" );
console.log(person.friends); //"Shelby","Court","Van","Rob","Barbie"

ECMAScript5 standardizes prototypal inheritance through the new Object.create() method. This The method accepts two parameters: an object that serves as the prototype of the new object and an object that defines additional properties for the new object.

var person = {
name: "EvanChen" ,
friends:[ "Shelby" , "Court" , "Van" ];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg" ;
anotherPerson.friends.push( "Rob" );
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda" ;
yetAnotherPerson.friends.push( "Barbie" );
console.log(person.friends); //"Shelby","Court","Van","Rob","Barbie"

5. Parasitic inheritance

Basic idea: Create a function that is only used to encapsulate the inheritance process, which is used internally in some way Enhance the object and finally return the object as if it really did all the work.

Example:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert( "hi" );
};
return clone;
}
var person = {
name: "EvanChen" ,
friends:[ "Shelby" , "Court" , "Van" ];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); ///"hi"

6. Parasitic combined inheritance

Basic idea: Inherit properties by borrowing functions, through the prototype chain Mixed form to inherit methods

The basic model is as follows:

function inheritProperty(subType, superType) {
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}

Example:

function SuperType(name){
this .name = name;
this .colors = [ "red" , "blue" , "green" ];
}
SuperType.prototype.sayName = function (){
alert( this .name);
};
function SubType(name,age){
SuperType.call( this ,name);
this .age = age;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function () {
alert( this .age);
}

[Recommended learning:javascript advanced tutorial 】

The above is the detailed content of How does javascript implement inheritance?. For more information, please follow other related articles on the PHP Chinese website!