重学原生js之变量提高

变量声明是全部的编程语言中最基础部分之一。然而，JavaScript 有一个怪异点，称之为变量提高（hositing），这个可以让一个看上去可有可无的声明变成一个小bug。

1、变量提高

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

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

1. 若是是设置变量的值，则至关于给window(GO)设置一个属性

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

一、二者关系

二者之间存在映射关系（建立一个全局变量，也至关于给window设置一个属性）

二、二者优先级

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

三、window.a为何是undefined？

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

3、变量提高练习题

建议从新读一遍变量提高的概念，再作这三道题。

第一题

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);

解析：

一、自执行函数执行：建立一个函数，而且当即把这个函数执行

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

三、函数执行先形参赋值，再变量提高

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

4、块级做用域中的变量提高

一、块级做用域

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

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

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

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

二、函数在块级做用域中的变量提高

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

// undefined  function 1 function

解析：

一、{}里面有function因此是块级做用域

二、函数在块级做用域中没有，因此会变量提高（因此第二个打印function）

三、==重点== 函数出如今块级做用域中，变量提高阶段，只声明不定义（因此第一个undefined）

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

5、块级做用域变量提高练习题

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

第一题

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);

练习题答案欢迎留言！

公众号地址，欢迎关注！