Day55:js Review and extension

First, review

Second, JS Extension 1, JS is the scope

Scopes are one of the most important concepts of JavaScript, and to learn JavaScript you need to understand how JavaScript scopes and scope chains work.

Any programming language has the concept of scope, simply speaking, scope is the scope of the variable and function, that is, the scope of the variable and function visibility and life cycle. In JavaScript, the scope of a variable has both global scope and local scope.

1 scope (global scope)

Objects that can be accessed anywhere in the code have global scope, and in general there are several scenarios where you have global scope:

(1) The outermost function and the variables defined outside the outermost function have global scope.

var name= "Yuan";     function foo () {        var age=23;         function inner () {            console.log (age);        }        Inner ();    }    Console.log (name);     // Yuan    // Console.log (age);   Uncaught referenceerror:age is not defined    foo ();                //  at    Inner ();              // uncaught Referenceerror:inner is not defined

(2) All variables that are directly assigned to the last definition are automatically declared to have global scope, for example:

var name= "Yuan";     function foo () {        age =23;         var sex= "male"    }    foo ();    Console.log (age);    //       console.log (sex);   // sex is not defined

The variable blog has a global scope, and sex cannot be accessed outside the function.

(3) All Window object properties have global scope

In general, the built-in properties of the Window object all have global scopes, such as Window.alert (), window.location, Window.top, and so on.

2 scope (local scope)

In contrast to the global scope, local scopes are generally accessible only within a fixed code fragment, the most common of which is inside the function, and in some places it can be seen that this scope has been used as a function scope.

As in Example 1, age and inner have only local scopes. (JS If, for does not have its own scope).

2. Scope Chain (scope Chain)

In JavaScript, functions are objects, and in fact, everything in JavaScript is an object. function objects, like other objects, have properties that can be accessed through code and a series of internal properties that are accessible only by the JavaScript engine. One of the internal properties is [[Scope]], defined by the ECMA-262 Standard third edition, which contains a collection of objects in the scope of the function being created, called the scope chain of the function, which determines which data can be accessed by the function.

Sample Demo:

//-----********************** Case 1*********************************varS=12; functionf () {Console.log (s); vars=12;//if s=12Console.log (s)} f ();//-----********************** Case 2*********************************vars=10;functionfoo () {console.log (s); varS=5;  Console.log (s); functionS () {console.log ("OK")}//The setting or declaration of a function is done at lexical analysis, and no action is taken at execution timeConsole.log (s);} Foo ();//-----*********************** Case 3********************************functionBar (age) {Console.log (age); varAge = 99; varsex= ' Male ';        Console.log (age); functionAge () {alert (123)        };        Console.log (age); return100;} Result=bar (5);//-----********************************************************

Results Analysis:

I believe you will have unexpected results, and then we will analyze the whole process with the most complex example 3.

When a function is created, its scope chain is populated with data objects that can be accessed by creating the scope of this function. When the function bar is created, it fills a global object in its scope chain, which contains all the global variables, as shown in:

Parsing to a function call, bar (5), generates an object of the active object that contains all the local variables, named arguments, parameter sets, and this of the function, which are then pushed into the front of the scope chain, and the active objects are destroyed when the run-time context is destroyed. The new scope chain is as follows:

Process parsing:

functionBar (age) {Console.log (age); varAge = 99; varsex= "Male";        Console.log (age); functionAge () {alert (123);        } ;        Console.log (age); return100;} Result=bar (5); A lexical analysis process (involving parameters, local variable declarations, function declaration expressions):1-1, analysis parameters, have a parameter, form a ao.age=undefine; 1-2. Receiving parameter Ao.age=5; 1-3, analysis variable declaration, there is avarAge , found AO has a ao.age, then does not do any processing1-4, analysis variable declaration, there is avarSex, forming a ao.sex=undefine; 1-5, analysis function declaration, there is afunctionAge () {} declares that the original age is overwritten with ao.age=function() {}; two execution procedures:2-1, when performing the first console.log (age), the current ao.age is a function, so the output of a function2-2. This sentencevarage=99; is the Ao.age property assignment, ao.age=99, so the age of the second output is 99; 2-3, the third output is a 99because there is no statement in the middle that changes the age value. Note: The execution phase:functionAge () {alert (123)                        } ; Without doing anything, copying the execution statements to the age is done in lexical analysis, that is, before running. 

Day55:js Review and extension