Several inheritance methods in Javascript

Several inheritance methods in Javascript
In the 'strict' sense, javascript is not a real object-oriented language. The reason for this is that javascript, as a weak language, is very different from the inheritance method of a strong language like java or c, by default, it is a non-mainstream object-oriented method, and many books have even described it as a non-fully object-oriented language. In fact, I personally think that what method is not important. What is important is whether we have the idea of object-oriented. javascript is not an object-oriented language and may not be studied in depth, this article is specially written for communication. Why is it true that javascript can be used to inherit the performance of early pc machines? All the pressure is on the server side, and the client browser is purely a decoration. In addition, the popular table layout at that time and the Internet access through telephone lines led to a very powerful card for browsing a webpage. Today, the rapid development of the Internet era has greatly improved the personal computer hardware, the client browser is also very sour in performance, and the web development model is also quietly changing: the server is no longer as "hard" as before ", instead, let the browser handle more tasks as much as possible. As a result, the pressure is distributed to each client, which not only saves the cost, as a result, web Front-end development becomes more interesting-more and more front-end frameworks are emerging, and many front-end MVC frameworks are even emerging. In this context, the role of javascript is definitely not only for some simple verification, send some requests or operate some DOM, more need to assume a role similar to the front-end routing and service layer, in addition, javascript requires a lot of logic tasks, including the extraction of front-end data (that is, model). Only by using object-oriented thinking can we process the extraction data well, therefore, inheritance plays an important role here. Starting from a simple requirement, a model named "Person" is extracted from the foreground, which has the basic attribute name and age. By default, everyone can talk. Therefore, the "say" function is placed on the prototype object, for each instance. For Man, it needs to inherit the basic attributes of Person and add its own unique attributes. Function Person (name, age) {this. name = name; this. age = age;} Person. prototype. say = function () {console. log ('hello, my name is '+ this. name) ;}; function Man () {// my own properties} 12345678910 The following describes several mainstream inheritance methods. 1. prototype chain inherits function Person (name, age) {this. name = name; this. age = age;} Person. prototype. say = function () {console. log ('hello, my name is '+ this. name) ;}; function Man () {} Man. prototype = new Person ('pursue '); var man1 = new Man (); man1.say (); // hello, my name is pursuevar man2 = new Man (); console. log (man1.say === man2.say); // trueconsole. log (man1.name = man2.name); // true123456789101112131415 this inheritance method is straight To obtain all the property methods of the Person (on the instance and on the prototype), the new Person ('pursue ') of the parent class is directly assigned to the prototype of the subclass, in fact, the sub-instance man1 and man2 are completely empty objects. All attributes and methods have to be searched through the prototype chain, so the attribute methods found are the same. Therefore, it is unrealistic to directly use prototype chain inheritance. 2. use the constructor to inherit function Person (name, age) {this. name = name; this. age = age;} Person. prototype. say = function () {console. log ('hello, my name is '+ this. name) ;}; function Man (name, age) {Person. apply (this, arguments);} // Man. prototype = new Person ('pursue '); var man1 = new Man ('job'); var man2 = new Man ('David'); console. log (man1.name = man2.name); // falseman1.say (); // say is not a function123456789101112 131415 here, The subclass uses apply to call the constructor of the parent class in the constructor to inherit the attributes of the parent class, which is much better than directly using the prototype chain, at least each instance has its own resource, but this method can only inherit the instance attributes of the parent class. Therefore, the say method cannot be found. In order to inherit all attributes and methods of the parent class, the prototype chain is modified to introduce the combination inheritance method. 3. combination inherits function Person (name, age) {this. name = name; this. age = age;} Person. prototype. say = function () {console. log ('hello, my name is '+ this. name) ;}; function Man (name, age) {Person. apply (this, arguments);} Man. prototype = new Person (); var man1 = new Man ('job'); var man2 = new Man ('David'); console. log (man1.name = man2.name); // falseconsole. log (man1.say === man2.say); // trueman1.say (); // hello, my Name is joe12345678910111213141516 note that the instance attributes of man1 and man2 actually overwrite the prototype attributes, but do not overwrite the say method on the prototype (because they do not exist ), therefore, here man1.say = man2.say still returns true, so be careful not to overwrite the prototype attribute because it is shared by all instances. 4. Parasitic combination inheritance to be honest I really don't know the following form called this name, but it is indeed the most popular and classic Inheritance Method of javascript. In fact, you only need to understand the structure of the prototype object: function Person (name, age) {this. name = name; this. age = age;} Person. prototype. say = function () {console. log ('hello, my name is '+ this. name) ;}; function Man (name, age) {Person. apply (this, arguments);} Man. prototype = Object. create (Person. prototype); //. man. prototype. constructor = Man; // B. var man1 = new Man ('pursue '); var man2 = new Man ('job'); console. log (man1.say = man2.say); c Onsole. log (man1.name = man2.name); 12345678910111213141516 actually, the difference between the parasitic combination inheritance and the above combination inheritance lies only in the method of constructing the subclass prototype object (. and B .), the Object is used here. creat (obj) method. This method performs a shortest copy on the passed obj object, similar to: function create (obj) {function T () {}; T. prototype = obj; return new T ();} 12345 therefore,. the prototype object of the subclass is connected to the prototype object of the parent class, instead of copying the prototype of the subclass directly like the typical combination inheritance (such as Man. prototype = new Person ();), which overwrites the attributes violently. The parasitic combination Inheritance Method inherits the instance attributes and prototype attributes respectively, making the implementation more reasonable.