Home > Web Front-end > JS Tutorial > Detailed explanation of the use of JavaScript classes_Basic knowledge

Detailed explanation of the use of JavaScript classes_Basic knowledge

WBOY
Release: 2016-05-16 17:34:31
Original
1173 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:


ElectricCar.prototype = new Car();


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


myElectricCar instanceof Car


Add methods to the inherited object:


// 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);


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template