JavaScript inheritance, and then talk about

When it comes to JavaScript inheritance, I believe that as long as the front-end developers have some understanding or application, because this is too basic knowledge. But I do not know whether you have in-depth understanding of the mystery and mysteries. Today I am not, but also want to use their own understanding to say that the mystery and mystery.

I. Development officials of class succession

• Inheritance of function implementations

function inheritance is a complete imitation of OOP's programming ideas. Implementation is the inheritance of the class

• Inheritance of Object.create implementations

Use Object.create to modify its prototype

• Inheritance of ES6

Added class to emulate the inheritance implementation of OOP. Both of these inherited implementations, he is still supported.

Second, the realization of class succession in each period

• Implementation of the function inheritance method (OOP)

functionAnimate (name) { This. Name =name;} Animate.prototype.getName=function(){    return  This. Name;functionDog (name) {animate.apply ( This, arguments);  This. Leg = 4;} Dog.prototype=Inherit (Animate, Dog);D Og.prototype.say=function(){    return' Wang ';}//Inheritance of function modefunctionInherit (parent, child) {//to create a class without a prototype method    functionf () {} F.prototype= Parent.prototype;//Assigning a prototype of a parent object to a temporary objectF.prototype.constructor = child;//The subclass constructor is bound to the prototype prototype of the temporary object, keeping the subclass constructor consistent with the prototype.     return Newf ();//The constructor for F is executed without executing the constructor that Prototype.constructor points to} varDog =NewDog (' dog ')); Console.log (' GetName: ' + dog.getname ());//DogConsole.log ("Say:" + Dog.say ());//WangConsole.log (' Dog instanceof Animate: ' + (doginstanceofAnimate));//trueConsole.log (' Dog instanceof Animate: ' + (doginstanceofDOG));//true

There are many kinds of inheritance of OOP, such as: Prototype chain, realization, combination, parasitic combination inheritance, etc. The above implementation is a common and perfect scheme for parasitic combination inheritance.

• Object.create Implementing inheritance
  This is an upgraded version of class inheritance and requires an understanding of the Object.create method. Object.create (Proto, [Propertiesobject]), where Proto is the prototype object for the newly created object, and Propertiesobject is optional, an enumerable property to add to the newly created object (that is, its own defined properties, Rather than the properties on the prototype link).
  We also need to know the method: Object.setprototypeof (the method of writing the internal prototype); Object.getprototypeof (the method of reading the internal prototype). Internal prototype: [[prototype]] = = Proto
  After the transformation of the above inheritance code

functionAnimate (name) { This. Name =name;} Animate.prototype.getName=function(){    return  This. Name;functionDog (name) {animate.apply ( This, arguments);  This. Leg = 4;} Inherit (Animate, Dog); //Call Point RetrofitDog.prototype.say =function(){    return' Wang ';}//transformation of implementation method of inheritancefunctionInherit (parent, child) {Child.prototype= Object.create (Parent.prototype);//create to implement prototype replication on parentChild.prototype.constructor = child;//to point a constructor back to a subclass} varDog =NewDog (' dog ')); Console.log (' GetName: ' + dog.getname ());//DogConsole.log ("Say:" + Dog.say ());//WangConsole.log (' Dog instanceof Animate: ' + (doginstanceofAnimate));//trueConsole.log (' Dog instanceof Animate: ' + (doginstanceofDOG));//true

2.1 Attempts at prototype

The example above uses the Object.create method to create an object and then assigns the value to prototype, and why not change its prototype value directly without Object.setprototypeof method. The reason excerpt originates from the MDN:

Changing the object's [[Prototype]] is a slow operation on each browser and JavaScript engine due to the nature of the features that modern JavaScript engine optimizes for property access. Its effect on changing the performance of inheritance is subtle and extensive, not limited to obj.Proto = ... The time spent on the statement, and may extend to any code that can access any object that [[Prototype] has been changed. If you care about performance, you should avoid setting an object's [[Prototype]]. Instead, you should use Object.create () to create a new object with the [[Prototype]] you want.

Implementation of object inheritance:

varAnimate ={name:"Name"};object.setprototypeof (animate,{getName:function(){        return  This. Name; }});varDog ={leg:4};object.setprototypeof (dog,{say:function(){        return' Wang '; }}); Object.setprototypeof (Object.getprototypeof (dog), object.getprototypeof (animate)); Console.log (' GetName: ' + dog.getname ());//DogConsole.log ("Say:" + Dog.say ());//Wang

Implementation of ES6 class inheritance

ES6 provides native support for class inheritance, which makes JavaScript more like the backend language, and is simple to use as follows:

class animate{Constructor (name) { This. Name =name} getName () {return  This. Name;        }}class Dog extends animate{constructor (name) {super (name);  This. Leg = 4; } say () {return"Wang"; }}varDog =NewDog (' dog ')); Console.log (' GetName: ' + dog.getname ());//DogConsole.log ("Say:" + Dog.say ());//WangConsole.log (' Dog instanceof Animate: ' + (doginstanceofAnimate));//trueConsole.log (' Dog instanceof Animate: ' + (doginstanceofDOG));//true

Iv. Summary and questions

After combing through this article, do you find that the class inheritance of JavaScript is more and more simple, closer to the static compiler language such as Java,.net, perhaps this is the so-called philosophy of all things belong to one. But there is still a big question: The Object.setprototypeof method is not recommended in MDN, and it is said that changing the internal [[prototype]] property has performance issues and effects. Do not know what the influence of the gods to designate .

JavaScript inheritance, and then talk about