Understand the scope and scope chain of js


1. What is scope

A scope is the accessibility of variables, functions, and objects in certain parts of the runtime code. In other words, the scope determines the visibility of variables and other resources in the code block. Maybe these two sentences are not easy to understand. Let's take a look at an example:

function outFun2() {
    var inVariable = "Inner variable 2";
outFun2();//You have to execute this function first, or you don't know what's inside
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

  The scope is an independent domain, so that variables will not be leaked and exposed. In other words, the greatest use of scopes is to isolate variables. Variables with the same name under different scopes will not conflict.

Before ES6, JavaScript had no block level scope, only global scope and function scope. The arrival of ES6 provides us with a 'block level scope', which can be reflected by adding the commands let and const.

  • The outermost function and variables defined outside the outermost function have global scope
var outVariable = "I'm the outermost variable"; //Outermost variable
function outFun() { //Outermost function
    var inVariable = "Inner variable";
    function innerFun() { //Inner function
console.log(outVariable); //I'm the outermost variable
outFun(); //Inner variable
console.log(inVariable); //inVariable is not defined
innerFun(); //innerFun is not defined
  • All variables that are not defined and directly assigned are automatically declared to have a global scope
function outFun2() {
    variable = "No directly assigned variable is defined";
    var inVariable2 = "Inner variable 2";
outFun2();//You have to execute this function first, or you don't know what's inside
console.log(variable); //No directly assigned variable is defined
console.log(inVariable2); //inVariable2 is not defined
  • The properties of all window objects have global scope
  • Function scope refers to variables declared inside a function. Contrary to the global scope, the local scope is generally accessible only in fixed code fragments, such as inside a function.

    function doSomething(){
        var blogName="Boating in the waves";
        function innerSay(){
    alert(blogName); //Script error
    innerSay(); //Script error

The scope is hierarchical. The inner scope can access the variables of the outer scope, and vice versa. Let's take an example. It may be easier to understand the scope by using bubbles:

The final output results are 2, 4 and 12

  • Bubble 1 is a global scope with identifier foo;
  • Bubble 2 is the scope foo, with identifiers a,bar,b;
  • Bubble 3 is the scope bar and has only identifier c.

3. Block level scope

The block level scope can be declared through the new command let and const. The declared variables cannot be accessed outside the scope of the specified block. A block level scope is created when:

  1. Inside a function
  2. Inside a code block wrapped in a pair of curly braces

The syntax of let declaration is consistent with that of var. You can basically use let to declare variables instead of VaR, but it will limit the scope of variables to the current code block. Block level scopes have the following characteristics:

  • Declared variables are not promoted to the top of the code block

The let/const declaration will not be promoted to the top of the current code block, so you need to manually place the let/const declaration to the top to make the variables available within the whole code block.


No matter where the fn function will be called.

So don't use the above statement. In contrast, it is more appropriate to describe it in this sentence: go to the domain where the function is created ".
The value in the scope is "create" rather than "call". Remember - in fact, this is the so-called "static scope"

var a = 100
function fn() {
    var b = 200
    console.log(a) // A here is a free variable here
var a = 100
function F1() {
    var b = 200
    function F2() {
        var c = 300
        console.log(a) // Free variable, find the parent scope along the scope chain
        console.log(b) // Free variable, find the parent scope along the scope chain
        console.log(c) // Variables in this scope
var x = 10
function fn() {
function show(f) {
  var x = 20
  (function() {
    f() //10, not 20
show(fn)//The call fn () is called in the global scope, so it is 10
var a = 10
function fn() {
  var b = 20
  function bar() {
    console.log(a + b) //30
  return bar
var x = fn(),
  b = 200
x() //bar()

 In depth understanding of JavaScript scope and scope chain - Fundebug - blog Garden


Tags: Javascript

Posted on Sat, 09 Oct 2021 04:05:20 -0400 by jasongr