javaScript 变量作用域

总是被这个问题困扰，所以组总结一下

变量声明提升(Variable hoisting)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * Example 1
 */
console.log(x === undefined); // logs "true"
var x = 3;


/**
 * Example 2
 */
// will return a value of undefined
var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

mozilla参考教程 变量声明提升之后使用这个被提升的引用仍然得到undefined的值 所以你如果需要声明变量的时候，var语句尽可能在函数顶部

在 ECMAScript 2015 中，let（const）将不会提升变量到代码块的顶部。因此，在变量声明之前引用这个变量，将抛出错误ReferenceError。这个变量将从代码块一开始的时候就处在一个“暂时性死区”，直到这个变量被声明为止。

1
2
console.log(x); // ReferenceError
let x = 3;

#函数提升(Function Hoisting)

对于函数，只有函数声明会被提升到顶部，而不包括函数表达式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 函数声明 */

foo(); // "bar"

function foo() {
  console.log("bar");
}


/* 函数表达式   表达式定义的函数，称为匿名函数。匿名函数没有函数提升。*/

baz(); // TypeError: baz is not a function
//此时的"baz"相当于一个声明的变量，类型为undefined。
由于baz只是相当于一个变量，因此浏览器认为"baz()"不是一个函数。
var baz = function() {
  console.log("bar2");
};