JavaScript的变量提升与函数提升

JavaScript 中存在变量提升和函数提升,它们是由 JavaScript 解释器在代码执行之前进行的一种行为。

最新的 ECMAScript 标准定义了 8 种数据类型:

  • 七种基本数据类型:
    • 布尔值(Boolean),有 2 个值分别是:true 和 false
    • null,一个表明 null 值的特殊关键字。JavaScript 是大小写敏感的,因此 null 与 NullNULL或变体完全不同。
    • undefined,和 null 一样是一个特殊的关键字,undefined 表示变量未赋值时的属性。
    • 数字(Number),整数或浮点数,例如: 42 或者 3.14159
    • 任意精度的整数(BigInt),可以安全地存储和操作大整数,甚至可以超过数字的安全整数限制。
    • 字符串(String),字符串是一串表示文本值的字符序列,例如:"Howdy"
    • 代表(Symbol,在 ECMAScript 6 中新添加的类型)。一种实例是唯一且不可改变的数据类型。
  • 以及对象(Object)。

变量提升:

在 JavaScript 中,使用 var 声明的变量会被提升到其所在作用域的顶部。这意味着可以在变量声明之前引用变量,而不会导致 ReferenceError。

console.log(x); // 输出: undefined
var x = 5;
console.log(x); // 输出: 5

实际上,上述代码在执行时会被解释器处理成如下形式:

var x;
console.log(x); // 输出: undefined
x = 5;
console.log(x); // 输出: 5

值得注意的是,变量提升只提升声明,而不提升赋值。变量的初始化赋值仍然保留在原始位置。

函数提升:

在 JavaScript 中,使用 function 声明的函数会被整体提升到其所在作用域的顶部。这意味着可以在函数声明之前调用函数,而不会导致 ReferenceError。

sayHello(); // 输出: "Hello!"
function sayHello() {
  console.log("Hello!");
}

实际上,上述代码在执行时会被解释器处理成如下形式:

function sayHello() {
  console.log("Hello!");
}
sayHello(); // 输出: "Hello!"

与变量提升类似,函数提升也只提升声明,不提升具体的函数实现。因此,在函数声明之前调用函数是有效的。

进阶:

  • 使用 letconst 声明的变量也存在提升,但它们不会被初始化为 undefined,而是保持在 "暂时性死区"(Temporal Dead Zone,TDZ)中。
console.log(x); // Uncaught ReferenceError: Cannot access 'x' before initialization
let x = 3;
  • 函数表达式(使用 varlet、或 const 声明的函数)的提升行为与函数声明略有不同,它们会被提升,但初始化的赋值不会提升。
    baz(); // Uncaught TypeError: baz is not a function
    var baz = function () {
        console.log("bar2");
    };
  • 在严格模式下,未声明的变量使用会导致 ReferenceError,因此变量提升的影响会更显著。函数声明在严格模式下同样存在提升,但也要注意 TDZ。

你可能感兴趣的:(javascript,前端,开发语言)