How JavaScript implements inheritance (six ways)_javascript tips-JS Tutorial-php.cn

How JavaScript implements inheritance (six ways)_javascript tips

WBOY

Release： 2016-05-16 15:07:18

Original

1270 people have browsed it

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.

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 instances contain 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

Copy after login

2. Borrow constructor

Basic idea: Call the superclass constructor inside the subtype constructor, and 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"

Copy after login

3. Combination inheritance

Basic idea: An inheritance model that combines the technology of prototype chain and borrowed constructor to take advantage of both.

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

Copy after login

4. Prototypal inheritance

Basic idea: With the help of prototypes, new objects can be created based on existing objects without having 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();
}

Copy after login

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"

Copy after login

ECMAScript5 standardizes prototypal inheritance through the new Object.create() method. This method receives two parameters: an object used as the prototype of the new object and an object used as the new object to define additional properties.

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"

Copy after login

5. Parasitic inheritance

Basic idea: Create a function that is only used to encapsulate the inheritance process, which internally enhances the object in some way, and finally returns 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"

Copy after login

6. Parasitic combined inheritance

Basic idea: inherit properties by borrowing functions, and inherit methods through the hybrid form of the prototype chain

The basic model is as follows:

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

Copy after login

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);
}

Copy after login

The above content introduces you to the six ways to implement inheritance in JavaScript. I hope it will be helpful to you!