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

This article will explain in detail how javascript is inherited. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Methods: 1, use the prototype to let one reference type inherit the properties and methods of another reference type; 2, borrow the constructor, call the superclass constructor inside the subclass constructor, and execute the constructor on the newly created object by using call () and apply (); 3, combine the prototype chain and borrowed constructor technology together to achieve inheritance.

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

Most OO languages support two kinds of inheritance: interface inheritance and implementation inheritance, but interface inheritance cannot be implemented in ECMAScript. ECMAScript only supports implementation inheritance, and its implementation inheritance mainly depends on prototype chain.

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 () {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

two。 Borrow 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 = ["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 .name = ["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 (); / / 20

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; / / specify object}

Example:

Function SuperType (name) {this. Name = name;this .name = ["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) } this is the end of the article on "how javascript inherits". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.