JavaScript defines classes and objects and implements inheritance

Defining classes and objectsFactory mode

function Createcar (color, doors, mpg) {  var car = {};  Car.color = color,  car.doors = doors,  car.mpg = mpg;  Car.showcolor = function () {alert (this.color);};  return car;}

Factory mode is simple, so it is only suitable for creating relatively simple objects.

constructor function mode

function Car (color, doors, MPG) {  This.color = color,  this.doors = doors,  this.mpg = mpg,  This.showcolor = function () {alert (this.color);};} var = new car (' Red ', 4, car1),  car2 = new car (' Blue ', 2, 25);

This approach is similar to Factory mode, where a separate function version is created for each object repeatedly.

Prototype mode

function Car () {}car.prototype.color = ' red ', Car.prototype.doors = 4,car.prototype.mpg = 23,car.prototype.drivers = [' Kobe ', ' T-mac ', ' james '],car.prototype.showcolor = function () {alert (this.color);}; var car1 = new Car (),  car2 = new Car ();

The disadvantage of this method is that the first can not be transmitted, can only be created after a change, and another important problem is that the properties of the object is generally not shared, but this way the object properties drivers are shared by each instance, so this way the problem is an instance of the object property is changed, Affects the corresponding property of another instance.

Car1.drivers.push (' Yao '); alert (car1.drivers);    ' Kobe, T-mac, James, Yao ' Alert (car2.drivers);    ' Kobe, T-mac, James, Yao '

mixed constructor/prototype mode

In this way, a constructor is used to define the properties of all non-functions of the object, and the function properties (methods) of the object are defined in a prototype manner.

function Car (color, doors, MPG) {  This.color = color,  this.doors = doors,  this.mpg = mpg;  This.drivers = [' Kobe ', ' T-mac ', ' James ']; Car.prototype.showColor = function () {alert (this.color);};

This approach has other characteristics, but without their side effects. However, some developers feel that this approach is not perfect.

Dynamic Prototyping Mode

function Car (color, doors, MPG) {  This.color = color,  this.doors = doors,  this.mpg = mpg;  This.drivers = [' Kobe ', ' T-mac ', ' James '];  if (' undefined ' = = = = typeof car._initialized) {    Car.prototype.showColor = function () {alert (this.color);};    Car._initialized = true;}  }

The method uses flags _initialized to determine whether any method has been assigned to the prototype, which is created and assigned only once. This way, the code looks more like a class definition in another language.

Hybrid Plant Approach

function car () {  var car = {};  Car.color = ' Red ',  car.doors = 4,  car.mpg = 23°c;  Car.drivers = [' Kobe ', ' T-mac ', ' James '];  Car.showcolor = function () {alert (this.color);};  return car;}

Unlike the classic factory approach, this uses an new operator that makes it more like a constructor.

var car1 = new Car (), car2 = new car (); car1.drivers = = = Car2.drivers;     Falsecar1.showcolor = = = Car2.showcolor; False

This is also an independent owning property and cannot be shared with methods. But it is not recommended in this way.

Summarize

The most widely used is the hybrid constructor/prototype approach , and the dynamic prototyping approach is also popular, and the two approaches are equivalent. It is recommended to use either of these two ways.

Object inheritanceBlending mode

Like the best way to create a class, inheritance is also a mix of constructors and prototype chains, with objects impersonating inherited constructor properties, and inheriting prototype objects with a prototype chain:

function ClassA (color) {this.color = color;} ClassA.prototype.sayColor = function () {alert (this.color);};/ *CLASSB inherits Classa*/function ClassB (color, name) {Classa.call (this, color); this.name = name;} Classb.prototype = new ClassA (); Note that it is an empty parameter. This is the most standard practice in the prototype chain, ensuring that the constructor does not have any parameters. ClassB.prototype.sayName = function () {alert (this.name);};

Dynamic Prototyping Mode

As the second best way to create classes and objects, does dynamic prototyping fit into object inheritance? The answer is in the negative.

function Polygon (sides) {  this.sides = sides;  if (' undefined ' = = = = typeof polygon._initialized) {    Polygon.prototype.getArea = function () {return 0;};    Polygon._initialized = true;}  } function Triangle (base, height) {  Polygon.call (this, 3),  this.base = base,  this.height = height;  if (' undefined ' = = = = typeof triangle._initialized) {    //Note the following line    of code triangle.prototype = new Polygon (),    Triangle.prototype.getArea = function () {      return. 5 * this.base * this.height;    };    Triangle._initialized = true;}  }

Analyzing the code above, the error is in the line of code that needs attention. Logically, its position is correct, but it is functionally invalid. Technically, before the code runs, the object has been instantiated and associated with the original prototype object. Although you can use very late binding (that is, if you instantiate an object and then modify its prototype chain, the instance will still have the newly modified property/method) to reflect the modification of the prototype object, but replacing the prototype object will have no effect on that object. As a result, only future object instances reflect this change, and the first instance object becomes incorrect.

To implement inheritance correctly using dynamic prototypes, you must assign a new prototype object outside the constructor:

function Triangle (base, height) {  Polygon.call (this, 3),  this.base = base,  this.height = height;  if (' undefined ' = = = = typeof triangle._initialized) {    Triangle.prototype.getArea = function () {      return. 5 * This.base * this.height;    };    Triangle._initialized = true;}  } Triangle.prototype = new Polygon ();

In this way, the code can not be completely encapsulated in the constructor, violating the main thrust of the dynamic prototype, rather than using a hybrid approach.

Zinherit Inheriting plugins

With the Zinherit library, the prototype object is not overridden and multiple inheritance is supported.

Xbobjects

The purpose of xbobjects is to provide JavaScript with a stronger object-oriented paradigm that supports not only inheritance, but also the overloading of methods and the ability to invoke superclass methods.

JavaScript defines classes and objects and implements inheritance