JavaScript hoisting(变量提升)学习总结

定义：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

例如一下两个例子：

例1：

x = 5; // 变量 x 设置为 5elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 xvar x; // 声明 x

例2：

var x; // 声明 x
x = 5; // 变量 x 设置为 5elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

他们的结果都是一样的，都是demo的内容都是5。

但是，JavaScript在初始化时却是不会提升的，也就是说只有在只声明，不初始化的前提下才能得到提升。如下两例子：

例1：

<p id="demo"></p>
<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
</script>

输出：

5  7

例2：

var x = 5; // 初始化 xelem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 yvar y = 7; // 初始化 y

输出：

5  undefined

其实主要理解 js 的解析机制就行。

遇到 script 标签的话 js 就进行预解析，将变量 var 和 function 声明提升，但不会执行 function，然后就进入上下文执行，上下文执行还是执行预解析同样操作，直到没有 var 和function，就开始执行上下文。如:

a=5;
show();
var a;
function show(){};

预解析：

var a;
function show(){};
a=5;
show();

提醒：在头部声明你的变量

对于大多数程序员来说并不知道 JavaScript 变量提升。

如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。

为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。

JavaScript hoisting(变量提升)学习总结相关推荐

浅聊JavaScript中的Hoisting(变量提升)
一直有写博客的想法但因为懒惰等各种情况没有付出实际行动,择日不如撞日,那就今天让我给大家简单归纳总结一下JavaScript中的Hoisting(变量提升)吧! 1.对于变量 //variablesc ...
JavaScript 中的 Hoisting (变量提升和函数声明提升)
如何将函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) ...
JavaScript之变量提升
1.什么是变量提升(Hoisting)? Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识,在ES6之前是找不到变量提升这个词的 "变量提升"意味着变量 ...
JavaScript中变量提升是什么？如何实现？
在进行web前端开发的时候,我们经常会遇到变量提升的情况,那么JS在解析变量的时候是如何做到提升的呢?今天小千就来带大家了解一下. 首先在JS中涉及两种作用域的问题,那么什么是作用域呢? 作用域是代码 ...
JavaScript：变量提升作用域
作用域是JavaScript中听上去感觉很简单,其实比较麻烦的一个特性,什么是作用域?我看书籍有一个相对的官方解释:作用域(scope,或译有效范围)就是变量和函数的可访问范围,即作用域控制着变量和函 ...
JavaScript的变量提升
变量提升的表现是,无论在函数中何处位置声明的变量,好像都被提升到了函数的首部,可以在变量声明前访问到而不会报错.简单来说就是通过解析和预编译为代码的函数变量创建上下文环境,使得变量在生命前就可以访问. ...
php变量声明提升,JavaScript 变量提升
JavaScript 变量提升 JavaScript 中,函数及变量的声明都将被提升到函数的最顶部. JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明. 以下两个实例将获得相 ...
JavaScript 作用域、变量提升
JavaScript 作用域 JavaScript 作用域 JavaScript 局部作用域 JavaScript 全局变量 JavaScript 变量生命周期函数参数 HTML 中的全局变量 ES ...
javaScript变量提升以及函数提升
变量的声明赋值 var a = 1; 上面的代码先声明变量 a,然后在变量 a 与数值 1 之间建立引用关系,称为将数值 1 "赋值"给变量 a.以后,引用变量名 a 就会得到数值 ...

JavaScript hoisting(变量提升)学习总结

JavaScript hoisting(变量提升)学习总结相关推荐

最新文章

热门文章