直入主题,JavaScript 中的变量和函数提升,有时还是容易错的,记录一下。
// ReferenceError: noSuchVariable is not defined
console.log(noSuchVariable);
// Outputs: undefined
console.log(declaredLater);
var declaredLater = "Now it's defined!";
// Outputs: "Now it's defined!"
console.log(declaredLater);
JavaScript 解释器“前瞻性”查找所有变量定义,把它们“提升”到函数顶部。等价于:
var declaredLater;
// Outputs: undefined
console.log(declaredLater);
declaredLater = "Now it's defined!";
// Outputs: "Now it's defined!"
console.log(declaredLater);
var nickname = "Baggins";
(function () {
// Outputs: "Original nickname was undefined"
console.log("Original nickname was " + nickname);
var nickname = "Underhill";
// Outputs: "New nickname is Underhill"
console.log("New nickname is " + nickname);
})();
内部作用域定义了 nickname , nickname 变量提升,为 undefined。
等价于
var nickname = "Baggins";
(function () {
var nickname;
// Outputs: "Original nickname was undefined"
console.log("Original nickname was " + nickname);
nickname = "Underhill";
// Outputs: "New nickname is Underhill"
console.log("New nickname is " + nickname);
})();
由于此原因一些 JavaScript 风格指南,建议把所有变量定义放到函数的头部。
函数定义不仅提升了函数名,也提升了真正的函数定义。
// Outputs: "Yes!"
isItHoisted();
function isItHoisted() {
console.log("Yes!");
}
函数定义提升仅仅作用于函数定义,而不是函数表达式(只有申明会提升,赋值却不会提升)。例如:
// 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)。
你可能想知道使用命名函数表达式会怎样:
// ReferenceError: funcnickname is not defined
funcnickname();
// TypeError: undefined is not a function
varnickname();
var varnickname = function funcnickname() {
console.log("Definition not hoisted!");
};
如你所见,如果函数的名字是函数表达式的一部分,它不会得到提升。
参考资料:
Variable and Function Hoisting in JavaScript
转载自 http://jinlong.github.io/2013/09/11/var-and-fun-hoisting/