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

There are two ways of inheritance: interface inheritance and implementation inheritance. Interface inheritance inherits only the method signature, while implementation inheritance inherits the actual method.

Interface inheritance cannot be implemented in ECMAScript because the function is not signed. ECMAScript only supports implementation inheritance, and implementation inheritance is mainly implemented by prototype chains.

Here are several types of js inheritance:

Back to the top.

Prototype chain inheritance

The essence of prototype chain inheritance implementation is to rewrite prototype objects and replace them with an instance of a new type. The code is as follows:

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

You can see that instance calls the parent's getSuperVlue () method, implementing inheritance.

The inheritance of the prototype chain has the following problems:

When you include a prototype with a reference type value, when you change the reference type of the prototype, it will all be changed.

When creating an instance of a subtype, there is no way to pass parameters to the supertype constructor without affecting all object instances

The sample code is as follows:

Function SuperType1 () {this.colors = ['red',' blue', 'green'];} function SubType1 () {} SubType1.prototype = new SuperType1 (); var instance1 = new SubType1 (); instance1.colors.push (' black'); console.log (instance1.colors); / / ['red',' blue', 'green',' black'] var instance2 = new SubType1 (); console.log (instance2.colors) / / ['red',' blue', 'green',' black']

You can see that the colors property of instance1 and instance2 is shared, which is a problem, and it can also be seen that in a new method of new, if the value is passed, it will not be passed to the parent.

Back to the top.

Borrow constructor

The principle is to call the supertype constructor inside the child type constructor, because the function is simply an object that executes code in a particular environment, so you can get the methods and properties of the parent.

The code is as follows:

Function SuperType (name) {this.name = name;} function SubType (name) {/ / inherits SuperType and passes the parameter SuperType.call (this, name); / / instance property this.age = 29;} var instance = new SubType ('Bob'); console.log (instance.name); / / Bobconsole.log (instance.age); / / 29

As you can see, calling constructor inheritance solves the problem of passing parameters to the parent type, but calling the constructor also has its own problems:

Methods are all in the constructor, and function reuse is gone.

The methods defined in the prototype of the supertype are invisible to subtypes.

The first problem is obvious, and the explanation for the second problem is that because the function is executed only once, and there is no new new object, the methods in the parent class prototype are not visible to the subclass.

Back to the top.

Combinatorial inheritance

Because prototype chain inheritance and borrowing constructor inheritance are flawed, they are generally not used alone in practice.

Combinatorial inheritance is an inheritance method that borrows the advantages of both.

The principle is to use the prototype chain to inherit the prototype properties and methods, and to inherit the instance properties by borrowing the constructor.

The code is as follows:

Function SuperType (name) {this.name = name; this.colors = ['red',' blue', 'green'];} SuperType.prototype.sayName = function () {console.log (this.name);}; function SubType (name, age) {/ / inheritance attribute SuperType.call (this, name); 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 ('Nicholas', 29); instance1.colors.push (' black'); console.log (instance1.colors); / / ['red',' blue', 'green',' black'] instance1.sayName (); / / Nicholasinstance1.sayAge (); / / 29var instance2 = new SubType ('Greg', 27); console.log (instance2.colors) / / ['red',' blue', 'green'] instance2.sayName (); / Greginstance2.sayAge (); / / 27

Combinatorial inheritance can solve the problems caused by the above two inheritance methods, but combinatorial inheritance also has its own small problem, that is, the supertype constructor is called twice. Through analysis, we can know that one is when creating a subtype prototype. The other is inside the subtype constructor.

Back to the top.

Parasitic combinatorial inheritance

The principle of parasitic combinatorial inheritance is to inherit properties by borrowing constructors and methods through mixed forms of prototype chains. The basic idea is that there is no need to call supertype constructors in order to specify the prototype of a subtype. all we need is a copy of the supertype prototype.

The code is as follows:

Function object (o) {function F () {} F.prototype = o; return new F;} function inheritPrototype (subType, superType) {var prototype = object (superType.prototype); prototype.constructor = subType; subType.prototype = prototype;} 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;} / / inherited key inheritPrototype (SubType, SuperType); SubType.prototype.sayAge = function () {console.log (this.age);}; var instance = new SubType ('Tianya', 23); instance.sayName (); instance.sayAge ()

Parasitic combinatorial inheritance only executes the supertype once when the constructor is called, which solves the small problem of combinatorial inheritance.

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.