Day3--js--可恶之变量声明提升大法.。。

1.首先大家看一下下面的代码，判断下会输出什么结果：

var foo = 1;
function bar() {
    if(!foo) {
        var foo = 10;
    }
    alert(foo);
}
bar();//10

2.

你是否会疑惑条件语句if(!foo)并不会被执行呀，为什么foo会被赋值为10.

再来看看第二个例子：

 

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);

3.Javascript作用域

让我们先来看一下Java中的一个例子：

public int result() {
    int x = 1;
    System.out.println(x);  //1
    if(true) {
        int x = 2;
        System.out.println(x);  //2
    }
    System.out.println(x);  //1
}

因为在Java中，我们有块级作用域(block-level scope)。在一个代码块中的变量不会覆盖掉代码块外面的变量。

我们不妨试一下在Javascript中的表现：

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

因为Javascript是一种函数级作用域(function-level scope)，

那么在Javascript中，我们怎么实现一种块级作用域的效果呢？答案是闭包：

function foo()　｛
    var x = 1;
    if(x) {
        (function () {
            var x = 2;
        }());
    }
    x is still 1.
｝

4.Javascript变量提升

我们注意到，变量x的定义被移动到函数的最顶部，在bar()后，再对其进行赋值。 
再来看一个栗子，下面这两段代码其实是等价的：

 

function foo() {
    if(false) {
        var x = 1;
    }
    return;
    var y = 1;
}

 

function foo() {
    var x,y;
    if(false) {
        x = 1;
    }
    return;
    y = 1;
}

我们都知道，创建一个函数的方法有两种，一种是通过函数声明function foo() {}, 
另一种是通过定义一个变量 var foo = function() {} 

来看下面的栗子：

function test() {
    foo();  //Type error, foo is not a function
    bar();  //will alert 'bar'
    var foo = function() {
        alert('foo');
    }
    function bar() {
        alert('bar');
    }
}
test();

 

 

 

1.我们需要重点注意的是，只有函数声明形式才能被提升。 
变量赋值并没有被提升，只是声明被提升了。但是，函数的声明有点不一样，函数体也会一同被提升

function test3() {
    fn();
   function fn() {
     log("我来自fn");    }
   }
   test3();
   function test4() {
     fn(); // fn is not a function
    var fn = function fn() {
      alert("我来自 fn  test4");
    }
  }
  test4();

 

2

 

  var n =10; 
    function test (){
        console.log(n);
        var n = 20;
        console.log(n)

    }
    test()//undefined 20

3.

1 function text6() {
 2   function a() {}
 3   var a;
 4   log(a);                //打印出a的函数体
 5 
 6   var b;
 7   function b() {}
 8   log(b);                 //打印出b的函数体 
 9 
10   // ！注意看，一旦变量被赋值后，将会输出变量
11   var c = 12
12   function c() {}
13   log(c);                 //12
14   
15   function d() {}
16   var d = 12
17   log(d);                //12
18 }
19 text6();

4.

tt ="ee";
    function b(){
        function test(){
            alert(tt);
            var tt ="ff"
        }
        test()

    }
    b()//undefined

 

    tt ="ee";
    function b(){
        function test(){
            var tt;
            alert(tt);
            tt="ff"
        }
        test()

    }
    b()//undefined

5.

console.log(b)

function b(){
    console.log(2);
}
console.log(b)//最后输出两次b函数结构

6.

var age = 10;
function test(){
    console.log(age)
}
test()//10

7.

function test(){
    var age = 10;
    function inner(){
        var age = 20;
        console.log(age);//20
    }
    inner();
    console.log(age);//10
}
test()

8.未完待续....