Detailed explanation of how classes are defined in javascript (four ways)_javascript skills

The examples in this article describe how to define classes in JavaScript. Share it with everyone for your reference, the details are as follows:

The definition of a class includes four ways:

1. Factory method

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("工厂桑塔纳","red","121313");
car1.getName();

Defines a factory function that can create and return objects of a specific type. It looks good, but there is a small problem,

A new function showColor needs to be created every time it is called, we can move it outside the function,

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

Point to it directly in the factory function

Copy code The code is as follows:

tempCar.getName = getName;

This avoids the problem of repeatedly creating functions, but it doesn’t look like an object method.

2. Constructor method

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("构造桑塔纳","red","121313");
car2.getColor(); 

You can see the difference from the first method. There is no object created inside the constructor, but the this keyword is used.

When using new to call the constructor, an object is first created and then accessed using this.

This usage is very similar to other object-oriented languages, but this method has the same problem as the previous one, which is to repeatedly create functions.

3. Prototype method

function proCar(){
}
proCar.prototype.name="原型";
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 without any code, and then the properties are added through prototype. Advantages:

a. All instances store pointers to showColor, which solves the problem of repeatedly creating functions

b. You can use instanceof to check the object type

Copy code The code is as follows:

alert(car3 instanceof proCar);//true

Disadvantages, 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 are pointers to Array objects, and both instances of proCar point to the same array.

4. Dynamic prototype method

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("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

This method is my favorite. All class definitions are completed in a function. It looks very like class definitions in other languages. Functions will not be created repeatedly. You can also use instanceof

I hope this article will be helpful to everyone in JavaScript programming.