How to define classes in JavaScript (four ways) _javascript skills

The examples in this article describe how classes are defined in JavaScript. Share to everyone for your reference, specific as follows:

The definition of a class consists of four different ways:

1. Factory mode

function Createcar (name,color,price) {
  var tempcar=new Object;
  Tempcar.name=name;
  Tempcar.color=color;
  Tempcar.price=price;
  Tempcar.getname=function () {
   document.write (this.name+ "-----" +this.color+ "<br>");
  return tempcar;
}
var car1=new createcar ("Factory Santana", "Red", "121313");
Car1.getname ();

The definition of a factory function that creates and returns a specific type of object looks good, but there's a small problem

To create a new function Showcolor every time we call, we can move it outside the function,

function GetName () {
  document.write (this.name+ "-----" +this.color+ "<br>");
}

Point directly to it in the factory function

Copy Code code as follows:

Tempcar.getname = GetName;

This avoids the problem of duplicating the function, but it does not look like an object's approach.

2. Constructor mode

function car (name,color,price) {
  this.name=name;
  This.color=color;
  This.price=price;
  This.getcolor=function () {
   document.write (this.name+ "-----" +this.color+ "<br>");
  }
var car2=new car ("Structural Santana", "Red", "121313");
Car2.getcolor (); 

You can see the difference from the first method, where there are no objects created inside the constructor, but instead use the This keyword.

When you call a constructor with new, you create an object and then use this to access it.

This usage is similar to other object-oriented languages, but it has the same problem with the previous one, that is, repeating the creation of functions.

3. Prototype mode

function Procar () {
}
procar.prototype.name= "prototype";
Procar.prototype.color= "Blue";
Procar.prototype.price= "10000";
Procar.prototype.getname=function () {
  document.write (this.name+ "-----" +this.color+ "<br>");
var car3=new procar ();
Car3.getname ();

The constructor car is first defined, but there is no code, and then the property is added through prototype. Advantages:

A. All instances hold pointers to Showcolor, which solves the problem of duplicate creation of functions

B. You can check object types with instanceof

Copy Code code as follows:

Alert (car3 instanceof Procar);//true

Disadvantage, add the following code:

ProCar.prototype.drivers = NewArray ("Mike", "Sue");
Car3.drivers.push ("Matt");
alert (car3.drivers);//outputs "Mike,sue,matt"
alert (car3.drivers);//outputs "Mike,sue,matt"

Drivers is a pointer to an array object, and all two instances of Procar point to the same array.

4. Dynamic Prototyping mode

function Autoprocar (name,color,price) {
  this.name=name;
  This.color=color;
  This.price=price;
  This.drives=new Array ("Mike", "Sue");
  if (typeof autoprocar.initialized== "undefined") {
   autoProCar.prototype.getName =function () {
   document.write (this.name+ "-----" +this.color+ "<br>");
   Autoprocar.initialized=true
  }
}
var car4=new autoprocar ("Dynamic Prototype", "Yellow", "1234565");
Car4.getname ();
Car4.drives.push ("Newone");
document.write (car4.drives);

This is my favorite, all class definitions are done in a function that looks very much like a class definition in other languages, does not create functions repeatedly, and can be used with instanceof

I hope this article will help you with JavaScript programming.