ES6 - Hoisting提升

ES6 - Hoisting提升 首页 / ES6入门教程 / ES6 - Hoisting提升

JavaScript中的Hoisting是一种行为,在该行为中可以在声明之前使用函数或变量。例如,

// 在声明之前 打印test变量
console.log(test);  //undefined
var test;

上面的程序有效,输出将为 undefined 。上面的程序表现为

// 在声明之后,打印test变量
var test;
console.log(test);//undefined

由于变量 test 仅被声明并且没有值,因此将 undefined 值分配给它。

注意:在Hoisting提升中,尽管声明似乎已经在程序中上移,但实际发生的是在编译阶段将函数和变量声明添加到了内存中。

变量提升

在变量和常量方面,关键字var被提升,letconst不允许提升。例如,

// program to display value
a = 5;
console.log(a);
var a;//5

在上面的示例中,在声明变量之前先使用变量 a 。然后程序运行并显示输出 5 。该程序的行为如下:

// program to display value
var a;
a = 5;
console.log(a);//5

但是,在JavaScript中,不进行初始化。例如,

// program to display value
console.log(a);
var a = 5;

输出

undefined

上面的程序表现为:

var a;
console.log(a);
a = 5;

在编译阶段,只有声明被移到内存中。因此,变量 a 的值是 undefined ,因为 a 是在未初始化的情况下打印的。

另外,当在函数内部使用变量时,变量仅被提升到函数的顶部。例如,

// program to display value
var a = 4;

function greet() {
    b = 'hello';
    console.log(b);//hello
    var b;
}

greet();//hello
console.log(b);

输出

hello
Uncaught ReferenceError: b is not defined

在上面的示例中,变量 b 被提升到函数 greet 的顶部,并成为局部变量。因此,只能在函数内部访问 b b 不会成为全局变量。

要了解有关局部和全局变量的更多信息,请访问 JavaScript变量范围

注意:在hoisting提升中,变量声明仅可用于直接作用域。

如果将变量与 let 关键字一起使用,则不会提升该变量。例如,

// program to display value
a = 5;
console.log(a);
let a;//error

输出

Uncaught ReferenceError: Cannot access 'a' before initialization

使用 let 时,必须先声明该变量。

函数提升

可以在声明函数之前先对其进行调用。例如,

// program to print the text
greet();

function greet() {
    console.log('Hi, there.');
}

输出

Hi, there

在上面的程序中,函数 greet 在声明之前被调用,并且程序显示输出。这是由于hoisting提升。

但是,将函数用作表达式时,会发生错误,因为仅提升了声明。例如;

// program to print the text
greet();

let greet = function() {
    console.log('Hi, there.');
}

输出

Uncaught ReferenceError: greet is not defined

如果在上述程序中使用了 var ,则错误将是:

Uncaught TypeError: greet is not a function

hoisting提升可能会在程序中导致不良后果。最好在使用变量和函数之前先声明它们,避免提升。

对于变量,最好使用 let 

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

邱岳的产品实战 -〔邱岳〕

黄勇的OKR实战笔记 -〔黄勇〕

性能工程高手课 -〔庄振运〕

接口测试入门课 -〔陈磊〕

分布式数据库30讲 -〔王磊〕

程序员的测试课 -〔郑晔〕

编程高手必学的内存知识 -〔海纳〕

商业思维案例笔记 -〔曹雄峰〕

手把手带你写一个 MiniTomcat -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)