Several ways of inheriting in JavaScript

begins

In a ' strictly ' sense, JavaScript is not a real object-oriented language. The reason for this is generally that javascript as a weak type of language and like Java or C #, such as the inheritance of strong language is very different, so by default it is a non-mainstream object-oriented approach, and even a lot of books described it as a ' non-fully object-oriented ' language. In fact, personally think, what way is not important, it is important to have an object-oriented thinking, said that JavaScript is not object-oriented language, often may not have in-depth study of JavaScript inheritance, so special essays this article for communication.

why you need to implement inheritance with JavaScript

The performance of the early PC machine did not compliment, all the pressure on the server side, the client browser is purely equipment. In addition, the popular table layout and the way the telephone line online led to browse a page very card; now the internet era of rapid development, personal computer hardware has been greatly improved, the performance of the client browser is also very sour, the Web development model is also quietly changing: the service is not as "hard" as before, Instead of allowing the browser to take on more tasks as much as possible, so that the pressure spread to each client, the enterprise not only saves costs, but also makes web front-end development more interesting-more and more front-end framework, and even a lot of front-end MVC framework. In this context, the role of JavaScript is definitely not just to do some simple verification, send some requests or manipulate some DOM, more need to act like the front-end Routing and Business layer role, and JavaScript needs to do a lot of logical tasks, This includes the front-desk data extraction (ie model), and only the use of object-oriented thinking can be very good to the extraction of data processing, so inheritance is very important here.

start with a simple need

Now from the foreground of a model named person, which has the basic properties of name and age, by default everyone will speak, so the function of speech say on the prototype object, for each instance to enjoy. Now for man, it needs to inherit the basic attributes of the person, and on top of that, add its own unique properties.

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

Here are some of the main ways to inherit. 1. Prototype chain inheritance

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 type of inheritance is straightforward, in order to obtain Person all of the property methods (on the instance and on the prototype), directly the instance new Person(‘pursue‘) of the parent class The prototype of the subclass is given, in fact, the instance man1,man2 of the child class itself is a completely empty object, all the properties and methods have to go to the prototype chain to find, and thus found the property method is the same.
So the direct use of the prototype chain inheritance is unrealistic.

2. Using constructor inheritance

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 (' Joe '), var man2 = new Man (' David ');
Console.log (Man1.name = = = Man2.name);//falseman1.say (); Say is not a function123456789101112131415

The subclass in the constructor using apply to call the parent class constructor, so as to achieve the effect of inheriting the parent class properties, more than the direct use of the prototype chain is much better, at least each instance has its own resources, but this method can only inherit the parent class instance properties, and therefore cannot find the Say method, In order to inherit all the properties and methods of the parent class, the prototype chain is modified to introduce a combination of inheritance.

3. Combining Inheritance

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 (' Joe '), var man2 = new Man (' David '); 
 Console.log (man1.name = = = Man2.name);//falseconsole.log (Man1.say = = Man2.say);//trueman1.say ();//hello, my Name is joe12345678910111213141516 
  

It is man1和man2 important to note that Instance property is actually overridden by the prototype property, but does not overwrite say the method (because they are not), so here man1.say === man2.say still returns true, so you need to be very careful not to overwrite the stereotype property because it is common to all instances.

4. Parasitic combination inheritance

Honestly, I don't know if this is the name, but it's really the most popular and classic way of inheriting JavaScript. In fact, you just 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);//a.man.prototype.constructor = Man;//b.var man1 = new Man (' pursue var man2 = new Man (' Joe '); 
 Console.log (Man1.say = = Man2.say); 
 Console.log (Man1.name = = man2.name); 12345678910111213141516 
  

In fact, the parasitic combination inheritance and the above combination of inheritance differ only in the way in which the subclass prototype object is constructed ( a.和b. ), which is used here. Object.creat(obj) method, which makes a shallow copy of the incoming obj object, similar to the following:

function Create (obj) {
function T () {};
T.prototype = obj; return new T ();
}12345

therefore, a. The prototype object of the subclass is well connected to the prototype object of the parent class, not directly to the prototype of the subclass, as the general combination inherits ( Man.prototype = new Person(); ), so it is only very violent to overwrite the property. However, the inheriting method of the parasitic combination inherits the instance attribute and the prototype attribute, which is more reasonable in realization.

This article from "Pcaijian" blog, reproduced please contact the author!

Several ways of inheriting in JavaScript