Javascript object-oriented-Anonymous functions and anonymous classes, as well as native classes

Source: Internet
Author: User
1. About anonymous classes

VaR class1 = {p1: value1, P2: value2 };

This can also be written

VaR class1 = {};

Class1.p1 = value1;

Class1.p2 = value2;

First, all anonymous classes are inherited from the core object. var class1 ={} means that an object is instantiated and has the native attributes and native methods of the object.

However, you cannot add a native method to an anonymous class. For example, it is wrong to write this method:

Class1.prototype. func1 = function (){};

You cannot try to use the new () method to construct a new object with the same attributes as class1 because it has been instantiated. The following statement is also incorrect:

VaR classb = new classa ();

This cannot be constructed,

To be accurate, an anonymous class is actually a half-instance of an inherited object, which is equivalent to a static class in C. You can add methods and attributes for it.

For example:

Class1.func1 = function (){}

This is the case when calling:

Class1.func1 (); similar to the static class in C #

However, you can add native functions for the object so that your anonymous class (actually all classes) has this method.

For example:

VaR class1 = {};

Class1.p1 = value1;

Class1.p2 = value2;

Object. Prototype. func1 = function () {alert ("1 ")};

Class1.func1 ();

There is no problem, but in this way, all the instantiated objects have the func1 () method. In practice, you should avoid adding native methods to the object class.

2. About anonymous Functions

Let's talk about JavaScript Functions first:

In this case, everything in Javascript is an object, and functions are no exception. functions can be used as functions, classes, or function objects.

See the following example:

Function ()
{

Alert ("Hello febird! ");

This. AA = "AA ";
This. Show = function ()
{
Alert (this. aa );
};

This. sayhello = function ()

{

Return function () {alert ("hello ");};

};
}

VaR AAA = new ();
AAA. Show ();

AAA. sayhello ();

The outermost function defines a class A, which has the attributes AA, show (), and sayhello (). Both are anonymous functions, the function in sayhello is an example of a function as a return value.

As a matter of fact, an anonymous function is a code block without a name. When you assign a value to another variable, the variable is a function, to be accurate, it is a function pointer ^_^.

Anonymous functions are very useful and difficult to understand in javasript.

For example, when writing an Ajax reference, if you do not rely on other JSF, write a general Ajax Statement by yourself. Generally, write as follows:

VaR xhr = new XMLHttpRequest (); // It has been encapsulated and can be adapted to different browsers;

Function doajax ()

{

Xhr. onreadystatechange = processfunction;

Xhr. Open ("get", URL, true );

Xhr. Send (null );

}

Function processfunction ()

{

// Do something with XMLHttpRequest;

If (xhr. readstate! = 4 | xhr. status! = 200) return false;

Alert (xhr. responsetext );

}

In a common Ajax reference, an error occurs if an XMLHTTPRequest object and the onreadystatechange handler must have no parameters,

Therefore, we usually write a global variable XMLHttpRequest and use this global variable in processfunction.

What should I do with the concurrent connections of XMLHttpRequest? The global variables cannot be used, but the processing function cannot have parameters. How can this problem be solved:

Function doajax ()

{

VaR xhr = new XMLHttpRequest ();

Xhr. onreadystatechange = processfunction (xhr );

Xhr. Open ("get", URL, true );

Xhr. Send (null );

}

Function processfunction (_ xhr)

{

Return function ()

{

// Do something with XMLHttpRequest;

If (_ xhr. readstate! = 4 | _ xhr. status! = 200) return false;

Alert (_ xhr. responsetext );

};

}

How can this problem be solved? Although the processfunction function has parameters, the function returned by it has no parameters! How are the values transmitted between these two functions?

Here is a reference:

"In order for the function to be correctly executed, the function must use non-global data in the lexical scope,
Exist in the closure of the function ."

It can be understood as follows:

When we use functions returned by processfunction () outside of processfunction, we still need to remember the values of various variables in the upper-level scope when we are defined. These requirements
The value to be remembered is the closure ".

3. About native objects

Native, prototype, provides us with methods to expand and transform original objects. For example, we can add methods or attributes to known objects, including JavaScript core objects such as array, number, math, object, and Boolean, and custom classes.

For example:

Number. Prototype. tohexstring = function (){

Return this. tostring (16 );

};

VaR num = 10

Alert (Num. tohexstring ());

Output;

You can add a method for an object. In this way, any object in the future will have this method, because other objects are inherited from the object.

You can also recreate existing functions.

Function. Prototype. tostring = function (){

Return "function locked ";

};

4. About this

In JavaScript, there is no strict object-oriented concept, and naturally there is no such concept as class constructor. VaR o = new OBJ (); the syntax seems to be quite similar to Java/C ++, but the execution process behind it is different. First, the interpreter creates an empty object. Then, the empty object is
Pass hidden parameters to function OBJ (). This accessed in the OBJ function is actually an empty object passed in. Therefore, if the object,

It is not empty. This is the meaning of "this keyword is associated with the scope of execution.

If you want to use a function as a "constructor", do not add a return statement at the end of the function. If no return statement exists, the new operator returns

This after the operation. Once you return something else through return, this is discarded. Function callers are quite confused.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.