重学原生js之变量提升

变量声明是所有的编程语言中最基础部分之一。然而，JavaScript 有一个怪异点，称之为变量提升（hositing），这个能够让一个看上去无关紧要的声明变成一个小bug。

一、变量提升

在当前上下文遇到一个变量，如果不是私有的，则向上级上下文中查找一直找到全局上下文为止， 如果全局上下文中也没有：

1. 如果是获取变量的值，则直接报错

1. 如果是设置变量的值，则相当于给window(GO)设置一个属性

二、window全局对象和全局变量的关系

1、两者关系

两者之间存在映射关系（创建一个全局变量，也相当于给window设置一个属性）

2、两者优先级

在全局上下文代码执行的时候，遇到一个变量，首先看是否为全局变量（如果是操作全局变量，【var/function声明的会给window也设置一份】），不是全局变量则继续看是否为GO的属性（如果是相当于省略window），如果也不是则按照没有声明这个变量的错误处理

3、window.a为什么是undefined？

直接输出window.a是对象的成员访问，哪怕没有属性a，属性值是undefined，也不会报错

三、变量提升练习题

建议重新读一遍变量提升的概念，再做这三道题。

第一题

console.log(a); 
var a=12; 
function fn(){
    console.log(a); 
    var a=13;   
}
fn();   
console.log(a);

第二题

console.log(a); 
var a=12;
function fn(){
    console.log(a);
    a=13;
}
fn();
console.log(a);

第三题

console.log(a);
a=12;
function fn(){
    console.log(a);
    a=13;   
}
fn();
console.log(a);

第四题

var foo='hello'; 
(function(foo){
   console.log(foo);
   var foo=foo||'world';
   console.log(foo);
})(foo);
console.log(foo);

解析：

1、自执行函数执行：创建一个函数，并且立即把这个函数执行

2、把全局的foo的值'hello'传递给私有上下文中的形参

3、函数执行先形参赋值，再变量提升

4、foo已经存在，==不重复声明==

四、块级作用域中的变量提升

1、块级作用域

代码在执行的时候遇到大括号{}（排除函数、对象的），在看到{}中有let、const、function才会把其当做块级作用域。

if(true) {
    var a = 1
}
// 不是块级作用域

if(true) {
    let a = 1
}
// 是块级作用域

if(true) {
    function a(){}
}
// 是块级作用域

2、函数在块级作用域中的变量提升

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

// undefined  function 1 function

解析：

1、{}里面有function所以是块级作用域

2、函数在块级作用域中没有，所以会变量提升（所以第二个打印function）

3、==重点== 函数出现在块级作用域中，变量提升阶段，只声明不定义（所以第一个undefined）

4、==重点== 在代码执行的时候浏览器会把function foo()之前的操作，不仅认为是私有的，还会给全局映射一份，之后对foo的操作就认为是私有的了（所以后两个分别1、function）

五、块级作用域变量提升练习题

建议把上面的四句话多读几遍再做

第一题

console.log(foo);
{
    console.log(foo);
    function foo() {} // 此时之前对FOO的操作不会映射，等待最后一次再处理
    foo = 1;
    function foo() {}
    console.log(foo);
}
console.log(foo);   
    

第二题

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

练习题答案欢迎留言！

公众号地址，欢迎关注！