关于JS中变量提升的规则和原理的一点理解

????关于变量提升，以前在一些教程和书籍上都听到过，平时开发中也知道有这个规律，但是今天突然在一个公开课中听到时，第一反应时一脸懵逼，然后一百度，瞬间觉得好熟悉啊，差点被这个概念给唬住了，不信我给你看个栗子，你也会恍然大悟的：

(function(){
    console.log(v);
    var v = ‘I love you‘;
    console.log(v);
})()
// undefined  I love you

????这就是一个典型的变量提升的例子了，规则是怎样的呢，我的理解是在一个作用域内，无论你在哪个地方声明的变量都会被提升到顶部，但不会赋值。像本例子中的v就是先被提升到了函数作用域的顶端，所以实际运行过程是这样的：

(function(){
    var v = undefined;
    console.log(v);
    v = ‘I love you‘;
    console.log(v);
})()
// undefined  I love you

????为什么会这样呢，我参考了别人的解释是因为js的运行机制：

js自上而下的执行过程分为两个词法分析和执行两个阶段：词法分析主要包括：分析形参、分析变量声明、分析函数声明三个部分.通过词法分析将我们写的js代码转成可以执行的代码，接下来才是执行。

????变量提升还有一种情况，就是函数，词法分析的时候关于函数声明的处理与变量声明的处理不太一致，会一步到位的给当前函数活动对象增加对应函数名的属性，并重写该方法。也就是不会像变量那样先赋值undefined了。说的有点绕，我们还是看代码，可以先自己看一下执行结果，再看下面的分析：

function a(){
    var b = ‘a‘;
    function b(){
       console.log(‘b‘)
    }
    alert(b)
}
a()

????简单说下，词法分析时对function b的处理：给当前函数活动对象obj增加属性b，并赋值。即：obj.a = function(){...}; 所以词法分析后的结果成了这个样子：

function a(){
    var b = undefined;
    b = function b(){
       console.log(‘b‘)
    }
    b = ‘a‘;
    alert(b); // a
}
a()

????这个地方也只是我读别人观点的一种借鉴，但是我有点不太确定的是普通变量提升和函数提升同时进行时到底谁在最顶端？反正就目前我的认识变量提升的规律是清楚了，大提升提升的原理是因为JS运行机制的问题，为了尽量避免变量提升带来的一些困扰，日常开发中文名还是要养成先声明再使用的好习惯，尽量在函数开头把所有变量都声明出来。文中观点大都是个人理解，如有不对，欢迎指出！

参考文章： https://www.cnblogs.com/huilixieqi/p/6473572.html

原文地址：https://www.cnblogs.com/wancheng7/p/8306711.html