js作用域和变量提升

Posted 2020-06-14

Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the javascript interpreter.

example1 :

    var foo = 1;
    function bar() {
      if (!foo) {
        var foo = 10;
      }
      console.log(foo); // 10
    }
    bar();

example2 : 

    var a = 1;
    function b() {
      a = 10;
      return;
      function a() { }
    }
    b();
    console.log(a); // 1

example3 :

    var x = 1;
    console.log(x); // 1
    if (true) {
      var x = 2;
      console.log(x); // 2
    }
    console.log(x); // 2

example4:

  function foo() {
      var x = 1;
      if (x) {
        (function () {
          var x = 2;
          // some other code
        } ());
      }
      // x is still 1.
    }

Named Function Expressions

You can give names to functions defined in function expressions, with syntax like a function declaration. This does not make it a function declaration, and the name is not brought into scope, nor is the body hoisted. Here’s some code to illustrate what I mean:

example 5:

    foo(); // TypeError "foo is not a function"
    bar(); // valid
    baz(); // TypeError "baz is not a function"
    spam(); // ReferenceError "spam is not defined"

    var foo = function () { }; // anonymous function expression (‘foo‘ gets hoisted)
    function bar() { }; // function declaration (‘bar‘ and the function body get hoisted)
    var baz = function spam() { }; // named function expression (only ‘baz‘ gets hoisted)

    foo(); // valid
    bar(); // valid
    baz(); // valid
    spam(); // ReferenceError "spam is not defined"

example 6:

   getName(); //5
    var getName = function () { console.log(4); };
    function getName() { console.log(5); };
    getName();//4

example 7:

    function Foo() {
      getName = function () { console.log(1); };
      return this;
    }
    Foo.getName = function () { console.log(2); };
    Foo.prototype.getName = function () { console.log(3); };
    var getName = function () { console.log(4); };
    function getName() { console.log(5); };

    Foo.getName(); //2 
    getName(); //4
    Foo().getName(); //1
    getName(); //1
    new Foo.getName(); //2
    new Foo().getName(); //3 
    new new Foo().getName(); //3