A brief analysis of JS object-oriented programming_javascript skills

Before the rise of AJAX, many people wrote JS without any structure at all. They basically wrote whatever came to mind, just one function after another. If they encountered duplicates, they had to copy them. If the function was not careful, It has the same name, and I really don’t know where to start looking for the error, because everyone always uses process-oriented programming ideas to write JS code, and also because the Internet is full of too many small “clever” JS code snippets, many of which are It is done casually and is very irregular. This has also caused everyone's "misunderstanding" of JS. They blindly think that it is an auxiliary small thing and is not suitable for the development of larger things. However, since the rise of AJAX, writing a large amount of JS code requires people to be able to develop object-oriented development just like writing JAVA-like code.

So below, I will combine my own experience and what I have learned with you to learn how to use object-oriented programming in JS. In fact, it is not difficult to use JS for object-oriented development, because each function in JS is an object, such as the following function:

Copy code The code is as follows:

function HelloWorld()
{
alert('hello world!');
}

Then we can use it as an object when using it, such as using the following test function:

Copy code The code is as follows:

function _test()
{
var obj = new HelloWorld();
}

Then call the _test method Then hello world will pop up! prompt box, that is, the HelloWorld() object (function) is called. The HelloWorld object here does not have any properties or methods. It has only one construction method HelloWorld(). We can think of it as a class in JAVA without any properties and methods. When using new to create an object, it is called Its construction method. This is also our simplest object. Of course, an object must be assigned attributes and methods. In JS, we use the prototype keyword to assign values. For example, I want to add a sayHello method and a name attribute to the HelloWorld object. , then you can add it like this:

Copy code The code is as follows:

HelloWorld.prototype = {
name : 'JavaScript',
sayHello : function() {
alert(this.name);
}
}

Then it can be HelloWorld Added a name attribute and sayHello method, let's change the _test method as follows:

Copy code The code is as follows:

function _test()
{
var obj = new HelloWorld();
obj.sayHello();
}

Then call After the _test method, hello wordl! and JavaScript will be printed successively (one is the alert in the construction method, and the other is the alert in the sayHello method). Note that the alert in the sayHello method refers to the this keyword, which represents the HelloWorld object and points to this object by default, just like the this keyword in JAVA.

To add instance methods and properties to an object, we can use the above method, that is, use the prototype keyword to assign values. The format is as follows:

Copy Code The code is as follows:

Object name.prototype = {
Attribute one: attribute value,
Attribute two: attribute value,
Method One: function (parameter list) {
Method body;
},
Method two: function (Parameter list) {
Method body;
}
}

You can define multiple attributes and methods for an object as above, so that after new an object, you can use the instance name, attributes or methods to obtain attributes or execute methods.

In the above method, you may not know that no object's attributes can be directly accessed. For example, to access the name attribute of the HelloWorld object, you can use obj.name to obtain it directly. This is like the public attributes in our JAVA, and we can also directly assign values ​​to the name attribute. So now there is a question, how do we assign a private member variable to an object? Then we may have to change the way of declaring the HelloWorld class. Instead of using prototype to declare the attributes and methods of the class, we directly use inline functions and attributes to declare. The modified HelloWorld is as follows, we named it HelloWorld2:

Copy code The code is as follows:

function HelloWorld2()
{
var privateProp = ' hello world 2!';
this.method = function() {
alert(privateProp);
}
}

See the class declaration method of HelloWorld2 without? The function nested declaration is made directly inside the function, and we also set a local variable privateProp, which is our private member variable. This variable can only be accessed by functions inside HelloWorld2. External access is not allowed, so we You can cleverly set private variables of a class by using the scope of the variable. Our application is as follows:

Copy code The code is as follows:

function _test2()
{
var obj2 = new HelloWorld2();
obj2.method(); // Calling this method will print 'hello world 2!
alert(obj2.privateProp); // Will print undefined
}

The above are all about how to define a class, and how to define attributes and methods for a class. Since the definition is clear and clear using the prototype method, this method is generally used to define the class. Definition, and similar class declaration methods are now used in many AJAX frameworks. Moreover, the private member variables of the class can only be accessed by functions in the construction method of the class. In this way, the methods declared by the prototype of the class cannot access the private member variables, and the readability is not as good as the prototype method.

Okay, the above is all about defining instance methods and attributes of a class. In JAVA, classes are divided into instance methods and properties and class methods and properties. The so-called class attributes and methods mean that all instances of the class only maintain a copy of the class attributes and class methods, instead of maintaining a set for each instance. This is different from instance attributes and instance methods. So how to define static class methods and class attributes for a class in JS? We can directly add static attributes and static methods to the class. For example, add an age static attribute and a hello static method to the HelloWorld class, then the declaration is as follows:

Copy code The code is as follows:

HelloWorld.age = 22;
HelloWorld.hello = function() {
alert(HelloWorld.age);
}

Then the static attribute age and the static method hello are declared for the class HelloWorld. When using it, you can directly use the class name to access, but you cannot use the instance to access. This is consistent with JAVA. The test is as follows:

Copy code The code is as follows:

function _test()
{
var obj = new HelloWorld();
obj.sayHello(); / / Correct, instance method, can be accessed through the instance
HelloWorld.hello(); // Correct, static method, directly accessed through the class name
obj.hello(); // Error, cannot be accessed through the instance static method. A JS error will be reported!
}

Through the above explanation, I believe that everyone has a certain understanding of object-oriented programming with JS, and they must be ready to do it. Haha, you might as well try it (tip: the above code All passed the test!)