Detailed explanation of the use of JavaScript classes

Detailed explanation of the use of JavaScript classes_Basic knowledge

WBOY

Release： 2016-05-16 17:34:31

Original

1113 people have browsed it

The following is the constructor method to create a class:

Copy the code The code is as follows:

function className (prop_1, prop_2, prop_3) { 
this.prop1 = prop_1; 
this.prop2 = prop_2; 
this.prop3 = prop_3;}

With the above class, we can create instances for the class:

Copy code The code is as follows :

var obj_1 = new className(v1, v2, v3)
var obj_2 = new className(v1, v2, v3)

We can also give Class addition method (method) is actually the Function in Function.

Copy code The code is as follows:

function className (prop_1, prop_2, prop_3) {
 this.prop1 = prop_1;
 this.prop2 = prop_2;
 this.prop3 = prop_3;
 this.func = function new_meth (property) {
 //coding here
 }
}

Attribute access domain:

In JavaScript, the properties of an object are global by default, which means that the property can be directly accessed both inside and outside the object. In the above example, this.prop1, this.prop2, and this.prop3 are all global properties.

How to define private attributes? Using var, in the following example, price becomes a private property!

Copy code The code is as follows:

function Car(listedPrice, color) {
 var price = listedPrice;
 this.color = color;
 this.honk = function() {
 console.log("BEEP BEEP!!");
 };
}

If you want to access a private property, then you can add a method in the object to return the private property. Because the method is in the object, you can access the private property of the object. By calling this method externally, you can access this private property. But in the method, you can no longer use this. Like the example above, to access price, you can add a method to the object:

Copy code The code is as follows:

this.getPrice = function() {
//return price here! -------------------------------------------------- --------------------------

Inheritance:
Inherit using the following syntax:

Copy the code The code is as follows:

ElectricCar.prototype = new Car();

Use instanceOf to check whether the object is an inheritance of an object and return true or false. 

Copy code The code is as follows:

myElectricCar instanceof Car

Add methods to the inherited object:

Copy code The code is as follows:

// Use construct The function defines a new object

function ElectricCar( listedPrice ) {
this.electricity=100;
var price = listedPrice;
}

//Make the new object inherit CarElectricCar.prototype = new Car();

// Add method for new object

ElectricCar.prototype.refuel = function(numHours) {

this.electricity = 5*numHours;
};

re Write the values or methods of the prototype object:

When we inherit the prototype object, we will inherit the values and methods of the prototype. But sometimes, our object values or methods may be different. At this time, we can change the content of the new object by overriding the values and methods of the prototype object

Copy the code The code is as follows:

function Car( listedPrice ) {
   var price = listedPrice;
   this.speed = 0;
   this.numWheels = 4;

   this.getPrice = function() {
       return price;
   };
}

Car.prototype.accelerate = function() {
this.speed = 10;
};

function ElectricCar( listedPrice ) {
var price = listedPrice;
this.electricity = 100;
}
ElectricCar.prototype = new Car();

// 重写accelerate方法
ElectricCar.prototype.accelerate = function() {
this.speed = 20;
};
// 添加新方法decelerateElectricCar.prototype.decelerate = function(secondsStepped) {
this.speed -= 5*secondsStepped;
};

myElectricCar = new ElectricCar(500);

myElectricCar.accelerate();
console.log("myElectricCar has speed " myElectricCar.speed);
myElectricCar.decelerate(3);
console.log("myElectricCar has speed " myElectricCar.speed);