A deep understanding of the scope of javascript and a deep understanding of javascript

A deep understanding of the scope of javascript and a deep understanding of javascript

In short, the scope is the accessible scope of variables and functions, that is, the scope controls the visibility and lifecycle of variables and functions. In javascript, variables have two scopes: global and local.

Global scope is accessible anywhere in the code, called global variables. In the following three cases

GLOBAL SCOPE

 

Variables defined outside the outermost and outermost functions:

Var name = "brizer"; function doSomething () {var realname = "lf"; function innerSay () {alert (realname) ;}innersay ();} document. write (name); // brizerdocument. write (realname); // Script Error doSomething (); // lfinnerSay () // Script Error

Undefined variables with direct values:

/* Global scope 2: */function doSomething () {var name = "brizer"; realname = "lf"; document. write (name);} doSomething (); // brizerdocument. write (realname); // lf

All window objects:

Generally, the built-in attributes of all window objects have a global scope, such as window. location.

 

Local Scope

Local scopes can be accessed only within a fixed code segment.

The following code:

Function doSomething () {var name = "lf"; function innerSay () {alert (name) ;}innersay () ;}alert (name ); // Script Error innerSay (); // Script Error

Function Scope

Here, the function scope is proposed separately not because it has a hierarchical relationship with the local and global, but because it is quite special. Functions in JavaScript run in their defined scopes, rather than in their executed scopes. This is a sentence in the javascript authoritative guide, which is quite classic.

For example,

// Functions run in their defined scopes, rather than the scopes in which they are executed. var name = 'lf '; function echo () {document. write (name);} function env () {var name = 'brizer '; echo ();} env ();

The final result lf is not brizer. It indicates that the scope of a function is determined when it is defined.

Scope chain

Let's talk about the scope chain. In javascript, functions are also objects. In fact, everything in javascript is objects. A function has an internal attribute [[scope] That only accesses the javascript engine. This attribute contains the set of objects in the scope when the function is created. This set is called the scope chain.

 

For example, the following code:

function add(num1,num2) {    var sum = num1 + num2;    return sum;}

When a function is created, its scope chain is filled with a global object, which contains all global variables, such:

When a function is executed, an activity object is created, which contains all the local variables, named parameters, and this of the function. Then, the object is pushed to the frontend of the scope chain, after the function is executed, the object is destroyed. For example:

We can see that the global variables are pushed to the end of the scope chain by the active objects, which is why the access speed of global variables is slow!

With

In general, the scope chain will only be affected by the with and catch statements. When with is used for creation, the function will create a new activity object and push it to the frontend. This object is the with object. This means that all local variables are in the second scope chain object, which is why we should avoid using.

function initUI(){    with(document){        var bd=body,            links=getElementsByTagName("a"),            i=0,            len=links.length;        while(i < len){            update(links[i++]);        }        getElementById("btnInit").onclick=function(){            doSomething();        };    }}