重学原生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);

练习题答案欢送留言！

公众号地址，欢送关注！