Scope and scope chain

Source: Internet
Author: User
1. Scope

The so-called scope is that variables are defined in the body of the function that declares them and in any function that is nested within the function body.
function scope () {var foo = ' Global ';         if (window.getComputedStyle) {var a = "I ' m if"; Console.log ("if:" +foo);         If:global} while (1) {var b = ' I ' m while ';     Console.log ("while:" +foo),//while:global break;         }!function () {var c = ' I ' m function ';     Console.log ("function:" +foo);//function:global} ();  Console.log (Foo,//global A,//I ' m if B,//I ' m while C//C are not defined); Scope ();
(1) The Foo variable defined in the scope function can be accessed in an if statement, a while statement, and an embedded anonymous function, in addition to its own access. Therefore, the scope of Foo is the scope function body.
(2) in JavaScript, if, while, for, and other blocks of code cannot form an independent scope. Therefore, there is no block-level scope in JavaScript, only function scopes.
However, there is a special case in JS:
If a variable does not use the Var Declaration, window has the property, so the scope of the variable is not part of a function body, but a window object.

function Varscope () {foo = ' I ' m in function '; Console.log (foo); I ' m in Function} varscope (); Console.log (Window.foo); I ' m in function
2. Scope Chain
The so-called scope chain is: a function body nested in a multi-layer function body, and in different function bodies defined the same variable, when one of the functions to access the variable, will form a scope chain.

foo = "Window";
function A () {var foo = ' a ';        function second () {var foo = ' second ';     Console.log (foo);     function third () {Console.log (foo); } second ();  Second third (); ' A ' ();
When the second is executed, the JS engine places the second's scope on the head of the linked list, followed by the scope of the A, and finally the window object, forming the following scope chain:
Second->first->window, at this point, the JS engine looks for variable foo along the scope chain, and the second is found.
When the third is executed, the scope chain of third formation: Third->first->window, so the check is: Frist
3, scope chain extension (With/catch)
The WITH and catch statements are used primarily to temporarily extend the scope chain, adding variable objects passed in statements to the head of the scope. Once the statement is complete, the original scope chain returns to normal.
With statement
foo = "Window";
function A () {var foo = ' a ';        function second () {var foo = ' second ';     Console.log (foo);        function third (obj) {console.log (foo);//first with (obj) {console.log (foo);//obj} Console.log (foo);     The ' var ' obj = {foo: ' obj '}; third (obj); } a ();
Catch statement
var e = new Error (' a '); Try {throw new Error (' B ');} catch (E) {console.log (e.message);//b}
When third () is executed, an Obj object is passed with attribute Foo in obj, and when the WITH statement is executed, the JS engine places obj on the head of the original list, and the scope chain is formed as follows:
Obj->third->first->window, the Foo found at this time is foo in obj, so the output is obj
Before and after with, the lookup is done along the original list, which shows that the scope chain is back to normal after the WITH statement is completed.
4. This keyword
In a function, this always points to the owner object of the current function, this is always at run time to determine its specific point, and to know its calling object.

window.name = "Window";
function f () {Console.log (this.name);} f ();//window var obj = {name: ' obj '};
F.call (obj); Obj
At the time F () is executed, the caller of F () is the Window object, so the Output window
F.call (obj) is the execution of F () on the Obj object, equivalent to OBJ.F (), where this is obj, so the output is obj
5, actual combat application 1:var foo = "Window";         var obj = {foo: ' obj ', getfoo:function () {return function () {return this.foo;     }; } }; var f = obj.getfoo ();
f (); Window
Combat 2:

var foo = "Window"; var obj = {

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.