Comparative analysis of several inheritance modes in JavaScript programming _javascript skills

This article analyzes several inheritance methods in JavaScript programming. Share to everyone for your reference, specific as follows:

Opening

In the ' strict ' sense, JavaScript is not a real object-oriented language. The reason for this argument is generally that JavaScript as a weak type of language and similar to Java or C #, such as the way the inheritance of strong language is very different, as a result, it is the non-mainstream object-oriented approach, and even many books describe it as ' not fully object-oriented ' language. In fact, personally feel that the way is not important, it is important to have an object-oriented thinking, that JavaScript is not object-oriented language, often may not have in-depth study of the inheritance of JavaScript, so the special text for the exchange.

Why you need to use JavaScript to implement inheritance

Early PC machine performance is really not flattering, all the pressure on the server side, the client browser is purely decorative. In addition, the popular table layout and the way the telephone line online lead to browsing a webpage very card; With the rapid development of the internet age, the PC hardware has been greatly improved, the performance of the client browser is also very sour, the Web development model is quietly changing: the service side is no longer like before "hard", Instead, let the browser take on more tasks as much as possible, so that when the pressure is distributed to each client, the enterprise not only saves costs but also makes web front-end development more interesting--more and more front-end frameworks emerge, and even many front-end MVC frameworks appear. In this context, the role of JavaScript has been absolutely not just to do some simple validation, send some requests or manipulate some DOM, more need to assume the role of similar front-end routing and business layer, and JavaScript needs to do a lot of logical tasks, This includes the front of the data extraction (that is, model), and only the use of object-oriented thinking can be very good for the extraction of data processing, so the inheritance here is important.

Start with a simple need

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

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
}

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 Mans () {
}
man.prototype = new Person (' pursue ');
var man1 = new Man ();
Man1.say (); Hello, my name was pursue
var man2 = new Man ();
Console.log (Man1.say = = Man2.say);//true
console.log (man1.name = = man2.name);//true

This inheritance is straightforward, in order to get all the property methods of the person (on the instance and on the prototype), directly assign the instance new person (' pursue ') of the parent class to the prototype of the subclass, in fact, the instance of the subclass Man1,man2 itself is a completely empty object, All attributes and methods have to be found in the prototype chain, so that the property methods found are the same.
So it is not realistic to use the prototype chain inheritance directly.

2. Using constructors 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 mans (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);//false
Man1.say ();//say is not a function

Here subclasses use apply to invoke the constructor of the parent class in the constructor. To achieve the effect of inheriting the parent attribute, which is much better than using the prototype chain directly, at least each instance has its own share of resources, but this method can only inherit the instance properties of the parent class, and therefore cannot find the say methods. In order to inherit all the properties and methods of the parent class, the prototype chain should be modified to introduce the combined inheritance method.

3. Combined inheritance

function person (name, age) {
  this.name = name;
  This.age = age;
}
Person.prototype.say = function () {
  console.log (' Hello, my name is ' + this.name);
function mans (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);//false
console.log (Man1.say = = Man2.say);//true
Man1.say (); Hello, my name is Joe

Note that the instance properties of Man1 and man2 actually cover the stereotype properties, but do not overwrite the Say method on the prototype (because they are not), so here Man1.say = = Man2.say still returns true, so it is important to be careful not to overwrite the stereotype attribute because it is common to all instances.

4. Parasitic combination inheritance

To be honest, I really don't know the following form is called the name, but it is indeed the most popular and classic way of JavaScript inheritance. 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 mans (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);

In fact, the parasitic combination inheritance and the above combination inheritance differ only in the way in which the subclass prototype object is constructed (a. and B.), where the Object.creat (obj) method is used, 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 ();
}

Therefore, a. The prototype object of the subclass is well connected to the prototype object of the parent class, and is not replicated directly to the prototype of the subclass, as in the case of a generic combination inheritance (such as Man.prototype = new Person ();), so it is only very violent to overwrite the attribute. The parasitic combination inherits the instance attribute and the prototype property respectively, and it is more reasonable to realize the method.

Note: Code B does not change the results of instanceof, but it is more rigorous for scenarios that require Construcor.

I hope this article will help you with your JavaScript programming.