How to Implement inheritance in Javascript _ javascript tips-js tutorial

This article briefly introduces how to implement several inheritance methods in javascript, which is very practical. If you need it, you can refer to it. S1: everything in js is an object. Think about how to implement the inheritance of the attributes and methods of the parent object. Considering the concept of prototype, at first, I implemented inheritance in this way.

function Parent(){   this.name='123';}Parent.prototype.getName=function(){   return this.name;}function Son(){   this.age=20;}Son.prototype=new Parent();Son.prototype.getAge=function(){   return this.age;}var son=new Son();console.log('Name :'+son.getName()+';Age: '+son.getAge());  VM1777:16 Name :123;Age: 20

We can see from the above that the implementation of Parent inheritance is mainly to override the prototype of Son, so that the Parent attributes and methods are passed to the Son prototype, so that the new Son () the constructed object inherits the attributes and methods from the prototype Parent, which achieves the inheritance effect. However, this will bring about a side effect, when the parent object contains a property of the reference type, the modification of the Child object to the reference type data will affect all the child objects. Obviously, this is not what we need:

function Parent(){   this.name='123';   this.fruits=['apple'];}Parent.prototype.getName=function(){   return this.name;}function Son(){   this.age=20;}Son.prototype=new Parent();Son.prototype.getAge=function(){   return this.age;}var son=new Son();var son1=new Son();console.log(son.fruits);//["apple"]console.log(son1.fruits);//["apple"]son.fruits.push('pear');console.log(son.fruits);//["apple", "pear"]console.log(son1.fruits);//["apple", "pear"]

S2: To solve this problem, each sub-object has a copy of the parent object attribute. In this way, only the attributes under the sub-object are modified, it does not affect other sub-object attributes. To achieve this goal, refer to the previous object impersonating method.

function Parent(){   this.name='123';   this.fruits=['apple'];}Parent.prototype.getName=function(){   return this.name;}function Son(){   Parent.call(this);   this.age=20;}Son.prototype=new Parent();Son.prototype.getAge=function(){   return this.age;}var son=new Son();var son1=new Son();console.log(son.fruits);//["apple"]console.log(son1.fruits);//["apple"]son.fruits.push('pear');console.log(son.fruits);//["apple", "pear"]console.log(son1.fruits);//["apple"]

Previously, I added Parent to the Son function. call (this) is used to impersonate this [new Son object] as the context of the Parent function. this calls the Parent () function, therefore, the attributes and method copies of the parent object are obtained. Therefore, when modifying the attributes and methods of the parent object, it is actually a copy of the modification. Therefore, the effect of all sub-objects is not affected. But because Son. prototype = new Parent (), we get the attributes and methods of the two instances. After we get the copy, we only need the prototype of the Parent object, we can see from the following that we only need getname () in the prototype ();

S3: The next step is to remove the attributes and methods of an instance. At this time, it is time for the constructor to play a role. Read the following code and set the Parent. prototype re-constructs a native object to act as the prototype of the sub-object, and then points the constructor to the sub-constructor.

function Parent(){   this.name='123';   this.fruits=['apple'];}Parent.prototype.getName=function(){   return this.name;}function Son(){   Parent.call(this);   this.age=20;}function Extend(Parent,Son){   var proto = new Object(Parent.prototype);   proto.constructor = Son;   Son.prototype=proto;}Extend(Parent,Son);Son.prototype.getAge=function(){   return this.age;}

The above is all the content of this article. I hope you will like it.