JavaScript中的变量提高

时间 2020-05-19

原文原文链接

在 ES6 以前，JavaScript 没有块级做用域(一对花括号{}即为一个块级做用域) ，大体分为全局做用域和函数做用域。变量提高即将变量声明提高到它所在做用域的最开始的部分。在 JavaScript 代码运行以前实际上是有一个编译阶段的。编译以后才是从上到下，一行一行解释执行。变量提高就发生在编译阶段，它把变量和函数的声明提高至做用域的顶端。（编译阶段的工做之一就是将变量与其做用域进行关联）。我先分开介绍变量提高和函数提高到后面再放到一块儿比较。若是想更深刻的了解产生变量提高的缘由javascript

注意java

同一个变量只会声明一次，其它的会被覆盖掉。
变量提高/函数提高是提高到当前做用域的顶部，若是遇到特殊的 if(){}/try-cache 做用域，同时也会把也会提高到特殊做用域的外部。
函数提高的优先级是高于变量提高的优先级，而且函数声明和函数定义的部分一块儿被提高。
变量提高
咱们直接从代码从最基础的开始chrome

console.log(a); // undefined
var a = 2;
复制代码
相信这个你们知道，上面代码其实就是浏览器

var a;
console.log(a); // undefined
a = 2;
复制代码
他会提早声明 a,可是不会给 a 赋值。可是以下代码会怎么执行呢？ide

console.log(a); // Uncaught ReferenceError: a is not defined
a = 2;
复制代码
若是没有经过 var 声明值类型的就不会存在变量提高，而是会报错。函数

函数提高
声明函数有两种方式: 一种是函数表达式，另外一种是函数声明。debug

函数表达式
console.log(aa) // undefined
var aa = function () {};3d

/** 代码分解 ***/
var aa;
console.log(aa);
aa = function () {};
复制代码
函数表达式和变量的提高效果基本上是一致的，它会输出 undefined 。调试

函数声明
它和函数表达式是有点不同的，在没有 {}做用域时它们表现是一致的。表现一致的例子对象

console.log(a); // function a () {}
function a() { };

/** 代码分解 ***/
function a() { };
console.log(a);
复制代码
那若是变量提高和函数提高同时存在，谁先谁后呢? 咱们根据上面的注意事项 1 和 3 能够得出结果，根据实例来分析一下。请看下面的例子：

console.log(aa); // function aa () {}
var aa = 'aaaa';
function aa () {};
console.log(aa); // aaaa

/** 代码分解 ***/
var aa; // 只会声明一次的变量
function aa () {}; // 变量别覆盖为 aa 字面量函数
console.log(aa); // function aa () {} 输出字面量函数
aa = 'aaaa'; // aa 从新被覆盖为 'aaaa'
console.log(aa); // aaaa 输出最后的覆盖值
复制代码
其实咱们能够经过 chrome 浏览器调试效果大体以下图所示：

到这里就大体知道变量提高、函数提高它们的大体过程和它们之间的优先级。下面咱们来讲一下它们和块级做用域和函数做用域
的关系。

做用域
在 ES6 出现以后做用域变得很复杂，有太多种了，这里只说和本篇文章相关的几种做用域。咱们只看全局做用域、词法做用域、块级做用域、函数做用域这四种做用域。全局做用域基本上没什么好说的，上面的样例基本上都是全局做用域，这里就不作多的赘述。

词法做用域/函数做用域
词法做用域：函数在定义它们的做用域里运行，而不是在执行它们的做用域里运行。咱们直接经过一个例子来分析一下：

在有做用域时，咱们来看一下函数声明的表现，仍是经过一个实例来分析一下，代码以下：

console.log(aa); // 若是直接输入会报错 VM1778:1 Uncaught ReferenceError: a is not defined
复制代码
下面修改代码来分析在函数做用域中函数声明的特殊表现。

console.log(aa); // undefined
var aa = 'aaaa';
console.log(aa); // aaaa
function test () {
console.log(aa); // undefined
var aa = 'bbbb';
console.log(aa); // bbbb
}
test();

/** 代码分解 ***/
var aa;
console.log(aa); // undefined
aa = 'aaaa';
console.log(aa); // aaaa
function test () {
var aa;
console.log(aa); // undefined
aa = 'bbbb';
console.log(aa); // bbbb
}
test();
复制代码
全局声明了一个名字叫作 aa 的变量，它被提高全局域的顶部声明，而在 test 函数中咱们又声明了一个变量 aa ,这个变量在当前函数做用的顶部声明。在函数的执行的阶段，变量的读取都是就近原则，先从当先的活动对象或做用域查找，若是没有才会从全局对象或全局做用域查找。

稍微加大一点难度，修改代码以下：

console.log(aa); // undefined
var aa = 'aaaa';
console.log(aa); // aaaa
function test () {
console.log(aa); // aaaa
aa = 'bbbb';
console.log(aa); // bbbb
}
test();

/** 代码分解 ***/
var aa;
console.log(aa); // undefined
aa = 'aaaa';
console.log(aa); // aaaa
function test () {
console.log(aa); // aaaa
aa = 'bbbb';
console.log(aa); // bbbb
}
test();
复制代码
咱们把 test函数内部的 var aa = 'bbbb' 修改成 aa = bbbb ，这样就不存在变量提高只是一个简单变量覆盖赋值。

块级做用域
在 ES6 中新增了块级做用域，咱们能够经过 let/const 来建立块级做用域，只能在当前块中访问经过 let/const 声明的变量。咱们简单的了解一下 let 和块级做用域，请看下方的代码：

if (true) {
// console.log(aa); // VM439541:1 Uncaught SyntaxError: Identifier 'aa' has already been declared
let aa = 'aaa';
}
console.log(aa); // VM439096:4 Uncaught ReferenceError: aa is not defined
复制代码
在 if条件语句内部经过 let aa = 'aaa' 中的 let 关键字建立了一个块级做用域，因此咱们在外面不能访问 aa 变量。

console.log(aa); // VM440010:1 Uncaught ReferenceError: aa is not defined
let aa = 'aaa';
复制代码
let 声明的变量同时存在 DTZ(暂时性死区) ，在 let 声明变量以前使用这个变量，会触发 DTZ(暂时性死区) 报错。

let aa = 'aaa';
let aa = 'aaa';
// Uncaught SyntaxError: Identifier 'aa' has already been declared
复制代码
let 不能屡次声明同一个变量，否则会报错。

if判断/try-cache
if(){}/try-cache(){} 它们算一个做用域吗？咱们经过下面的例子一步一步的分析它们，咱们以 if 为分析样例请看代码：

console.log(aa) // undefined
if (true) {
var aa = 10;
}
console.log(aa); // 10

/代码分析/
var a;
console.log(aa); // undefined
if (true) {
aa = 10;
}
console.log(aa); // 10
复制代码
在变量提高时 if 是不存在做用域的，它的做用域就是全局做用域。那若是是函数提高呢？ if会存在做用域吗？经过下面这个实例咱们大概会了解函数提高和 if 的关系：

console.log(aa); // undefined
if (true) {
console.log(aa); // function aa () {}
function aa () {};
console.log(aa); //function aa () {}
}

/代码分析/
var aa;
console.log(aa); // undefined
if (true) {
function aa () {};
console.log(aa); // function aa () {}
console.log(aa); //function aa () {}
}
复制代码
咱们经过这个能够看到当前执行的结果和上面所描述的函数提高表现并不一致，它只是提高了 aa 的声明，赋值只是发生在 if 内部的，这也是函数提高在 if 中特异的表现。再来一个更特异的 if 和函数提高。

/代码分析执行顺序/
var aa;
aa = 'aaaa';
if (true) {
function aa () {}
console.log(aa); // function aa () {}
// function aa () {} 再执行一遍
aa = 1;
console.log(aa); // 1
}
console.log(aa); // function aa () {} ?这个肯定对？
复制代码
若是是按上面分析的代码执行顺序是相同的，可是为何结果不太相同，这种资料不太好找，咱们直接上代码去 chrome 中调试一下代码就一清二楚了，大体调试过程以下：

function aa () {}; aa = 1; 执行过程

执行序号1时：进入 if 内部执行，在 scope 中会多出来一个 block ，也就是在做用域链中会多出来一个 block ，这个做用域中有 aa = function aa () {} 。以下图所示：

这个时候 block 是 function aa() {} 而全局的 window.aa 如今仍是 aaaa
执行序号2时：执行 console.log(aa) ,这个只是一个输出语法并不会改变变量的值,执行效果没有变。

执行序号3时: 执行 function aa() {} , 咱们能够看到 block 和全局做用域的 aa 变量都改变为 function aa () {} ，以下图所示：

执行序号4时: 它会执行的代码 aa = 1 ，这个时候根据做用域链的规则，就近获取和修改变量。因此 block 内的 aa = 1 ,而全局变量 window.aa = function aa () {} 以下图所示：

aa = 1; function aa () {}; 执行过程
执行序号5时：进入 if 内部执行，在 scope 中会多出来一个 block ，也就是在做用域链中会多出来一个 block ，这个做用域中有 aa = function aa () {} 。以下图所示：

这个时候 block 是 function aa() {} 而全局的 window.aa 如今仍是 aaaa
执行序号6时：执行 console.log(aa) ,这个只是一个输出语法并不会改变变量的值,执行效果没有变。

执行序号7时: 执行 aa = 1 , 咱们能够看到 block 做用域的变量 aa 被赋值为了 1 ，而全局做用域中的变量 aa 仍是 aaaa 。以下图所示：

执行序号8时: 它会执行的代码 function aa() {} ，当前代码执行完成时，咱们会发现全局做用域中的变量 aa 也被赋值为 1 . 以下图所示：

aa = 1; 执行过程当没有 function aa () {}; 函数声明时，咱们会发现不会产生一个临时的 block 做用域，也不会存在奇特的现象。
综合上面三个实例中咱们能够得出如下的结论：

在 if 内部包含了函数声明会在内部产生一个 block做用域，在不包含时不会产生 block做用域。
在当前 if 外部存在和函数声明相同的变量名称时，当执行到函数声明时同时会更新外部函数做用域or全局做用域中变量的值，只更新当前执行的这一次。
咱们再来一个例子来证实咱们获得的结论，例子以下：

第一道题
var a = function() {
console.log(1);
};
var a = function() {
console.log(2);
};
var a;
console.log(a);
a = 1;
console.log(a);
a = 2;
console.log(a);
console.log(typeof a);
复制代码
若是只能答出来就没有必要看了。

若是变量提高遇到函数提高，那个优先级更高呢，看下面的代码。

console.log(a); // function a () {console.log(1);}
var a = 1;
function a() {
console.log(1);
}
console.log(a); // 1
复制代码
看上面的代码知道函数提高是高于变量提高的，由于在 javascript 中函数是一等公民，而且不会被变量声明覆盖，可是会被变量赋值覆盖。其实代码以下

var a = function() {
console.log(1);
};
var a;
console.log(a); // function a () {console.log(1);}
a = 1;
console.log(a); // 1
复制代码
咱们再来一个稍微复杂一点的，代码以下：

console.log(a); // function a () {console.log(2);}
var a = 1;
function a() {
console.log(1);
}
console.log(a); // 1
var a = 2;
function a() {
console.log(2);
}
console.log(a); // 2
console.log(typeof a); // number
复制代码
在屡次函数提高的会后一个覆盖前一个，而后才是变量提高，其实代码以下：

console.log(aa);
var aa = 'aaa';
if (true) {
console.log(aa);
aa = 1;
function aa () {}
aa = 2;
console.log(aa);
}
console.log(aa);
复制代码
若是上面的内容看懂了，大概这个题就会感受很简单，大体过程以下：

第一个 console.log(aa) 会输出全局做用域中的 aa 值为 undefined ，由于 var aa = 'aaa' 会产生变量提高，会把 var aa; 放到全局做用域中的顶端，因此会输出 undefined 。第二个 console.log(aa) 会输出 if 内部中的 aa = ƒ aa () {} ， if 内部执行产生 block做用域，而且 block做用域内部的 ƒ aa () {} 被提高到顶部，因此会输出 ƒ aa () {} 。第三个 console.log(aa) 会输出 block做用域中的 aa = 2 ，由于在执行 function aa () {} 是都会更新外部变量 aa 的值为 1 ，也就是全局做用域中的 aa = 1 ;第四个 console.log(aa) 会输出全局做用域中的 aa ，由于在上一步中咱们知道了全局做用域中的 aa = 1 ，因此会输出 1 。undefinedƒ aa () {}21复制代码到此结束JavaScript中的变量提高，若是发现本篇文章没有涉及的变量提高的知识点和错误的地方，请你们多多指正、探讨。