先来看两个栗子, 下面的两段代码分别输出什么?
- // 代码段 1
- function foo() {
- var a = 1;
- function a() {}
- console.log(a);
- }
- foo();
- // 代码段 2
- function foo() {
- var a;
- function a() {}
- console.log(a);
- }
- foo();
答案是: 代码段 1 打印的是 1, 代码段 2 打印的是 a() 函数.
为什么会这样呢? 这就涉及到 JS 中的变量提升和函数提升的具体过程了.
1, 变量的提升
JS 是怎么创建变量的呢?
如下面的代码:
- var a = 1;
- var b = 2;
JS 在解析上面的代码的时候, 其实会按照下面的方式进行解析的:
- var a;
- var b;
- a = 1;
- b = 2;
所以 JS 并不是在我们定义一个变量的时候, 声明完成之后立即赋值, 而是把所有用到的变量全部声明之后, 再到变量的定义的地方进行赋值, 变量的声明的过程就是变量的提升.
所以我们看下下面的栗子:
- function foo() {
- var a = 1;
- console.log(a);
- console.log(b);
- var b = 2;
- }
- foo();
上面的代码在 JS 的眼中是这样解析的:
- function foo() {
- var a;
- var b;
- a = 1;
- console.log(a); // 1
- console.log(b); // undefined
- b = 2;
- }
- foo();
所以输出的 a 的值为 1, b 的值为 undefined.
变量在声明提升的时候, 是全部提升到作用域的最前面, 一个接着一个的. 但是在变量赋值的时候就不是一个接着一个赋值了, 而是赋值的位置在变量原本定义的位置. 原本 JS 定义变量的地方, 在 JS 运行到这里的时候, 才会进行赋值操作, 而没有运行到的变量, 不会进行赋值操作.
所以变量的提升, 提升的其实是变量的声明, 而不是变量的赋值.
2, 函数的提升
函数的提升和变量的提升类似, 都是提升到作用域的最开始的位置, 只不过变量的提升是分两步的, 第一步是变量声明的提升, 第二步是变量的赋值. 而函数的提升是直接将整个函数整体提升到作用域的最开始位置, 相当于剪切过去的样子.
3, 变量提升和函数提升的顺序
在作用域中, 不管是变量还是函数, 都会提升到作用域最开始的位置, 不同的是, 函数的提升后的位置是在变量提升后的位置之后的.
举个栗子:
下面的代码输出什么?
- function foo() {
- console.log(a);
- var a = 1;
- console.log(a);
- function a() {}
- console.log(a);
- }
- foo();
上面的代码在 JS 眼中是这样解析的:
- function foo() {
- var a;
- function a() {}
- console.log(a); // a()
- a = 1;
- console.log(a); // 1
- console.log(a); // 1
- }
- foo();
所以从上面的栗子可以看到, 变量的提升是在函数提升之前的, 但是变量赋值的部分是在 JS 原型到变量定义的位置才给变量赋值的, 而函数提升是相当于直接剪切到最前面的.
我们再看一个更加复杂一点的栗子:
- function foo() {
- console.log(a);
- var a = 1;
- console.log(a);
- function a() {}
- console.log(a);
- console.log(b);
- var b = 2;
- console.log(b);
- function b() {}
- console.log(b);
- }
- foo();
JS 是这样解析的:
- function foo() {
- var a;
- var b;
- function a() {}
- function b() {}
- console.log(a); // a()
- a = 1;
- console.log(a); // 1
- console.log(a); // 1
- console.log(b); // b()
- b = 2;
- console.log(b); // 2
- console.log(b);// 2
- }
- foo();
最后, 注意: 只有声明的变量和函数才会进行提升, 隐式全局变量不会提升.
下面的栗子中, b 不会进行变量提升.
- function foo() {
- console.log(a);
- console.log(b); // 报错
- b = 'aaa';
- var a = 'bbb';
- console.log(a);
- console.log(b);
- }
- foo();
来源: https://www.cnblogs.com/lvonve/p/9871226.html