1. Implement classes with JavaScript
JavaScript does not have a special mechanism to implement classes, here is to implement classes by using its functions to allow nested mechanisms. A function can contain variables and other functions, so that variables can be used as attributes and internal functions can be used as member methods. Therefore, the outer function itself can be used as a class. as follows:
function myClass()
{
//This is equivalent to the constructor
}
Here myClass is a class. In fact, it can be regarded as a class constructor. As for the non-constructor part, it will be described in detail later.
2. How to get an instance of a class
After implementing the class, you should be able to obtain the instance of the class. JavaScript provides a method to obtain the instance of the object. That is, the new operator. In fact, in JavaScript, classes and functions are the same concept. When new is used to operate a function, an object is returned. as follows:
var obj1 = new myClass();
3. References to members of objects
There are three methods that refer to properties or methods of a class in JavaScript.
1> Point operator
This is the most common way of citing, so it is not burdensome. That is, the following form:
Object name.Attribute name;
Object name.Method name;
2> Square bracket quote
JavaScript allows references to objects with square brackets. as follows:
Object name ["Attribute name"];
Object name ["Method name"];
Here, the square brackets are strings representing attributes or method names, not necessarily string constants. Variables can also be used. This allows you to pass attributes or method names using variables. It brings convenience to programming. In some cases, this method can be used when the code cannot determine which property or method to be called. Otherwise, if the dot operator is used, the conditional judgment is also required to call the property or method.
In addition, attributes and method names referenced in square brackets can also start with numbers or appear spaces, while attributes and method names referenced with dots follow the rules of the identifier. However, non-identifier naming methods are generally not recommended.
3> Use the eval function
If you do not want to use variables to pass variables or method names, and do not want to use conditional judgments, then the eval function is a good choice. eval receives a string type parameter, and then executes this string as code in the context, returning the execution result. This is the use of this function of eval. as follows:
alert(eval("Object name." + ));
4. Add, modify and delete objects properties and methods
In JavaScript, after generating objects, properties and methods can be added, modified and deleted for objects, which is different from other object-oriented languages.
1> Add properties and methods
First create an object. After the empty object is created, there are no properties or methods, but we can create it in the code.
var obj1 = new Object();
//Add attributes
= 1;
= "johnson";
//Add method
= function()
{
alert("ID: " + + ", Name: " + );
}
2> Modify properties and methods
Similar to adding properties and methods, for example, follow the above example:
// Modify properties
= 2;
= "Amanda";
// Modify method
= function()
{
alert("ID: " + ");
}
3> Delete properties and methods
Directly assign the attribute or method to be deleted to undefined:
= 1;
= undefined;
= undefined;
5. Create an object without type.
Similar to Anonymous Types in C# 3.0, JavaScript can also create objects of typelessness. The form is as follows:
var obj1 = {};
var obj2 =
{
ID: 1,
Name: "Johnson",
showMessage: function()
{
alert("ID: " + + "Name: " + );
}
}
Here are two types of objects, obj1 and obj2. where obj1 is an empty object. obj2 includes two attribute IDs, Name and a method showMessage. Each attribute and method is separated by commas. The attribute (method) name and its value are divided by a semicolon.
When creating an attribute method in this way, you can also use a string to define the name of the attribute method. like:
var obj2 =
{
"ID" : 1,
"Name": "Johnson"
}
6. prototype
Each function object has a child object prototype. Because functions can also represent classes, prototype represents a collection of members of a class. When new an object, members of the prototype object are instantiated into members of the object. Let’s take a look at an example:
function myClass()
{ }
= 1;
= "johnson";
= function()
{
alert("ID: " + + "Name: " + );
}
var obj1 = new myClass();
();
There is one benefit to creating classes using prototype objects. If you write all members directly in the class declaration, as follows:
function myClass()
{
//Add attributes
= 1;
= "johnson";
//Add method
= function()
{
alert("ID: " + + ", Name: " + );
}
}
var obj1 = new myClass();
var obj2 = new myClass();
In the above code, a class myClass is defined, and two properties and a method are directly defined in the class. Then two objects are instantiated, two properties and a method here. Each time myClass object is created, wasting memory space. This problem can be solved after using prototype. Every time a function is new, members of its prototype object will be automatically assigned to this object, and will not be created repeatedly when new multiple objects are new.
Since the initialization of prototype occurs before the function body is executed, it can be proved with the following code:
function myClass()
{
//This is equivalent to the constructor
= 1;
this.Name1 = ;
();
}
= "johnson";
= function()
{
alert("ID: " + + ", Name: " + );
}
var obj1 = new myClass();
Execute the above code to find that when an object of this type is new, a dialog box pops up.
Finally, we have to mention that prototype has a method that can be used in object-oriented design. That is: the constructor attribute is a call to the constructor, and the constructor here is the code in the class declaration mentioned above. like:
function myClass()
{
//This is equivalent to the constructor
alert("this is in constructor");
}
();
var obj1 = new myClass();
Execute the above code and you will find that the dialog box pops up twice. It can be seen that prototype can be used specifically for designing members of classes. In fact, in JavaScript object-oriented design, prototype is often used.
JavaScript does not have a special mechanism to implement classes, here is to implement classes by using its functions to allow nested mechanisms. A function can contain variables and other functions, so that variables can be used as attributes and internal functions can be used as member methods. Therefore, the outer function itself can be used as a class. as follows:
Copy the codeThe code is as follows:
function myClass()
{
//This is equivalent to the constructor
}
Here myClass is a class. In fact, it can be regarded as a class constructor. As for the non-constructor part, it will be described in detail later.
2. How to get an instance of a class
After implementing the class, you should be able to obtain the instance of the class. JavaScript provides a method to obtain the instance of the object. That is, the new operator. In fact, in JavaScript, classes and functions are the same concept. When new is used to operate a function, an object is returned. as follows:
var obj1 = new myClass();
3. References to members of objects
There are three methods that refer to properties or methods of a class in JavaScript.
1> Point operator
This is the most common way of citing, so it is not burdensome. That is, the following form:
Object name.Attribute name;
Object name.Method name;
2> Square bracket quote
JavaScript allows references to objects with square brackets. as follows:
Object name ["Attribute name"];
Object name ["Method name"];
Here, the square brackets are strings representing attributes or method names, not necessarily string constants. Variables can also be used. This allows you to pass attributes or method names using variables. It brings convenience to programming. In some cases, this method can be used when the code cannot determine which property or method to be called. Otherwise, if the dot operator is used, the conditional judgment is also required to call the property or method.
In addition, attributes and method names referenced in square brackets can also start with numbers or appear spaces, while attributes and method names referenced with dots follow the rules of the identifier. However, non-identifier naming methods are generally not recommended.
3> Use the eval function
If you do not want to use variables to pass variables or method names, and do not want to use conditional judgments, then the eval function is a good choice. eval receives a string type parameter, and then executes this string as code in the context, returning the execution result. This is the use of this function of eval. as follows:
alert(eval("Object name." + ));
4. Add, modify and delete objects properties and methods
In JavaScript, after generating objects, properties and methods can be added, modified and deleted for objects, which is different from other object-oriented languages.
1> Add properties and methods
First create an object. After the empty object is created, there are no properties or methods, but we can create it in the code.
Copy the codeThe code is as follows:
var obj1 = new Object();
//Add attributes
= 1;
= "johnson";
//Add method
= function()
{
alert("ID: " + + ", Name: " + );
}
2> Modify properties and methods
Similar to adding properties and methods, for example, follow the above example:
Copy the codeThe code is as follows:
// Modify properties
= 2;
= "Amanda";
// Modify method
= function()
{
alert("ID: " + ");
}
3> Delete properties and methods
Directly assign the attribute or method to be deleted to undefined:
Copy the codeThe code is as follows:
= 1;
= undefined;
= undefined;
5. Create an object without type.
Similar to Anonymous Types in C# 3.0, JavaScript can also create objects of typelessness. The form is as follows:
Copy the codeThe code is as follows:
var obj1 = {};
var obj2 =
{
ID: 1,
Name: "Johnson",
showMessage: function()
{
alert("ID: " + + "Name: " + );
}
}
Here are two types of objects, obj1 and obj2. where obj1 is an empty object. obj2 includes two attribute IDs, Name and a method showMessage. Each attribute and method is separated by commas. The attribute (method) name and its value are divided by a semicolon.
When creating an attribute method in this way, you can also use a string to define the name of the attribute method. like:
Copy the codeThe code is as follows:
var obj2 =
{
"ID" : 1,
"Name": "Johnson"
}
6. prototype
Each function object has a child object prototype. Because functions can also represent classes, prototype represents a collection of members of a class. When new an object, members of the prototype object are instantiated into members of the object. Let’s take a look at an example:
Copy the codeThe code is as follows:
function myClass()
{ }
= 1;
= "johnson";
= function()
{
alert("ID: " + + "Name: " + );
}
var obj1 = new myClass();
();
There is one benefit to creating classes using prototype objects. If you write all members directly in the class declaration, as follows:
Copy the codeThe code is as follows:
function myClass()
{
//Add attributes
= 1;
= "johnson";
//Add method
= function()
{
alert("ID: " + + ", Name: " + );
}
}
var obj1 = new myClass();
var obj2 = new myClass();
In the above code, a class myClass is defined, and two properties and a method are directly defined in the class. Then two objects are instantiated, two properties and a method here. Each time myClass object is created, wasting memory space. This problem can be solved after using prototype. Every time a function is new, members of its prototype object will be automatically assigned to this object, and will not be created repeatedly when new multiple objects are new.
Since the initialization of prototype occurs before the function body is executed, it can be proved with the following code:
Copy the codeThe code is as follows:
function myClass()
{
//This is equivalent to the constructor
= 1;
this.Name1 = ;
();
}
= "johnson";
= function()
{
alert("ID: " + + ", Name: " + );
}
var obj1 = new myClass();
Execute the above code to find that when an object of this type is new, a dialog box pops up.
Finally, we have to mention that prototype has a method that can be used in object-oriented design. That is: the constructor attribute is a call to the constructor, and the constructor here is the code in the class declaration mentioned above. like:
Copy the codeThe code is as follows:
function myClass()
{
//This is equivalent to the constructor
alert("this is in constructor");
}
();
var obj1 = new myClass();
Execute the above code and you will find that the dialog box pops up twice. It can be seen that prototype can be used specifically for designing members of classes. In fact, in JavaScript object-oriented design, prototype is often used.