Object Usage Analysis of JS Object-Oriented Programming

Because we always use process-oriented programming ideas to write JS Code, and because the network is filled with too many small "clever" JS code segments, many of them are casual and very nonstandard, this leads to a "misunderstanding" of JS, blindly believing that it is an auxiliary little stuff, and not suitable for development of big things. However, since the rise of AJAX, a large number of JS code compilation requires people to be able to develop object-oriented code just like writing code similar to JAVA.

So next I will combine my own experiences with the learned stuff to learn how to use object-oriented programming in JS. In fact, it is not difficult to use JS for object-oriented development, because in JS, every function is an object, such as the following function:
Copy codeThe Code is as follows:
Function HelloWorld ()
{
Alert ('Hello world! ');
}

We can use it as an object when using it, for example, using the following test function:
Copy codeThe Code is as follows:
Function _ test ()
{
Var obj = new HelloWorld ();
}

After the _ test method is called, hello world will pop up! The prompt box that calls the HelloWorld () object (function ). Here, the HelloWorld object does not have any attributes and methods. It has only one constructor HelloWorld (). We can think of it as a class without any attributes or methods in JAVA, when an object is created using new, its constructor is called. This is also our simplest object. Of course, an object must be assigned attributes and methods. In JS, we use prototype keywords to assign values, for example, if you want to add a sayHello method and a name attribute to the HelloWorld object, you can add it as follows:
Copy codeThe Code is as follows:
HelloWorld. prototype = {
Name: 'javascript ',
SayHello: function (){
Alert (this. name );
}
}

Then you can add a name attribute and the sayHello Method for HelloWorld. Let's change the _ test method as follows:
Copy codeThe Code is as follows:
Function _ test ()
{
Var obj = new HelloWorld ();
Obj. sayHello ();
}

After the _ test method is called, The hello wordl will be printed successively! And JavaScript (one is alert in the constructor and the other is alert in the sayHello method ). Note that alert in the sayHello method references the this keyword, which indicates the HelloWorld object, that is, it points to this object by default, which is the same as the this keyword in JAVA.

To add instance methods and attributes to an object, you can assign values using the prototype keyword in the following format:

Object Name. prototype = {
Attribute 1: attribute value,
Attribute 2: attribute value,
Method 1: function (parameter list ){
Method body;
},
Method 2: function (parameter list ){
Method body;
}
}

You can define multiple attributes and methods for an object according to the preceding method. After a new object is created, you can use Instance name. attributes or methods to obtain attributes or execute methods.

In the above method, we do not know that no object attribute can be accessed directly. For example, you can use obj. name to directly access the name attribute of the HelloWorld object. This is like the public attribute in JAVA, and we can directly assign values to the name attribute. So now there is a problem. How do we assign a private member variable to an object? Then we may need to change the declaration method of the HelloWorld class. Instead of using prototype for Class Attribute and method declaration, we directly declare using embedded functions and attributes. The modified HelloWorld is as follows, we name it HelloWorld2:
Copy codeThe Code is as follows:
Function HelloWorld2 ()
{
Var privateProp = 'Hello world 2! ';
This. method = function (){
Alert (privateProp );
}
}

Have you seen the class declaration method of HelloWorld2? We directly declare nested functions in the function, and set a local variable privateProp, which is our private member variable. This variable can only be accessed by functions in HelloWorld2, external access is not allowed, so that we can skillfully set private variables of the class by using the scope of variables. Our application is as follows:
Copy codeThe Code is as follows:
Function _ test2 ()
{
Var obj2 = new HelloWorld2 ();
Obj2.method (); // call this method to print 'Hello world 2!
Alert (obj2.privateProp); // print undefined
}

What we have mentioned above is how to define a class and how to define attributes and methods for a class. Since prototype is used for clear definition, classes are generally defined using this method, in addition, many AJAX frameworks use similar class declaration methods. In addition, the private member variables of the class can only be accessed by functions in the class constructor. In this way, the methods declared by the prototype of the class cannot access the private member variables, the prototype method is not good in readability.

All of the above is to define the instance methods and attributes of a class. In JAVA, classes include instance methods and attributes, and class methods and attributes. The so-called class attributes and methods means that all instances of the class maintain only one copy of the class attributes and class methods, rather than maintaining one set for each instance, this is different from instance attributes and instance methods. In JavaScript, what is a class that defines static class methods and class attributes? We can directly add static attributes and static methods to the class. For example, to add a static attribute of age and a static method of hello to the HelloWorld class, the Declaration is as follows:
Copy codeThe Code is as follows:
HelloWorld. age = 22;
HelloWorld. hello = function (){
Alert (HelloWorld. age );
}

In this way, the static attribute age and static method hello are declared for the class HelloWorld. The class name is used directly for access, but the instance cannot be used for access. This is consistent with that in JAVA. The test is as follows:
Copy codeThe Code is as follows:
Function _ test ()
{
Var obj = new HelloWorld ();
Obj. sayHello (); // correct. The instance method can be accessed through the instance.
HelloWorld. hello (); // correct, static method, direct access by Class Name
Obj. hello (); // error. The static method cannot be accessed through the instance. A js error is reported!
}

Through the above instructions, I believe you have a certain understanding of JS object-oriented programming, and you must be ready to go ~~ (Note: all the above Code has passed the test !)