There are some predefined classes in JavaScript such as Object, Array, String and Number etc. Classes are very flexible to use in JavaScript. When creating an object of a class, use the new keyword, as shown in the following code:
//Young's blog, may not be reproduced without the permission of the blogger: https://blog.csdn.net/jisuanjiguoba/article/details/80139351 var arrayValues = new Array();//Define array variables arrayValues[0] = "a1"; arrayValues[1] = "a2"; arrayValues[2] = "a3";
When the class constructor has no parameters, the parentheses can be omitted: var arrayValues = new Array.
So how to customize classes in JavaScript? It can be said that custom classes in JavaScript are very flexible, and JavaScript classes can be customized in the following three ways:
1. Factory method (add class members dynamically)
Since the properties of JavaScript objects can be added dynamically, you can create an object and call the teach method in it with the following code:
//Young's blog, may not be reproduced without the permission of the blogger: https://blog.csdn.net/jisuanjiguoba/article/details/80139351
var nTeacher= new Object; // create an object variable
nTeacher.id = '001'; // define the id attribute
nTeacher.xm = 'Li Fangfang'; // define the xm attribute
nTeacher.age = 28; // define the age property
nTeacher.teach = function()
{
alert(this.xm + "like young's blog");
};
nTeacher.teach(); // call the teach method
In order to make it more convenient to create objects, you can create an object factory function to create a Teacher object. The code is as follows:
function createTeacher(id, xm, age){
var nTeacher= new Object; // create an object variable
nTeacher.id = id; // define the id attribute
nTeacher.xm = xm; // define the xm property
nTeacher.age = age; // define the age property
nTeacher.teach = function()
{
alert(this.xm + "like young's blog");
};
return nTeacher; // return nTeacher object
}
The following creates two objects through the createTeacher function, and calls the teach methods of these two objects respectively:
var nTeacher1 = createTeacher('002', 'Zhao Xiaofang', 32);
var nTeacher2 = createTeacher('003', 'Sun Fangfang', 33);
nTeacher1.teach(); //Call the teach method of the nTeacher1 object
nTeacher2.teach(); //Call the teach method of the nTeacher2 object
The above code will recreate the teacher method every time the Teacher object is created. In fact, it is possible to make multiple objects share the same teach function:
//Young's blog, may not be reproduced without the permission of the blogger: https://blog.csdn.net/jisuanjiguoba/article/details/80139351
function teach()
{
alert(this.xm + "like young's blog");
};
function createTeacher(id, xm, age){
var nTeacher= new Object; // create an object variable
nTeacher.id = id; // define the id attribute
nTeacher.xm = xm; // define the xm property
nTeacher.age = age; // define the age property
nTeacher.teach = teach; // Assign the global teach method to the teach method of the Teacher object
return nTeacher; // return nTeacher object
}
2. Constructor method
Creating objects in the constructor method is similar to the factory method, as follows:
//Young's blog, may not be reproduced without the permission of the blogger: https://blog.csdn.net/jisuanjiguoba/article/details/80139351
function teach()
{
alert(this.xm + "like young's blog");
};
function Teacher(id, xm, age){
this.id = id; // define the id property
this.xm = xm; // define the xm property
this.age = age; // define the age property
this.teach = teach; // assign the global teach method to the teach method of the Teacher object
}
var nTeacher1=new Teacher('002', 'Zhao Xiaofang', 32);
var nTeacher2 = new Teacher('003', 'Sun Fangfang', 33);
nTeacher1.teach(); //Call the teach method of the nTeacher1 object
nTeacher2.teach(); //Call the teach method of the nTeacher2 object
It can also be seen from the above code that the biggest difference between the constructor method and the factory method is that the object is not created inside the Teacher function, but this is directly used to represent the current object instance .
3. Prototype
This method uses the object's prototype property, which can be thought of as the prototype on which new objects are created. Create an empty class by using an empty constructor and then add members (properties and methods) to the class using the prototype property as follows:
//Young's blog, may not be reproduced without the permission of the blogger: https://blog.csdn.net/jisuanjiguoba/article/details/80139351
function Teacher(){ //Create an empty constructor
}
Teacher.prototype.id = '002'; // Use prototype to add properties to Teacher class
Teacher.prototype.xm = 'Zhao Xiaofang';
Teacher.prototype.age = 32;
Teacher.prototype.teach = function() { // use the prototype to add methods to the Teacher class
alert(this.xm + 'like young's blog');
};
var nTeacher1 = new Teacher ();
nTeacher1.teach();
It can also be seen from the above code that another advantage of using the prototype method is that you can add new members (properties or methods) to existing classes. Add a lenMethod method to get the length of bytes for the String class as follows:
String.prototype.lenMethod = function(){
return this.replace(/[^\x0-\xf]/g, "##").length; //Replace Chinese with ##
}
var st = "letters abc";
alert(st.lenMethod()); //Display 7, if you use length directly, it will output 5