JavaScript中的变量

懂点编程的都知道，执行环境的类型总共只有两种:全局和局部

var color ="blue";function changeColor() {    var num =10;    console.log(num);console.log(color);}changeColor();console.log(num);

在这个例子中，color是全局变量，num是局部变量，color能被函数内部访问，但是num不能被外部访问。因此会输出 10 blue 第三句会报错 num is not defined。

我们再来看例子分析 从例子中发现问题，引出原理，解决问题。

var num = 10;function changeNum() {    console.log(num);}changeNum(); 

毫无疑问，一定输出 10 。函数执行的过程你知道吗？
当执行函数changeNum()的时候，先在函数体内部查找是否有变量num 的声明，如果没有，就往外层去找。本例子中，函数体内部并没有var声明的变量num，因此会找到函数体外面的num。因此最后会输出10。
再来看一个例子

var num = 10;function changeNum() {    console.log(num);    var num = 9;    console.log(num);}changeNum();

在本例子，你猜结果会输出什么？
第一个输出undefined
第二个输出 9
为什么会这样呢？ 先来看函数的执行过程，因为要输出num，先来查看函数体内部是否有var 声明的变量num，结果发现，在函数体内第二行有个var num =9;也就是找到了变量num的var声明，这个时候函数是不会再往外层去寻找num了，会把当前的num声明放在函数体内的最顶端，即var num;但是不赋值，故输出undefined。此时，var num =9;也就变成了num=9;故第二个输出会输出9.
上面的例子就是如下：

var num =10;function changeNum() {    // 先声明变量num；    var num;    console.log(num); // undefined    // 再赋值     num = 9;    console.log(num);// 9}

函数变量的提升，我在这篇博客javascript变量知识小梳理中有提到过。
因此在这里再啰嗦一遍：
如果在函数体内有变量声明，会将此变量的声明放在函数体内最顶端，只是声明(如var num;)，并不赋值。
其实这是js中作用域的问题

深度剖析：
Js中的作用域分析，作用域其实就是起作用的范围。在js中唯一能产生作用域的东西就是函数了，js中没有块级作用域(这个稍后讲解)
• Js中程序在执行中，会先进行一个预解析,分析预解析的过程，即:
　程序在执行过程, 会先将代码读取到内存中检查. 会将所有的声明在此时进行标记. 所谓的标记就是让 js 解释器知道有这个名字, 后面在使用名字的时候, 不会出现未定义的错误. 这个标记过程就是提升.
　声明
变量的声明, 标识符的声明
变量的声明就是让我们的解释器知道有这个名字
变量没有任何数据与之对应，即不先给其赋值
函数的声明
函数声明包含两部分
函数声明与函数表达式有区别, 函数声明是单独写在一个结构中, 不存在任何语句, 逻辑判断等结构中
首先函数声明告诉解释器有这个名字存在. 该阶段与名字声明一样
告诉解释器, 这个名字对应的函数体是什么(函数名和函数体绑定链接)
• 再进行代码执行过程

知道这些，所以变量的提升并不难理解了吧！
刚才有提到函数没有块级作用域的问题，这是什么意思呢？
先上代码，看看

if (true){    var num = 8;}console.log(num);

你猜会num会输出什么？ 答案是8.
这里再一个if语句中定义了变量num。如果是在C C++ 或Java中，num会在if语句执行完毕后被销毁。但在JavaScript中，if语句的变量声明会将变量添加到当前的执行环境中（这里是全局环境）中。因此会输出8。在使用for语句时，尤其要牢记这一点。看例子：

for(var i =0;i<10;i++) {   var str = "你猜会输出什么";}console.log(i);

由于js没有块级作用域，由for语句创建的变量i即使在for循环执行结束后，也依旧会存在于循环外部的执行环境中。所以最后会输出10.

来看牛客网上一道题

现有如下html结构    <ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li></ul>运行如下代码：        var elements=document.getElementsByTagName('li');    var length=elements.length;    for(var i=0;i<length;i++){        elements[i].onclick=function(){        alert(i);    } }依次点击4个li标签，哪一个选项是正确的运行结果（）?结果依次弹出  4 4 4 4

Js的块级作用域现在ES6中已经有了定义，其实用闭包也可以实现
ES6的块级作用域：用let为JavaScript新增了块级作用域

for(let i =0;i<10;i++) {   var str = "你猜会输出什么";}console.log(i);结果会报错 i is not defined