javascript 变量作用域(scope)与变量提前(hoisting)

下面两段代码输出什么：

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

bar();  // 10

你可以再这里查看结果：http://jsfiddle.net/pMfNk/

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

b();
alert(a); // 1

可以再这里查看结果： http://jsfiddle.net/g8NZ4/

这里牵涉到javascript变量作用域和变量声明提前。

javascript是函数作用域。不是块作用域。也就是说通过函数定义新的作用域。这一特性通常用来定义命名空间、闭包等。

一个变量名有四种方法进入作用域：

1. 语言定义：所有作用域默认都定义了this和arguments
2. 参数名称：函数声明时定义的参数列表
3. 函数声明：通过这种格式声明的函数：function foo() {}
4. 变量声明：通过这种形式声明的变量： var foo;

规则1： 所有函数声明和变量声明都将被提前到它们作用域的顶端。在这里保存着函数参数和语言定义的变量。也就是说不管声明变量的语句被执行到，它们都会被声明。

function foo() {
  bar();
  var x = 1;
}

// 实际上会被这样解析

function foo() {
  var x;
  bar();
  x = 1;
}

// 下面两个函数时一样的效果
function foo() {
  if (false) {
    var x = 1;
  }
  return;
  var y = 1;
}

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

规则2：变量声明部分被提前，但是赋值部分不会提前。当函数声明时需要注意，函数声明有两种方法：变量赋值法和直接声明法。变量赋值与普通变量声明相同。直接声明法将函数体也会提前

function test() {
//  foo(); // typeerror "foo is not a function"
  bar(); // this will run
  
  var foo = function () {
    alert("this won't run");
  }
  function bar() {
    alert("this will run");
  }
}

test();

到这里查看结果： http://jsfiddle.net/8gUHM/

规则3：名字解析顺序，名字解析顺序将按照前面所列顺序进行，当一个名字已经定义了，它不会被后续同名属性定义。也就意味着函数声明优先级高于变量名声明。声明不会覆盖，但是当函数运行到具体赋值处时仍然会覆盖。当多个参数使用同一个名字时。后出现的将获得更高优先级（赋值顺序导致内容覆盖？）

规则4：命名函数表达式，当将命名的普通函数定义表达式赋值给一个变量时。函数名将不会被声明，函数体也不会被提前，（这里实际上成为了变量声明，函数名也不见了）

function test() {
//  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, spam is never declared)
  
  foo(); // valid
  bar(); // valid
  baz(); // valid
//  spam(); // referenceerror
}

test();

这里是测试结果： http://jsfiddle.net/3VYTG/

知道这些之后应该怎么做？

1. 总是使用var声明变量
2. 将变量声明放到函数顶端
3. 只用一个var，用JSLint onevar选项检查代码

出处：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html