The scope chain of JavaScript

Recently have wanted to tidy up a few good articles to share to everyone, but the writing is too vulgar, but also has been lazy. Until today, just a little bit of a look, because tomorrow will not go to work.

This article is my usual experience accumulation, inevitably wrong, welcome to correct, do not shoot bricks.

Begin.

In JavaScript, if the prototype chain is the process by which an object looks for a property, then the scope chain is the process of looking for a variable within the scope, so what is the difference between a property and a variable?

Here's an example:

function test () {var a=1;} var obj={b:2}

The above function test in a is a variable, using the var keyword definition, the above obj object B is a property, you can know that property B belongs to the object of obj, then the variable a belongs to which object? The answer is yes, the variable A is also part of an object, and we will introduce this object.

Before we introduce this object, we have to understand the execution of the function, each function corresponding to an execution context, the function of the process has two stages, one is to enter the execution context, and the second is to execute the code.

Into the execution context, each function will correspond to a context object (let's call it), this object has a VO attribute (which we would call it), the variables defined in this function are the attributes of this Vo object, and of course the context object and the Vo object have other property content.

Here's an example of a context object and a Vo object.

function Test (i) {    alert (x);//function    var x = ten;    alert (x); Ten    function X () {};    alert (x); 10}test (10);

Many students may have some doubts about the results of the above code, let us analyze the above code in the test function corresponding to the context object and the Vo object.

first stage, entering the execution context

Testexecutioncontext = {            VO: {                arguments: {                      0:10                      length:1                },                x:pointer to function X (), c14/>},            Scopechain: {...},            

Second stage, execute code

Testexecutioncontext = {            VO: {                arguments: {                      0:10                      length:1                },                x:10,            },            Scopechain: { ...}, this            : {...}}

Based on this analysis, it is not difficult to draw the result of the above function.

Here's the humorous digression.

var a=10;b=12;

What is the difference between the above code? One might say that this is a variable that defines two global variables, which, in fact, is a global variable, which simply defines a property for the Window object. But how do they differ? Here we can clearly analyze their differences by executing the context.

alert (a);//undefinedvar A=10;alert (b);//script error b=10;

See, this is the difference, in the context of the analysis of the way.

Into the execution context, B is not in the Vo object at all.

VO = {a:undefined};

This two value is only performed during code execution.

VO = {a:10 b:10};

The following back to the point, said the scope chain, since it is a chain, it can not be a thing, must be a string of things.

above example:

function A () {var aa= "AA"; function B () {var bb= "BB"; function C () {var cc= "CC"; alert (AA); alert (BB); alert (cc);} C ()}b ();} A ();

We have the above code, we can use function C inside function B, function a inside the variable BB and AA. In fact, this is a chain, a layer of chain structure, internal functions can use the variables of external functions. It's very simple, so let's talk a little bit about the principle.

Each function has an internal property of __parent__, which we cannot access with a browser, and if you want to access it, you can use the Rhino interpreter to execute the following code. For this thing, search the Internet on your own.

The __parent__ property can get the Vo object of "ancestor function", some are awkward, with the above example, the function c,c.__parent__ is the Vo object of the context of function B .

function A () {var aa= "AA"; function B () {var bb= "BB"; function C () {var cc= "CC"; for (var i in c.__parent__) {// Here is the Vo object of function B println (i);//Arguments,bb,c}}c ()}b ();} A ();

The result of the above println (Rhino without alert) is the Vo object that corresponds to function B, which contains the parameter object, the BB variable, and the function C.

Similarly, c.__parent__.__parent__ corresponds to the Vo object of function A to rewrite the above code: for (var i in c.__parent__.__parent__) {//Here is the Vo object of function a println (i);// ARGUMENTS,AA,B} Here we come to the principle that the process of finding variables for scope chains and scopes should be clearer.

Here is a quick look at the scope of the A,B,C function above.

Through the above diagram, we can clearly find that this is really a chain, for example: C function to find a variable, will now C function of the Vo object search, can not find the words, go to c.__parent__ is the B function of the Vo object to find, and then can not find the words will go to c.__ Parent__.__parent__ is a function of the Vo object to find, and then can not find the words go back to c.__parent__.parent__.parent__ to find that is the global scope, if still can not find, there is no way, direct error. is not very prototype chain have a spell.

Haha, end.

Time hurriedly, inevitably mistake, editor also never good, also hope forgive me, wish everyone happy New Year.

The scope chain of JavaScript