Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "does javascript have inheritance", the content is detailed, the steps are clear, and the details are handled properly. I hope this "javascript has inheritance" article can help you solve your doubts.

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

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

Does javascript inherit

JavaScript has 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 the parent class. The process of inheritance is from the general to the special.

How does JavaScript implement inheritance?

1. Prototype chain

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

Relationships between constructors, prototypes, and instances: each constructor has a prototype object, which contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

Example of prototype chain implementation inheritance:

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

2. Borrow the constructor

Basic idea: the superclass constructor is called inside the subtype constructor, which 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); / / inherits 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. Combinatorial inheritance

Basic idea: an inheritance pattern that combines the prototype chain with the technology of borrowing constructors to give full play to the strengths 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); / / inheritance attribute this.age = age;} / / inheritance method 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 (); / / 18var instance2 = new SubType ("EvanChen666", 20); console.log (instance2.colors); / / "red", "blue", "green" instance2.sayName (); / / "EvanChen666" instance2.sayAge (); / /

4. Prototype inheritance

Basic idea: prototypes can be used to create new objects based on existing objects without having to create custom types.

The idea of prototype inheritance can be illustrated by the following functions:

Function object (o) {function F () {} F.prototype = obot 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 normalizes prototype inheritance by adding the Object.create () method, which takes two parameters: an object that is used as the prototype of the new object and an object that defines additional properties as 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

The basic idea: create a function that encapsulates the inheritance process, enhances the object internally 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"

6. Parasitic combinatorial inheritance

Basic idea: inherit attributes by borrowing functions and inherit methods through the mixed form of prototype chains

The basic model is as follows:

Function inheritProperty (subType, superType) {var prototype = object (superType.prototype); / / create object prototype.constructor = subType;// enhanced object subType.prototype = prototype;// specified object}

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) } after reading this, the article "does javascript inherit?" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.