Experience javascript metamorphosis

I have been studying Javascript for more than ten days. I would like to summarize it for myself and for others. The general impression of Javascript is that it is very casual. This impression comes from its object-oriented nature. Of course, the flexibility of Javascript is doomed to be a casual language. Syntax features of Javascript Ja... SyntaxHighlighter.

 

I have been studying Javascript for more than ten days. I would like to summarize it for myself and for others. The general impression of Javascript is that it is "casual", which is derived from its object-oriented approach. Of course, the flexibility of Javascript is doomed to be a casual language.

Syntax features of Javascript

Javascript is a dynamic, weak type, prototype-based scripting language. Some of our floating effects on some websites (although annoying), image switching effects, and some text editors are all attributed to Javascript. Of course, Javascript is a thorough object-oriented language. Although you see function () everywhere, who has defined that function cannot be an object. Let's take a look at some specific content.

Basic Javascript syntax

Anyone with a little programming Foundation will think that the Javascript syntax is very simple and easy to use, but this does not mean that Javascript is easy to learn, and it is not easy to be proficient in Javascript.

Javascript has five basic data types: Number, String, boolean, Null, and Undefined.

As we have already said above, Javascript is a dynamic weak language. Let's take a look at where Javascript is dynamic and where it is:

 

// Declare Variables

Var attr1 = 1;

Var attr2 = 1.03;

Var attr3 = "hello ";

Var attr4 = false;

 

As in java, variables of any type must be defined in advance to be declared. In Javascript, we can simply "click it" and what type it is. There is no reason to say that there is code to tell the truth. We can test it by using the typeof keyword in Javascript.

 

// Declare Variables

Var attr0;

Var attr1 = 1;

Var attr2 = 1.03;

Var attr3 = "hello ";

Var attr4 = false;

Alert (typeof attr0); // undefined

Alert (typeof attr1); // number

Alert (typeof attr2); // number

Alert (typeof attr3); // string

Alert (typeof attr4); // boolean

Alert (typeof null); // object

Alert (typeof undefined); // undefined

 

There is also a knowledge point about null and undefined. Null is an empty Object. Its type is Object. undefined is an attribute of the Global Object (Window). Therefore, its type is undefined. However, undefined is inherited from null. The basic syntax of Javascript is very simple, and you can get started with it after a rough look, so other things will not be mentioned here. Start the next section...

Javascript Scope

The Javascript scope is very personalized. Let's take a look at several examples to try it out.

 

// Scope

Var outer = 1;

Function layer (){

Var layer1 = 2;

Function inner (){

Var layer2 = 3;

Alert (layer1); // 2

Alert (layer2); // 3

}

Inner ();

}

Layer ();

Alert (outer); // 1

Alert (layer1); // layer1 has been recycled

Alert (layer2); // layer2 has been recycled

This is similar to other programming languages, mainly involving global variables and local variables. The scope of global variables and local variables does not need to be detailed.

 

 

// Sample2

Var x = "smile ";

Var alerts = function (){

Alert (x); // undefined

Var x = "fuck ";

Alert (x); // fuck

// The above is equivalent to the following code

// Var x;

// Alert (x); // undefined

// X = "fuck ";

// Alert (x); // fuck

}

Javascript has no block-level scope. All variables declared in the function make sense in the entire function, no matter where they are declared. It is estimated that this is not acceptable for programmers who are familiar with the java language. I do. There is another flexibility: Variables not declared using var are global variables, and global variables are Window properties. Haha... it's hard to get used to it !!

Javascript Closure

When implementing deep constraints, you need to create a thing that can explicitly represent the reference environment and bind it with the relevant subroutine. In this way, the bundled whole is called a closure. From such a definition, we cannot easily understand what a closure is. Let's talk about things with an example...

 

// Closure demonstration

Var func = function (){

Var attr = "can read me ?? ";

Return function (){

Alert (attr );

}

}

Func ()();

 

Originally, we were unable to access the attr attribute outside the func function, but "can read me ?? "The alert () method is actually used to pop up. Why? Does the last anonymous function used as the return value help us save the attr attribute? Of course, there are some strange ways to call this function: func ()(). We will provide a further detailed introduction.

When a Javascript function is called, the function enters the corresponding execution environment. If another function is called (or the same function is called recursively), a new execution environment is created and the execution process is in this environment during the function call. When the called function returns, the execution process returns the original execution environment. The execution environment created at the same time contains a scope chain, which is implemented by the activity (variable) of the execution environment) objects are added to the front-end of the scope chain in the [[scope] attribute of the called function object.

Based on the above example, the func () function returns an anonymous function, so the execution environment and scope chain of the returned anonymous function will not be recycled, when we access the attr attribute, I will find it directly in the scope chain of the function runtime environment. (For this content involved in Javascript content more profound, do not understand, but can refer to: http://www.cn-cuckoo.com/2007/08/01/understand-Javascript-closures-72.html ).

Javascript object-oriented

Javascript object-oriented is a little strange, because Javascript is a functional programming language. Although we can simulate inheritance, encapsulation, and other object-oriented features, however, it is not as natural as a language like java. Of course, it does not rule out its own subjective factors. Let's first simulate the object-oriented Javascript and try it out.

Method 1: the most primitive Method

 

Var car = new Object ();

Car. color = "red ";

Car. speed = 100;

Car. showColor = function (){

Alert (this. color );

};

 

Car. showColor ();

 

Method 2: Use the factory

 

Function createCar (){

Var car = new Object ();

Car. color = "red ";

Car. speed = 100;

Car. showColor = function (){

Alert (this. color );

};

Return car;

}

Var car = createCar ();

Car. showColor ();

 

Method 3: Use constructors

 

Function Car (color, speed ){

This. color = color;

This. speed = speed;

This. showColor = function (){

Alert (this. color );

};

}

Var car = new Car ("blue", 400 );

Car. showColor ();

 

Method 4: Use prototype

 

Function Car (){

}

Car. prototype. color = "blue ";

Car. prototype. speed = 300;

Car. prototype. showColor = function (){

Alert (this. color );

};

Var car = new Car ();

Car. showColor ();

 

Method 5: Mixed constructor and prototype

 

Function Car (color, speed ){

This. color = color;

This. speed = speed;

This. drivers = new Array ("mike", "sue ");

}

Car. prototype. showColor = function (){

Alert (this. color );

};

Var car1 = new Car ("green", 300 );

Car1.drivers. push ("wangkang ");

Car1.showColor ();

Alert (car1.drivers. join ());

 

Var car2 = new Car ("black", 300 );

Car2.showColor ();

Alert (car2.drivers. join ());

 

Method 6: Dynamic Prototype

 

Function Car (color, speed ){

This. color = color;

This. speed = speed;

This. drivers = new Array ("mike", "sue ");

}

If (typeof Car. _ initialized = "undefined "){

Car. prototype. showColor = function (){

Alert (this. color );

};

Car. _ initialized = true;

}

Var car1 = new Car ("green", 300 );

Car1.drivers. push ("wangkang ");

Car1.showColor ();

Alert (car1.drivers. join ());

 

Var car2 = new Car ("black", 300 );

Car2.showColor ();

Alert (car2.drivers. join ());

 

Method 7: Hybrid Factory

 

Function Car (){

Var car = new Object ();

Car. color = "red ";

Car. speed = 100;

Car. showColor = function (){

Alert (this. color );

};

Return car;

}

Var car = new Car ();

Car. showColor ();

 

After all, object-oriented is just a programming idea, and it uses much more of its own meaning. Because I have not learned Javascript For a long time, the internal mechanism is not very understandable, however, the article recommended above must be helpful because it thoroughly analyzes the Javascript operating mechanism.

I just want to provide you with a Javascript literacy program, so I try my best to make no mistakes in the article. I think a little less, and I have a little more examples! There is also a recommended blog that we hope you will carefully ponder over several times. If you understand that blog, then Javascript's scopes, closures, object-oriented features will be very easy to understand. Http://www.cn-cuckoo.com/2007/08/01/understand-Javascript-closures-72.html