A brief discussion on the three inheritance methods and their advantages and disadvantages in js

The first method of prototype:

 //Presiding class function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //Subclass function man(){ this.feature = ['beard','strong']; } man.prototype = new person(); var one = new man(); console.log(one.feature); //['beard','strong'] console.log(one.hair); //black console.log(one.eye); //black console.log(one.skin); //yellow console.log(one.view()); //black,black,yellow

This method is the simplest. You only need to assign the prototype attribute value of the subclass to an inherited instance, and then you can directly use the inherited class method.

What does the prototype attribute mean? prototype is the prototype. Each object (defined by function) has a default prototype property, which is an object type.

And this default attribute is used to implement up-slide check of the chain. This means that if the attribute of an object does not exist, the attribute will be found through the object to which the prototype attribute belongs. What if the prototype cannot be found?

js will automatically find the object to which the prototype property belongs to the prototype attribute belongs, so that it will continue to index up through the prototype until the property or the prototype is found and finally empty ("undefined");

For example, in the one.view() method in the above example, js will first look for whether there is a view() method in the one instance. Because there is no, it looks for the man.prototype attribute, and the value of prototype is an instance of person.

This instance has a view() method, so the call is successful.

The second way is to apply:

 //Presiding class function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //Subclass function man(){ // person.apply(this,new Array()); person.apply(this,[]); this.feature = ['beard','strong']; } var one = new man(); console.log(one.feature); //['beard','strong'] console.log(one.hair); //black console.log(one.eye); //black console.log(one.skin); //yellow console.log(one.view()); //black,black,yellow

Note: If the apply parameter is empty, that is, no parameter is passed, it will be passed through new Array() and [], and null is invalid.

The third type is call+prototype:

 //Presiding class function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //Subclass function man(){ // person.apply(this,new Array()); person.call(this,[]); this.feature = ['beard','strong']; } man.prototype = new person(); var one = new man(); console.log(one.feature); //['beard','strong'] console.log(one.hair); //black console.log(one.eye); //black console.log(one.skin); //yellow console.log(one.view()); //black,black,yellow

The implementation mechanism of the call method requires one more man.prototype = new person(); Why?

That's because the call method only implements method replacement and does not copy object attributes.

This is how the Google Map API inherits.

The above summarizes the implementation of three inheritance methods. But each method has its advantages and disadvantages.

If the parent class is like this:

 //The parent class function person(hair,eye,skin){ this.hair = hair; this.eye = eye; this.skin = skin; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } }

How should subclasses be designed so that subclass man passes parameters to parent class person while creating objects. The inheritance method of prototype is not applicable.

You must use apply or call method:

 //apply method//subclass function man(hair,eye,skin){ person.apply(this,[hair,eye,skin]); this.feature = ['beard','strong']; } //call method//subclass function man(hair,eye,skin){ person.call(this,hair,eye,skin); this.feature = ['beard','strong']; }

But there are still disadvantages to using the apply method. Why? In js, we have a very important operator, which is "instanceof", which is used to compare whether a certain opposing direction is of a certain type.

For this example, in addition to being a man type, one instance should also be a person type. However, after inheriting the apply method, one does not belong to the person type, that is, the value of (one instanceof person) is false.

After all these, the best way to inherit is the call+prototype method. After that, you can try whether the value of (one instanceof BaseClass) is true.

The third inheritance method also has flaws: when subclassing new objects, you must pass the parameters required by the parent class, and the properties and methods in the parent class will be reproduced. The following inheritance method is perfect:

 function Person(name){ this.name = name; } Person.prototype.getName = function() { return this.name; } function Chinese(name, nation) { Person.call(this, name); this.nation = nation; } //Inherit method function inherit(subClass, superClass) { function F() {} F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass.constructor; } inherit(Chinese, Person); Chinese.prototype.getNation = function() { return this.nation; }; var p = new Person('shijun'); var c = new Chinese("liyatang", "China"); console.log(p); // Person {name: "shijun", getName: function} console.log(c); // Chinese {name: "liyatang", nation: "China", constructor: function, getNation: function, getName: function} console.log(p.constructor); // function Person(name){} console.log(c.constructor); // function Chinese(){} console.log(c instanceof Chinese); // true console.log(c instanceof Person); // true

The above article briefly discusses the three inheritance methods and their advantages and disadvantages in js. This is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.