JavaScript 变量提升
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
以下两个实例将获得相同的结果:
实例 1
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
尝试一下 »
实例 2
var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
尝试一下 »
要理解以上实例就需要理解 "hoisting(变量提升)"。
变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 初始化不会提升
JavaScript 只有声明的变量会提升,初始化的不会。
以下两个实例结果结果不相同:
实例 1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
尝试一下 »
实例 2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
尝试一下 »
实例 2 的 y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。
实例 2 类似以下代码:
var x = 5; // 初始化 x var y; // 声明 y elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y y = 7; // 设置 y 为 7
在头部声明你的变量
对于大多数程序员来说并不知道 JavaScript 变量提升。
如果程序员不能很好的理解变量提升,他们写的程序就容易出现一些问题。
为了避免这些问题,通常我们在每个作用域开始前声明这些变量,这也是正常的 JavaScript 解析步骤,易于我们理解。
JavaScript 严格模式(strict mode)不允许使用未声明的变量。 在下一个章节中我们将会学习到 "严格模式(strict mode)" 。 |
mowen
245***1986@qq.com
其实主要理解 js 的解析机制就行。
遇到 script 标签的话 js 就进行预解析,将变量 var 和 function 声明提升,但不会执行 function,然后就进入上下文执行,上下文执行还是执行预解析同样操作,直到没有 var 和 function,就开始执行上下文。如:
预解析:
需要注意都是函数声明提升直接把整个函数提到执行环境的最顶端。
mowen
245***1986@qq.com
菜菜
274***2183@qq.com
除了以上的函数声明方式外,还可以使用匿名函数的方式。
声明:
调用:
注意:使用匿名函数的方式不存在函数提升,因为函数名称使用变量表示的,只存在变量提升。例:
可能会有人觉得最后输出的结果是 1。但是 getName 是一个变量,因此这个变量的声明也将提升到顶部,而变量的赋值依然保留在原来的位置。需要注意的是,函数优先,虽然函数声明和变量声明都会被提升,但是函数会首先被提升,然后才是变量。
菜菜
274***2183@qq.com
友人A
251***5957@qq.com
友人A
251***5957@qq.com
熙熙
632***357@qq.com
记对 友人A(251***5957@qq.com) 发表笔记的学习理解。
首先 JS 在执行之前会有一个预编译过程,变量提升和函数提升就是发生在这里。
在执行 jsFun6 函数时首先会创建一个 AO 对象(Activetion Object 执行期上下文)。
然后会将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。
我们可以看到 jsFun6 函数里没有形参,但是有以下变量声明:
所以 AO 对象现在是这样:
然后会将实参的值传递给形参(当前没有形参所以略过)。
再找到函数声明作为AO的属性名,属性的值为函数声明的函数体(这里就是函数声明提升)。
我们可以看到 jsFun6 函数里有以下的函数声明:
这里的第 10 行和第 15 行是函数表达式不是函数声明。
所以 AO 对象现在是这样:
这里需要注意因为之前 AO 对象里已经有 test4 属性了所以 AO 对象里原来由变量声明时得到的 test4 属性会被现在函数声明的 test4 覆盖。
到这里预编译就完成了开始执行。
执行时会先去查找 AO 对象,如果没找到就会去 GO(Global Object)对象里查找(AO 对象相当于局部变量,GO 对象相当于全局变量)。
当执行第 3 行时在 AO 里找到 test1 执行,弹出提示框显示提示信息“测试1”。
第 4 行已经提升了所以可以略过,下面其他的类似行与此相同。
执行第 8 行时, 在 AO 里找到 test2,并作为函数运行,由于 AO 里的 test2 的值是 undefined 所以执行会报错。
第 9 行输出 test2 所以输出的是 undefined。
第 10 行将函数体赋值给 test2,当前 AO 变成:
所以第 13 行执行时在 AO 里能找到 test2 并作为函数运行,弹出提示框显示提示信息“测试2”。
第 15 行由于用于赋值的函数体后面加了 () 变成立即执行函数所以函数会立即运行(这里会弹出提示框显示提示信息“测试3”)然后将返回值赋值给 test3,由于函数没有返回值所以是 undefined,也就导致了 AO 里的 test3 的属性值还是 undefined(大家可以在第18行输出一下 test3,会发现还是输出 undefined)。
第 19 行将 12 赋值给 test4,将原来 test4 的属性值覆盖了,AO 对象变为:
所以在第 25 行会输出 12(如果在这里再把 test4 作为函数去运行就会报错)。
第 27 行将 test5_1 赋值给 test5。
第 28 行是立即执行函数,会立即执行。
在执行之前会进行预编译所以这个函数又会创建一个 属于他自己的 AO 对象,为了区分我们将他标识为 AO2。
然后将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。
然后进行实参形参统一,以及函数声明提升(由于没有所以略过)。执行第 30 行时在 AO2 里找到了 test5,属性值为 undefined。
所以会弹出提示框显示提示信息 “undefined”。
执行第 31 行是将 test5_2 赋值给 test5。
所以 AO2 变成了:
熙熙
632***357@qq.com
因为房价高,所以更需要努力
128***2546@qq.com
预解析过程也就是创建 AO(Activation Object) 的过程。
创建AO过程:
因为房价高,所以更需要努力
128***2546@qq.com
小飞自学编程
838***551@qq.com
什么叫变量提升?
原则上变量应该先声明后使用,但是程序员小白常常忘记声明就使用了变量,这样做js代码在执行的时候不报错,只是返回了一个undefined。这种情况就是变量提升。
计算机执行的时候会把未声明就使用的变量隐式的放到代码的最顶端。需要注意的是变量虽然发生了提升,但是给变量赋的值是不会随之提升的,所以就会得到结果undefined。
什么是函数提升?
与变量提升的意思差不多,先使用函数,后再声明函数,这种违背逻辑的事情在JavaScript中是允许的,这门语言就是这么灵活。
与变量提升不同的是,函数的返回值也会随之提升,所以你会发现在<script>标签中的任何地方都能调用函数并且使用函数的返回值。
小飞自学编程
838***551@qq.com