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

In this issue, the editor will bring you about the generation process from the prototype chain schematic inheritance to combinatorial inheritance in js. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

It is very simple to implement inheritance based on the progressive lookup rules of the javascript prototype chain and the shared features of the prototype object (prototype).

1. By assigning the instance object of the parent class to the prototype object (prototype) of the subclass, you can inherit

Function Person () {this.userName = 'ghostwu';} Person.prototype.showUserName = function () {return this.userName;} function Teacher () {} Teacher.prototype = new Person (); var oT = new Teacher (); console.log (oT.userName); / / ghostwu console.log (oT.showUserName ()); / / ghostwu

Inheritance can be achieved by assigning an instance of the parent class (Person) to the prototype object of the subclass Teacher, and the instance of the subclass can access the properties and methods of the parent class.

If you can't draw this picture, you need to read my article:

[road of js Master] step by step to illustrate the prototype (prototype) object and prototype chain of javascript

Line 11, execute oT.userName, first look on the oT object. It is obvious that there are no properties on the oT object, so follow the implicit prototype _ _ proto__ of oT to find the Teacher.prototype.

Found that there is still no userName attribute, continue to look up along the Teacher.prototype.__proto__, and found that the instance of new Person () has a userName with a value of ghostwu.

So stop looking and output ghostwu.

Line 12, the previous procedure for executing oT.showUserName is the same as above, but the showUserName method is still not found on the example new Person (). Continue to follow the new Person ()

The Person.prototype search of the implicit prototype _ _ proto__, found the showUserName method on Person.prototype, stopped the search, and output ghostwu.

Assign the prototype object (prototype) of the parent class to the prototype object (prototype) of the child class, which can inherit the methods of the parent class, but not the properties of the parent class.

Function Person () {this.userName = 'ghostwu';} Person.prototype.showUserName = function () {return' Person::showUserName method';} function Teacher () {} Teacher.prototype = Person.prototype; var oT = new Teacher (); console.log (oT.showUserName ()); / / ghostwu console.log (oT.userName); / / undefined, there is no userName inherited from the parent class

Because the implicit prototype of Teacher.prototype (_ _ proto__) only points to Person.prototype, the properties of the Person instance cannot be obtained.

Third, after the occurrence of inheritance, the judgment of the relationship between the instance and the constructor (class).

Or judge by instanceof and isPrototypeOf.

Function Person () {this.userName = 'ghostwu';} Person.prototype.showUserName = function () {return this.userName;} function Teacher () {} Teacher.prototype = new Person (); var oT = new Teacher (); console.log (oT instanceof Teacher); / / true console.log (oT instanceof Person); / / true console.log (oT instanceof Object); / / true console.log (Teacher.prototype.isPrototypeOf (oT)); / / true console.log (Person.prototype.isPrototypeOf (oT)) / / true console.log (Object.prototype.isPrototypeOf (oT)); / / true

Fourth, the methods and properties of the parent class can be overridden (overridden), and the methods and properties that the subclass does not have can be extended.

Function Person () {} Person.prototype.showUserName = function () {console.log ('Person::showUserName');} function Teacher () {} Teacher.prototype = new Person (); Teacher.prototype.showUserName = function () {console.log (' Teacher::showUserName');} Teacher.prototype.showAge = function () {console.log (22);} var oT = new Teacher (); oT.showUserName (); / / Teacher::showUserName oT.showAge (); / / 22

5. After rewriting the prototype object, you actually change the direction of the _ _ proto__ of the prototype object

The direction of the _ _ proto__ of the prototype object prototype has changed, overwriting (cutting off) the original inheritance relationship.

Function Person () {} Person.prototype.showUserName = function () {console.log ('Person::showUserName');} function Teacher () {} Teacher.prototype = new Person (); Teacher.prototype = {showAge: function () {console.log (22);}} var oT = new Teacher (); oT.showAge (); / / 22 oT.showUserName ()

In the above example, in line 7, Teacher.prototype rewrites the prototype object (prototype) of Teacher, and the implicit prototype (_ _ proto__) of the prototype object in line 6 has no effect.

So in line 14, a call error occurs in oT.showUserName () because the implicit prototype (_ _ proto__) of Teacher's prototype object (prototype) no longer points to an instance of the parent class (Person) and the inheritance relationship is broken.

In the process of inheritance, carefully handle the data of the reference type on the properties of the instance

Function Person () {this.skills = ['php',' javascript'];} function Teacher () {} Teacher.prototype = new Person (); var oT1 = new Teacher (); var oT2 = new Teacher (); oT1.skills.push ('linux'); console.log (oT2.skills); / / php, java, linux

OT1's skills adds an item of linux data that can be accessed by other instances because skills data is shared in other instances, and skills is a reference type

7. Borrowing constructor

In order to eliminate the influence of reference types on different instances, you can use the constructor to copy the data of reference types to each object so that they do not affect each other.

Function Person (uName) {this.skills = ['php',' javascript']; this.userName = uName;} Person.prototype.showUserName = function () {return this.userName;} function Teacher (uName) {Person.call (this, uName);} var oT1 = new Teacher (); oT1.skills.push ('linux'); var oT2 = new Teacher (); console.log (oT2.skills); / / php,javascript console.log (oT2.showUserName ())

Although oT1.skills adds a Linux, it does not affect the data of oT2.skills. Through the way of call in the constructor of the subclass, it borrows the constructor of the parent class to copy the properties of the parent class.

Pass parameters, such as line 8, but line 15, the method call error, because only the properties are copied in the construction, not to the methods on the parent prototype object

8. Combinatorial inheritance (prototype object + borrowing constructor)

After the above analysis, the disadvantages of a single prototype inheritance are:

1. Parameters cannot be passed, such as

Teacher.prototype = new Person ()

Some people say that parentheses can be followed by parameters, yes, but as long as they are followed by parameters, all instance properties of subclasses are the same as this. To put it bluntly, they still cannot pass parameters.

2. Putting the reference type on the prototype object will influence each other on different instances

The disadvantages of a single borrowing constructor:

1. Methods that cannot be copied to the parent class

It just so happens that the shortcomings of the prototype object method can be made up for by borrowing the constructor, and the prototype object method can make up for the shortcomings of the constructor, so a method of combinatorial inheritance is produced:

Function Person (uName) {this.skills = ['php',' javascript']; this.userName = uName;} Person.prototype.showUserName = function () {return this.userName;} function Teacher (uName) {Person.call (this, uName);} Teacher.prototype = new Person (); var oT1 = new Teacher ('ghostwu'); oT1.skills.push (' linux'); var oT2 = new Teacher ('ghostwu'); console.log (oT2.skills) / / php,javascript console.log (oT2.showUserName ()); / / ghostwu

The skills of the subclass instance oT2 is not affected by oT1, and the subclass instance can also call the methods of the parent class.

The above is the js shared by the editor from the prototype chain to the generation process of combinatorial inheritance. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.