直入主题,JavaScript 中的变量和函数提升,有时还是容易错的,记录一下。
1 2 | // ReferenceError: noSuchVariable is not defined console.log(noSuchVariable); |
1 2 3 4 5 6 7 | // Outputs: undefined console.log(declaredLater); var declaredLater = "Now it's defined!"; // Outputs: "Now it's defined!" console.log(declaredLater); |
JavaScript 解释器“前瞻性”查找所有变量定义,把它们“提升”到函数顶部。等价于:
1 2 3 4 5 6 7 8 9 | var declaredLater; // Outputs: undefined console.log(declaredLater); declaredLater = "Now it's defined!"; // Outputs: "Now it's defined!" console.log(declaredLater); |
1 2 3 4 5 6 7 8 9 10 11 | var name = "Baggins"; (function () { // Outputs: "Original name was undefined" console.log("Original name was " + name); var name = "Underhill"; // Outputs: "New name is Underhill" console.log("New name is " + name); })(); |
内部作用域定义了 name , name 变量提升,为 undefined。
由于此原因一些 JavaScript 风格指南,建议把所有变量定义放到函数的头部。
函数定义不仅提升了函数名,也提升了真正的函数定义。
1 2 3 4 5 6 | // Outputs: "Yes!" isItHoisted(); function isItHoisted() { console.log("Yes!"); } |
函数定义提升仅仅作用于函数定义,而不是函数表达式。例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Outputs: "Definition hoisted!" definitionHoisted(); // TypeError: undefined is not a function definitionNotHoisted(); function definitionHoisted() { console.log("Definition hoisted!"); } var definitionNotHoisted = function () { console.log("Definition not hoisted!"); }; |
我们看到了两种不同类型的提升,变量 definitionNotHoisted 定义提升(因此结果是 undefined ),但是函数定义未提升(因此 TypeError)。
你可能想知道使用命名函数表达式会怎样:
1 2 3 4 5 6 7 8 9 | // ReferenceError: funcName is not defined funcName(); // TypeError: undefined is not a function varName(); var varName = function funcName() { console.log("Definition not hoisted!"); }; |
如你所见,如果函数的名字是函数表达式的一部分,它不会得到提升。
参考资料:
Variable and Function Hoisting in JavaScript