3 ways to implement inheritance and code instances in JavaScript _javascript tips

Inheritance is a very important tool when we implement object-oriented programming. Although we say that we cannot inherit too much and use a combination instead of inheritance, inheritance is always unavoidable. Here is a discussion of the inheritance mechanism in JavaScript.

JavaScript is actually not a concept of inheritance, but we can use some means to imitate it. This kind of inheritance actually copies an object to the inside of another object. You need to be aware that all local classes and host classes are not inherited as base classes, primarily for security reasons.

There are about three classes of inheritance in JavaScript: 1. Object posing; 2. prototype inheritance; 3. The mixture of the two.

A, object posing

In fact, object impersonation is closely related to this keyword (so it is important to fully understand the This keyword in javascript: P). Constructor uses this to assign values to properties and methods. The constructor can also look as a normal function, so we can make the constructor of our base class the constructor of the subclass, then call the function inside the subclass, then the subclass will get the properties and methods of the parent class.

The principle is very simple, then how do we achieve it? Here is a code example, the actual operation.

Object Impersonation Implementation method One , our most common method of creating new objects:

Copy Code code as follows:

var ClassA = function (name) {
THIS.name = name;
This.alertname = function () {
alert (this.name);
}
}

var classb = function (name,age) {
This.myconstructor = ClassA;
This.myconstructor (name);
Delete This.myconstructor;

This.age = age;
This.alertage = function () {
alert (this.age);
}
}

To verify that the above method is correct, you can test it yourself, and I'll write the test code below:

Copy Code code as follows:

var obja = new ClassA (' DK ');
Obja.alertname ();//dk

var objb = new ClassB (' DS ', 20);

Objb.alertname ();//ds
Objb.alertage ();//20

This is the so-called object impersonate, another object to impersonate there are two other ways of implementation, although their means of implementation is different, but they are the same principle.

Object Impersonation Implementation method two , using the call method:

Copy Code code as follows:

var ClassA = function (name) {
THIS.name = name;
This.alertname = function () {
alert (this.name);
}
}

var classb = function (name,age) {
Classa.call (This,name);

This.age = age;
This.alertage = function () {
alert (this.age);
}
}

As can be seen through the code, we create a new function pointer to the parent class, call the function, and then delete the pointer. And here we use the call method to run the constructor of the parent class under this object to achieve the same purpose. In addition to the call method is relative to the Apply method.

Object Impersonation Implementation Method III , using the Apply method:

Copy Code code as follows:

var ClassA = function (name) {
THIS.name = name;
This.alertname = function () {
alert (this.name);
}
}

var classb = function (name,age) {
Classa.apply (this,new Array (name));

This.age = age;
This.alertage = function () {
alert (this.age);
}
}

In fact, you can see that the Apply method is very similar to the call method, except that the passing parameters are slightly different.

Second, prototype inheritance

You should have an understanding of the prototype object, all the properties and methods on the prototype object will be passed to all instances of the class, and all of the attributes and methods of the parent class to the prototype object of the subclass are equivalent to implementing our inheritance.

Subclasses want to get all the properties and methods of the parent class, we pay an instance of the parent class directly to the prototype object of the subclass, so our subclass is not the equivalent of getting all the objects and methods of the parent class?

The code example waits for:

Copy Code code as follows:

var ClassA = function () {
this.name = ' DK ';
This.alertname = function () {
alert (this.name);
}
}

var classb = function (name,age) {
THIS.name = name;
This.age = age;
}

Classb.prototype = new ClassA ();

ClassB.prototype.alertAge = function () {
alert (this.age);
}

Note that the constructor of the parent class here needs to be sure that there are no parameters. Because even if there are construction parameters, you can't pass the =.=! when you implement the prototype inheritance.

Third, hybrid inheritance

As the name suggests, hybrid inheritance is a mixture of the first two ways.

Copy Code code as follows:

var ClassA = function (name) {
THIS.name = name;
}

ClassA.prototype.alertName = function () {
alert (this.name);
}

var classb = function (name,age) {
Classa.call (This,name);
This.age = age;
}

Classb.prototype = new ClassA ();

ClassB.prototype.alertAge = function () {
alert (this.age);
}

The use of object impersonation implements passing arguments to the parent class, while using prototype inheritance to implement the inheritance of the public method.

Having finished the three ways of inheriting, it's time to talk about the problem.

You may not understand why there is an object posing, there is a prototype inheritance to make a mixed inheritance, yes, the most important is the problem.

1. If you actually test it, you will find that the inheritance that is implemented through object impersonation is a method that cannot be accessed to the prototype chain of the parent class.

2. Instead of inheriting with a prototype, all attributes will be turned into shared properties, and if you implement two instances of the same subclass, you will find that all of your instances share all of the attributes.

3. But that's certainly not the right one. So there is a hybrid inheritance approach that allows attributes to remain private, while allowing subclasses to access the prototype chain of the parent class.

You can try it yourself, when the object is impersonating inheritance, the subclass cannot access the prototype chain method of the parent class, and the prototype chain inherits all instances of the subclass to share all the parent class properties. I'm not going to write an example here.