Some summary of JavaScript experience

JavaScript scopes

1. Scope

The scope of JavaScript is different from the C, Java and other languages, it is not surrounded by curly braces block-level scope, this feature is often overlooked by most people. For example, the following code, in most of the language of Class C, the variable undefined error, but in JavaScript is completely legal:

if (true) {

var msg = ' msg ';

}

Console.log (msg); Output msg;

This is because the scope of the JavaScript is entirely determined by the function, and the curly brackets in the IF, for statements are not separate scopes.

2. Function scope

Unlike most languages of Class C, a block of code enclosed by a pair of curly braces is a scope, and the scope of JavaScript is defined by functions, and variables defined in a function are only visible inside the function, which we call function scopes. When a variable is referenced in a function, JavaScript searches the current function scope first, and then searches its upper-level scope if it is not found, until it is scoped to the global scope. The following is a simple example:

var scope = ' Global ';

var f1 = function () {

Console.log (scope);

}

F1 (); Output Global

var F2 = function () {

var scope = ' F2 ';

Console.log (scope);

}

F2 (); Output F2

The above example is very clear, the function definition of JavaScript can be nested, each layer is a scope, the variable search order is from inside to outside, according to scope search order, When the Console.log function accesses the scope variable, JavaScript searches for the scope of the function F2, and it happens to search for the scope variable in the scope of the F2, so the scope defined in the upper scope is masked. But here's an example that might be confusing:

var scope = ' Global ';

var F3 = function () {

Console.log (scope);

var scope = ' F3 ';

}

F3 (); Output undefined

Copy Code

The above code may not be the same as what you expected, and not output global, but undefined, why is that? This is a feature of JavaScript, where variable declaration statements are always executed first in the scope, so the above example is as follows:

var scope = ' Global ';

var F4 = function () {

var scope; Variable declarations are executed first

Console.log (scope);

Scope = ' F4 '; The variable is given a value

}

F4 (); Output undefined

It is not difficult to understand why the run F3 () function did not output global, but undefined.

3. Nesting of function scopes

An example of a scope nesting:

var f5 = function () {

var scope = ' first ';

(function () {

var scope = ' second ';

(function () {

Console.log (scope);

}());

}());

}

F5 (); Output second

We refer to the scope variable in the inner function, and through the scope search, we find the scope variable defined in its parent scope.

One thing to note is that the nested relationship of a function scope is determined at the time of definition, not at the time of invocation, and here is a simple example:

var scope = ' Global ';

var f6 = function () {

Console.log (scope);

}

var F7 = function () {

var scope = ' F7 ';

F6 ();

}

F7 (); Output Global

In this example, F6, which is called by F7, finds the scope variable defined in the parent scope of the F6 function, rather than the scope variable defined in F7, when searching for scope. This shows that the nested relationship of a function scope is determined at the time of definition, not at the time of invocation.

This usage of javascript

This is a keyword in the JavaScript language.

It represents an internal object that is automatically generated when the function is run, and can only be used inside the function. Like what

function Test () {

this.x = 1;

}

The value of this will change as the function is used in different situations. But there is a general principle, that is, this refers to the object that called the function.

The use of this is discussed in detail in four scenarios.

Case one: purely function calls

This is the most common use of a function, which is a global call, so this represents the Globals object.

Take a look at the code below, which results in a 1 operation.

function Test () {

this.x = 1;

alert (this.x);

}

Test (); 1

To prove that this is a global object, I make some changes to the code:

var x = 1;

function Test () {

alert (this.x);

}

Test (); 1

The result of the operation is still 1. Change it a little bit again:

var x = 1;

function Test () {

this.x = 0;

}

Test ();

alert (x); 0

Scenario Two: Invocation as an object method

A function can also act as a method call to an object, at which point this is the ancestor object.

function Test () {

alert (this.x);

}

var o = {};

o.x = 1;

O.M = test;

O.M (); 1

Scenario three is called as a constructor function

The so-called constructor is to generate a new object by this function (object). At this point, this is the new object.

function Test () {

this.x = 1;

}

var o = new Test ();

alert (o.x); 1

The run result is 1. To show that this is not a global object, I make some changes to the code:

var x = 2;

function Test () {

this.x = 1;

}

var o = new Test ();

alert (x); 2

The run result is 2, indicating that the value of global variable x does not change at all.

Scenario Four apply Call

Apply () is a method of a function object that changes the calling object of a function, and its first parameter represents the changed object that called the function. Therefore, this is the first parameter.

var x = 0;

function Test () {

alert (this.x);

}

var o={};

o.x = 1;

O.M = test;

O.m.apply (); 0

The global object is called by default when the argument to apply () is empty. Therefore, the result of this operation is 0, which proves that this refers to the global object.

If the last line of code is modified to

O.m.apply (o); 1

The result of the operation becomes 1, which proves that this is the object o.

Some summary of JavaScript experience