JavaScript object-oriented programming (1) Basics_js object-oriented

1. Use JavaScript to implement classes
JavaScript does not have a special mechanism to implement classes. Here, classes are implemented with the help of a mechanism that allows nesting of its functions. A function can contain variables and other functions. In this way, 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 code The code is as follows:

function myClass()
{
//This is equivalent to the constructor
}

Here myClass is a class. In fact, you can think of it as the constructor of a class. As for the non-constructor part, it will be described in detail later.
2. How to get an instance of a class
After implementing a class, you should get an instance of the class. JavaScript provides a method to get an object instance. 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 ways to reference the attributes or methods of a class in JavaScript.
1> Dot operator
This is the most common way of quoting and is not cumbersome. That is, in the following form:
Object name.Property name;
Object name.Method name;
2> Square bracket reference
JavaScript allows the use of square brackets to reference members of an object. As follows:
Object name ["property name"];
Object name ["method name"];
The square brackets here are strings representing property or method names, which are not necessarily string constants. Variables can also be used. This allows you to use variables to pass property or method names. It brings convenience to programming. This approach can be used in some cases when the code is not sure which property or method to call. Otherwise, if you use the dot operator, you also need to use conditional judgment to call the property or method.
In addition, the property and method names quoted using square brackets can also start with a number or a space, while the property and method names quoted using dots follow the rules of identifiers. However, the use of non-identifier naming methods is generally not recommended.
3> Use the eval function
If you do not want to use variables to pass variable or method names, and do not want to use conditional judgment, then the eval function is a good choice. eval receives a string type parameter, then executes this string as code in the context, and returns the execution result. This function of eval is used here. As follows:
alert(eval("Object name." element.value));
4. Add, modify and delete object attributes and methods
In JavaScript, in After generating an object, you can also dynamically add, modify, and delete properties and methods for the object, which is different from other object-oriented languages.
1> Add properties and methods
Create an object first. After the empty object is created, it does not have any properties and methods, but we can create it in code.

Copy code The code is as follows:

var obj1 = new Object();
/ /Add attribute
obj1.ID = 1;
obj1.Name = "johnson";
//Add method
obj1.showMessage = function()
{
alert(" ID: " this.ID ", Name: " this.Name);
}

2> Modifying attributes and methods
is similar to adding attributes and methods, for example, following the above example :

Copy code The code is as follows:

// Modify attributes
obj1.ID = 2;
obj1.Name = "Amanda";
// Modification method
obj1.showMessage = function()
{
alert("ID: " this.ID");
}

3> Delete attributes and methods
Just assign the attribute or method to be deleted to undefined:

Copy Code The code is as follows:

obj1.ID = 1;
obj1.Name = undefined;
obj1.showMessage = undefined;

5. Create untyped objects
Similar to Anonymous Types in C# 3.0, JavaScript can also create untyped objects in the following form:

<.>Copy code The code is as follows:

var obj1 = {};
var obj2 =
{
ID: 1,
Name: "Johnson",
showMessage: function()
{
alert("ID: " this.ID "Name: " this.Name);
}
}


Two untyped objects are defined here, obj1 and obj2. where obj1 is an empty object. obj2 includes two attributes ID, Name and a method showMessage. Separate each property and method with commas. Separate the attribute (method) name and its value with a semicolon.
When creating an attribute method in this way, you can also use a string to define the name of the attribute method. For example:

Copy code The 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, the members of the prototype object will be instantiated into the members of the object. Let’s look at an example first:

Copy the code The code is as follows:

function myClass()
{ }
myClass.prototype.ID = 1;
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " this.ID "Name: " this.Name);
}
var obj1 = new myClass();
obj1.showMessage();

Created using prototype object Classes have a benefit. If all members are written directly in the class declaration, as follows:

Copy code The code is as follows:

function myClass()
{
//Add attribute
this.ID = 1;
this.Name = "johnson";
//Add method
this. showMessage = function()
{
alert("ID: " this.ID ", Name: " this.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. The two properties and one method here will be created every time the myClass object is created, which wastes memory space. This problem can be solved by using prototype. Every time a function is new, the members of its prototype object will be automatically assigned to this object. When multiple objects are new, they will not be created repeatedly.
Since the prototype initialization occurs before the function body is executed, it can be proved with the following code:

Copy code The code is as follows:

function myClass()
{
//This is equivalent to the constructor function
this.ID = 1;
this.Name1 = this.Name;
this.showMessage();
}
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " this. ID ", Name: " this.Name);
}
var obj1 = new myClass();

Executing the above code can find that when an object of type new is used, it will pop up dialog box.
The last thing I have to mention is that prototype has a method that can be used in object-oriented design. That is: the constructor attribute is a call to the constructor. The constructor here is the code in the declaration of the class mentioned above. For example:

Copy code The code is as follows:

function myClass()
{
//This is equivalent to the constructor function
alert("this is in constructor");
}
myClass.prototype.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 to design members of a class. In fact, prototype is often used in JavaScript object-oriented design.