Javascript引擎如何处理条件语句和循环中的代码？

Question

I know Javascript create Global Execution Context and put them on the Execution stack and go through two stages, Creation stage, and Execution stage, on the second stage when it finds a function being invoked it creates an another execution context and put that execution context on the top of the execution stack, and repeats the same thing, once the code in the function finishes executing, it popped off the top of stack, return to execution context below in the stack. But my question is that how does Javascript deal with code blocks of condition statements or loops?

if (true) {
  //this is not the right way to write code.

  var var1 = 1;
  var var2 = 2;
  var3 = 3;

  function someFunction(arg1, arg2) {
    //code
  }
  someFunction('value1', 'value2');
}

Does the Javascript engine do the same thing when it enters a code block of condition statements or loops? what actually it does?

Answer 1

Variables declared with var and function have function scope, not block scope. So if you write:

function foo() {
    if (true) {
      //this is not the right way to write code.

      var var1 = 1;
      var var2 = 2;
      var3 = 3;

      function someFunction(arg1, arg2) {
        //code
      }
      someFunction('value1', 'value2');
    }
}

the variable declarations are hoisted to the top of the function. But the assignments are still done where the appear in the flow of the code. It's as if you'd written.

function foo() {
    var var1, var2, someFunction;
    if (true) {
      //this is not the right way to write code.

      var1 = 1;
      var2 = 2;
      var3 = 3;

      someFunction = function(arg1, arg2) {
        //code
      }
      someFunction('value1', 'value2');
    }
}

However, if you declare variables with the EcmaScript-6 let or const keywords, they have block scope and aren't hoisted.

Answer 2

But my question is that how does Javascript deal with code blocks of condition statements or loops?

Traditionally, these blocks would not get their own scopes, which means that you cannot declare local variables in them (they would instead be hoisted up to become function-level).

That behaviour is very unexpected for people coming from other programming languages, and has led to bugs without end.

To mitigate that, there is now (ECMAScript 6) a let keyword that allows you to declare variables local to individual code blocks. But keep in mind that a var will still work the same way it always has.

Answer 3

If what you said code block is a kind of { } in C or C++ etc, javascript has no such one or has different one.

In javascript, it is called scope chain . Maybe other languages also concept about it.

And Javascript only make scope chain on

1) function () { }

2) with () { }

3) catch () { }

For example, the most famous example is following.

for (var i = 0; i < 5; i++) { 
    // setClickEventToDiv(i)
}

If we click any div, has event by setClickEventToDiv(i) , will have 5 since scope chain .

So, fix it by

for (var i = 0; i < 5; i++) {
    (function (index) { 
        //setClickEventToDiv(index) 
    }(i));
}

since function () {} has own scope