How JavaScript implements inheritance (six methods) and six javascript methods

How JavaScript implements inheritance (six methods) and six javascript methods

Most OO languages support two inheritance Methods: interface inheritance and implementation inheritance, while interface inheritance cannot be implemented in ECMAScript. ECMAScript only supports implementation inheritance, in addition, its implementation inheritance mainly relies on the prototype chain.

1. prototype chain

Basic Idea: Use a prototype to inherit the attributes and methods of another reference type.

Constructor, prototype, and instance relationships: Each constructor has a prototype object that contains a pointer to the constructor, 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;} // inherits the SuperTypeSubType. prototype = new SuperType (); SubType. prototype. getSubValue = function () {return this. property;} var instance = new SubType (); console. log (instance. getSuperValue (); // true

2. Borrow Constructors

Basic Idea: call the superclass constructor within the sub-Type constructor. You can use the call () and apply () Methods to execute constructor on the newly created object.

Example:

Function SuperType () {this. colors = ["red", "blue", "green"];} function SubType () {SuperType. call (this); // inherits the 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

The basic idea is to combine the prototype chain and borrow the constructor technology to give full play to an inheritance mode of the two.

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); // inherits the 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. Original Type inheritance

Basic Idea: You can use a prototype to create a new object based on an existing object without creating a custom type.

The idea of original type inheritance can be described using the following functions:

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 the original type inheritance by adding the Object. create () method. This method receives two parameters: an Object used as the new Object prototype and an Object used as the new Object to define additional attributes.

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. The function enhances the object in some way internally, and then returns the object as if it 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 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 the prototype object. constructor = subType; // enhancement object subType. prototype = prototype; // specifies the 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);}

The above content introduces six methods for implementing inheritance in javascript, and I hope it will be helpful to you!

Articles you may be interested in:

• Javascript Object-Oriented Programming (3) Inheritance of non-Constructor
• Introduction to javascript prototype inheritance
• Closure and simulation class in JavaScript advanced, inheritance (5)
• JavaScript object-oriented Prototypes and inheritance
• JS inheritance-prototype chain inheritance and class inheritance
• A deep understanding of prototype and inheritance in javascript
• Modularization of JavaScript: encapsulation (closure), inheritance (prototype) Introduction
• Multi-inheritance example using mixins in ExtJS4
• A deep understanding of how JavaScript implements inheritance
• Summary of several inherited usage methods in js (apply, call, prototype)