JS Object Programming

Before the rise of Ajax, many people write JS can be said to be no way to say, basically think of what to write, is one after the function functions, encountered duplicate also copy, if the name of accidentally function, do not know where to start looking for errors, Because we always use the process-oriented programming thinking to write JS code, but also because the network is flooded with too many small "Qiao" JS code snippet, many are arbitrary and for, very nonstandard, this also caused everyone to JS "misunderstanding", blindly think it is an auxiliary small east, and not suitable for bigger things development. But since the advent of Ajax, a lot of JavaScript coding requires people to have similar code like Java writing, can be object-oriented development.

So the following combination of my own experience and learn the east and everyone together to learn how to use object-oriented programming in JS. In fact, the use of JS for object-oriented development is not a very difficult thing, because in JS each function is an object, such as the following functions:

Copy CodeThe code is as follows:
function HelloWorld ()
{
Alert (' Hello world! ');
}

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

Copy CodeThe code is as follows:
function _test ()
{
var obj = new HelloWorld ();
}

Then after calling the _test method, the Hello world! will pop up. The HelloWorld () object (function) is called. Here HelloWorld this object has no properties and methods, it has only a constructor method HelloWorld (), we can think of it as a class in Java without any properties and methods, when the object is created using new, it calls its construction method. This is our simplest object, of course, an object must be given its properties and methods, in JS we use the prototype prototype keyword to assign values, such as I want to add a SayHello method and a Name property to the HelloWorld object, Then you can add it like this:

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 to HelloWorld, and we'll change the _test method as follows:

Copy CodeThe code is as follows:
function _test ()
{
var obj = new HelloWorld ();
Obj.sayhello ();
}

Then the _test method is called to print Hello wordl! and JavaScript (one is alert in the construction method and one is alert in the SayHello method). Note that alert in the SayHello method refers to the This keyword, which represents the HelloWorld object, which, by default, points to the object, just like the This keyword in java.

For adding instance methods and properties to an object, we can use the Prototype keyword to assign a value, in the following form:

Copy CodeThe code is as follows:
The object name. prototype = {
Attribute one: Property value,
Attribute two: Property value,
Method One: Function (argument list) {
Method body;
},
Method Two: function (parameter list) {
Method body;
}
}

You can define multiple properties and methods on an object as described above, so that you can use the instance name after you have a new object. property or method to get the property or execution method.

In the above method, it is not known that the property without objects can be accessed directly, such as accessing the Name property of the HelloWorld object can be obtained directly using Obj.name. This is like the public attribute in our Java, and we can also assign a value directly to the Name property. So now there's a problem, how do we assign a private member variable to an object? Then we might want to change the way the HelloWorld class is declared, not using prototype for class properties and method declarations, but directly using inline functions and attributes, and modifying the HelloWorld as follows, which we named HelloWorld2:

Copy CodeThe code is as follows:
function HelloWorld2 ()
{
var privateprop = ' Hello World 2! ';
This.method = function () {
alert (Privateprop);
}
}

See HELLOWORLD2 's class declaration method? is to make a function nesting declaration directly inside the function, and we also set a local variable privateprop, our private member variable, which can only be accessed by functions inside the HelloWorld2, which is not allowed by external access. This allows us to subtly set the private variables of a class by using the scope of the variable. We apply the following:

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); Will print undefined
}

All that is said is how to define a class, how to define properties and methods for a class, because the definition is clear in prototype way, so it is generally used to define the class, and now many Ajax frameworks use similar class declaration methods. and the private member variable of a class can only be accessed by a function in the way the class is constructed, so that the prototype declared method of the class cannot access the private member variable, and the readability is not prototype way.

All right, all of this is about defining instance methods and properties for a class. In Java, classes have instances of methods and properties and class methods and properties. The so-called Class attribute and method is that all instances of the class maintain only one copy of the class properties and class methods, not each instance maintains a set, which is not the same as instance properties and instance methods. So how do you define a static class method and Class property for a class in JS? We can add static properties and static methods to the class directly, such as adding a static property of age to the HelloWorld class and a static method of Hello, and declare the following:

Copy CodeThe code is as follows:
Helloworld.age = 22;
Helloworld.hello = function () {
alert (helloworld.age);
}

Then this declares the static attribute for class HelloWorld The age and static method hello. It is accessed directly using the class name at the time of use, but cannot be accessed using an instance, which is consistent with Java and is tested as follows:

Copy CodeThe code is as follows:
function _test ()
{
var obj = new HelloWorld ();
Obj.sayhello (); Correct, instance method that can be accessed through an instance
Helloworld.hello (); Correct, static method, direct access through the class name
Obj.hello (); Error, the static method cannot be accessed through the instance. will report JS Error!
}

Through the above instructions, I believe that you have a certain understanding of JS object-oriented programming, but also must be tempted to do it, hehe, we may try (hint: The above code all pass the test!)

JS Object Programming