Does javascript have inheritance?-Front-end Q&A-php.cn

JavaScript has inheritance. JavaScript inheritance is a mechanism that allows us to create new classes based on existing classes. Inheritance can provide flexibility for subclasses. You can reuse methods and variables of parent classes, and you can use prototype chains and constructors to achieve inheritance.

Does javascript have inheritance?

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

Does JavaScript have inheritance?

JavaScript inheritance is a mechanism that allows us to create new classes based on existing classes; it provides flexibility for subclasses to reuse methods and variables of parent classes. The process of inheritance is the process from general to special.

How does JavaScript implement inheritance?

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

Copy after login

2. Borrowing constructor

Basic idea: call the superclass constructor inside the subtype constructor Functions that execute constructors on newly created objects 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. Combined inheritance

Basic idea: Combine the prototype chain and borrowing constructor technologies together to bring out the best of both worlds. A pattern of inheritance based on one’s strengths.

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 A custom type must therefore be created.

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 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"

Copy after login

5. Parasitic inheritance

Basic idea: Create a function only to encapsulate the inheritance process, which enhances the object in some way internally, Finally, the object is returned 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 use the hybrid form of the prototype chain to The basic model of inheritance method

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

Related recommendations:javascript learning tutorial

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