文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS中的提升机制变量提升函数提升实例详解

2024-04-02 19:55

关注

正文

对一些计算机语言来说,程序被执行时,对命令的翻译通常是自上而下逐行执行的,这通常被称为代码解释;

对另外一些语言来说,这种翻译是预先进行的,被称为代码编译,这样在程序执行的时候,运行的就是已经编译好的、可执行的计算机指令。

JavaScript通常被认为是解释型的,因为每次执行js源码时都需要进行处理。但这么说也不是完全准确的,我们需要知道,JavaScript引擎实际上是动态编译程序,然后立即执行编译后的代码。而JavaScript中的变量声明和函数提升的直接原因就是编译阶段编译器所做的事。

在提升过程中,虽然声明似乎在程序中被提升了,但实际发生的事情是,函数和变量声明在编译阶段被添加到内存中。

一.变量提升

 就变量和常量而言,关键字 var 被提升,let 和 const 不允许提升。

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

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

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

然而在 JavaScript 中,初始化不会被提升。

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

上述程序的作用如下:

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

在编译阶段,只有声明被移动到内存中。因此,变量 a 的值是 undefined,因为 a 是在未初始化的情况下打印的。注意:当变量在函数内部使用时,变量仅被提升到函数的顶部。

var a = 4;
function greet() {
    b = 'hello';
    console.log(b); 
    var b;
}
greet(); // hello
console.log(b);//Uncaught ReferenceError: b is not defined

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

a = 5;
console.log(a);// error
let a; 

换一种角度说,变量与let(const)关键字一起使用,变量被提升到暂时性死区(TDZ)中,直到程序执行到该变量的let(const)声明语句的时候才从TDZ中被释放。

二.函数提升

由于函数声明和变量声明都会被提升,函数会先被提升,然后才是变量,并且后面的函数声明会覆盖前面的。

代码示例:

foo();
var foo;
function foo(){
	console.log(1);
}
foo = function(){
	console.log(2);
};

最终结果会输出1。因为函数声明会被提升,而函数表达式不会被提升。这段代码可以理解成:

function foo(){
	console.log(1);
}
foo();
foo = function(){
	console.log(2);
};

三.判断顺序

执行函数中的第一行代码时,如何判断该函数的词法作用域中存在哪些变量呢?该变量代表的是什么呢?判断步骤如下:

四.其他“提升” 

1.作为import结果的声明是“提升的”;

foo();
import { foo } from "foo";

上面这段代码中,foo()是可以运行的,不只是因为import...语句的静态决议在编译过程中确定了foo值是什么,也因为它“提升”了在模块作用域顶层的声明,使它在模块所用位置可用。

以上就是JS中的提升机制变量提升函数提升实例详解的详细内容,更多关于JS 变量提升函数提升的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯