JS Global/Function Scope Понимание

Question

В настоящее время я зарегистрирован в классе Javascript, и мне нужна помощь в понимании того, насколько точно работает область. Мы обсуждали такие темы, как глобальная область действия, область действия, подъем в классе, но я изо всех сил пытаюсь собрать все это вместе. Таким образом, вопрос, который я специально смотрел на состоял из выяснить, что следующий код, выводимый:

x = 1; 
var a = 5; 
var b = 10; 
var c = function (a, b, c) { 
    document.write(x); 
    document.write(a); 
    var f = function (a, b, c) { 
     b = a; 
     document.write(b); 
     b = c; 
     var x = 5; 
    } 
    f(a, b, c); 
    document.write(b); 
    var x = 10; 
} 
c(8, 9, 10); 
document.write(b); 
document.write(x); 

Теперь решение, что у нас есть то, что код будет распечатать неопределенную 8 8 9 10 1

мне нужно некоторые помогают понять, как именно это происходит. В частности, я не понимаю, как значения b меняются в зависимости от заявления, которое мы рассматриваем. Был бы признателен, если бы кто-то мог просто пройти через все шаг за шагом для меня. Спасибо!

Answer 1

Я немного прокомментировал код, поэтому, надеюсь, это имеет смысл. Наиболее важными понятиями для понимания являются переменная подъемная и функциональная область. В JavaScript есть только область функций.

x = 1; 
var a = 5; 
var b = 10; 
var c = function (a, b, c) { 

    /* this `x` refers to the new `x` variable initialized below 
    * near the closing function `c` brace. 
    * It is undefined because of hoisting, and gets assigned 
    * a value where it was initialized below. 
    */ 
    console.log(x); // undefined 

    /* this `a` refers to this `a` parameter, 
    * because it is within this function `c` scope. 
    */ 
    console.log(a); 

    var f = function (a, b, c) { 

     /* this `b` refers to this `b` parameter, 
     * because it is within this function `f` scope. 
     * 
     * this `a` refers to this `a` parameter, 
     * because it is within this function `f` scope. 
     */ 
     b = a; 
     console.log(b); 

     /* this `b` still refers to `b` in this function `f` scope. 
      * 
      * this `c` refers to this `c` parameter, 
      * because it is within this function scope. 
      */ 
     b = c; 

     /* this is a new `x` variable because it is 
     * with this function `f` scope and there is no parameter `x`. 
     */ 
     var x = 5; 
    }; 

    /* these `a`, `b`, and `c` variables refer to 
    * this function `c` parameters. 
    */ 
    f(a, b, c); // f(5, 10, 10) 
    console.log(b); // 9 

    /* this is a new `x` variable because it is 
    * with this function `c` scope and there is no parameter `x`. 
    */ 
    var x = 10; 
}; 

c(8, 9, 10); 

/* `a`, `b`, `c`, and `x` have not been touched, 
* because the other `a`,`b`,`c` variables were parameter names, 
* and other `x` variables were initialized within a different scope. 
*/ 
console.log(b); // 10 
console.log(x); // 1 

JSBin Demo