Enter the javascript Hall from prototype_1.3.1-class preliminary study _ prototype

From prototype_1.3.1 to the javascript Palace-the class's preliminary research determines whether to title ajax. After all, many people will use this keyword to search. Although I think this is just a hype concept, I have to admit that ajax is much more convenient to call. I will not explain the meaning of ajax in detail.

The reason for writing this tutorial is very simple: after a period of ajax learning, I have some experience and become more aware of the power of ajax technology, so I decided to record it and sort out my own ideas by the way.

In the past few years, javascript is still very narrow in the eyes of ordinary people. What we can do is either simple form verification or many flashy webpage special effects. With the emergence of flash, we are not as keen on js special effects as before. It seems that javascript can do less. However, at this time, the concept of ajax emerged. ajax applications, represented by gmail, have received a lot of attention. ajax has suddenly become a very popular technology. When javascript and xml, when combined with the dom model, what it can do is often incredible, and some functions can even be equivalent to the desktop program.

Now we can start with a javascript development framework prototype_1.3.1 (prototype. I would like to introduce the advanced javascript applications first, but I am afraid that the level is not enough and that it is not organized. Therefore, combined with prototype, I will mention js syntax usage by the way.
The following is the first two pieces of code in the framework:

Var Prototype = {
Version: '1. 3.1 ',
EmptyFunction: function (){}
}
Var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}
First, let's look at the differences between the following two syntaxes:


Var o = {};
Var f = function (){};

The next one is easy to understand. It is equivalent to function f () {}; defining a function f. But the previous one is not common: This is actually to create an object. In {}, you can specify the object members. For example, the Prototype above is an object with two members, the first is the version number, and the second is an empty method (function ). For example, JavaScript can only create objects without defining classes. Another function of the subsequent syntax is to define a Class f. If you use this in the function body, the variable after this is a member of the class.
Not only can this define class members, but also has a Syntax:

Function c (){
Member1: value,
Member2: function (){}
}

This is equivalent:

Function c (){
This. member1 = value;
This. member2 = function (){};
}

Note that, in the previous method, the last Member cannot end with a comma. I think this syntax should be related to arrays.

In js, functions and classes are no different. They can all be new. The function of new is to execute all the statements in the function body and then return an object. If the function contains this, the variable after this will act as the object member; if not, the new function only returns an empty object without any members. So when you use typeof to view the type of a so-called class, the function is still returned. There is basically no type concept in js, and all variable declarations use var, even for functions. A function is actually just a variable.

It may be confusing to say that a function is a variable. But try the following:

Function fTest (){
Var a = 1;
Alert ();
}
Alert (fTest );

You will find that the function body of the fTest function is displayed, so we can think that the so-called function is just a code string that the js engine can parse. The function name variable only stores this string. More accurately, the function name is a pointer variable that stores the position of the code string in the memory. In this way, it is not difficult to understand that a function is passed as a parameter and can be returned as a value. This is a technology that will be widely used in the future. Because classes are also functions, you can understand functions and classes.

Although there is no difference between functions and classes in js, the concept of classes can facilitate our program design, so prototype creates a global object Class very creatively:

Var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}

Class is a global object. Its only method is create. It returns a function. We have discussed the function as the return value mechanism. The returned function contains a statement:

This. initialize. apply (this, arguments );

As mentioned above, when a new function is used, the code in the function is executed and the object is finally returned. Therefore, when Class. create () is used to create a function and then the new function is returned, this statement is executed first. As you can see later, this is actually to call the class constructor.

In this way, the Class becomes the prototype creation model, and can distinguish classes from functions in code. Class. create () Only returns an empty class. By default, this class has the initialize method. To use this class, at least one constructor is required, this requires class inheritance. Class is just a function, so how does a function inherit? It seems incredible that javascript can do this. prototype makes the implementation more elegant. As for how it does it, let's take a look at the next decomposition.