Entering the javascript palace from prototype_1.3.1 - a preliminary exploration of classes_prototype

I decided to give it the title ajax, after all, many people will use this keyword to search. Although I think this is just a hyped concept, I have to admit that calling ajax is much more convenient. I won’t explain the meaning of ajax in detail.

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

A few years ago, in the eyes of ordinary people, the functions of JavaScript were still very narrow. All it could do were either some simple form validations or many flashy web page special effects. With the emergence of flash, everyone is no longer as keen on js special effects as before. It seems that js can do even less. But at this time, the concept of ajax emerged. Ajax applications, typically represented by gmail, attracted a lot of attention. Ajax suddenly became a very popular technology. When javascript, xml, and the dom model are combined, it can The things it does are often incredible, and some of its functions are even comparable to those of desktop programs.

Okay, no more nonsense, let’s start with a javascript development framework prototype_1.3.1 (hereinafter referred to as prototype). I originally wanted to introduce the advanced application of JavaScript first, but I was afraid that the level was not enough and the explanation was unorganized, so I combined it with prototype and mentioned the syntax of JS by the way.
The following are 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 difference between the following two syntaxes:


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

The latter one is very It is easy to understand, it is equivalent to function f(){}; defines a function f. But the first one is not common: this is actually creating an object, and you can specify the members of the object in {}. 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). This function of directly creating objects without defining a class may only be possible with js. The latter syntax actually has another function, which is to define a class f. If you use this in the function body, then the variables after this are members of the class.
Not only can this define class members, there is also a syntax:

function c(){
member1:value,
member2:function(){}
}

This is equivalent to:

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

It should be noted that when using the former method, a comma cannot be added at the end of the last member. I think this syntax should be related to the array.

In js, there is no difference between functions and classes. Both can be new. The function of new is to execute all the statements in the function body and then return an object. If there is this in the function, then the variable after this will be used as an object member; if not, then the function of new is just to return an empty object without any members. So when you use typeof to check the type of a so-called class, function will still be returned. There is basically no concept of type in js. All variables are declared using var, even for functions. A function is actually just a variable.

Many people may not understand that functions are variables. But try the following:

function fTest(){
var a=1;
alert(a);
}
alert(fTest);

You will find that what is displayed is the function body of the fTest function, so we can think that the so-called function is just a code string that can be parsed by the js engine. The function name variable stores only this string. To be more precise, the function name is a pointer variable, which stores the location of the code string in memory. In this way, it is not difficult to understand that passing a function as a parameter can be returned as a value. This is a technology that will be used extensively in the future. Because classes are also functions, if you understand functions, you also understand classes.

Although there is no difference between functions and classes in js, the concept of class can facilitate our programming, so prototype creatively created a global object Class:

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Class is a global object. Its only method is create, which returns a function. The mechanism of function as a return value has been discussed before and will not be discussed here. The returned function includes a statement:

this.initialize.apply(this, arguments);

As mentioned before, when a new function is created, the code in the function will be executed and the object will finally be returned.So when a function is created using Class.create() and the returned function is new, this statement will be executed first. As you can see later, this is actually to call the constructor of the class.

That’s it, Class has become the type creation model for the entire prototype, and can well distinguish classes and functions in code. Class.create() just returns an empty class, and it will default to this class having an initialize method, so to use this class, you need at least one constructor, which requires the use of class inheritance. A class is just a function, so how does the function inherit? It seems incredible that javascript can do this, and prototype makes the implementation more elegant. As for how it is done, we will break it down next time.