【JavaScript学习笔记8】JS中变量的作用域（面试常考点）

引言

无论是在JS还是在其他编程语言中，变量都有特定的作用域。引入一个叫块级作用域的说就是，任何一对花括号中的语句都属于一个块，在这里面定义的所有变量在代码块外都不可见的。
但是JS与其他编程语言在这方面还是有所差别
这里仅仅简单介绍全局变量与局部变量，详细记录JS中需要注意的变量作用域。

JS中的全局变量

JS中的全局变量指的是：定义在script或者不属于某个函数的变量
例：

上面例子中的name ,age都是全局变量

JS中的局部变量

JS中的局部变量：定义在函数内部的变量
例:

例子中的grade是局部变量

JS中全局变量与局部变量注意点：

• 全局变量能够在函数体内调用
• 全局变量与局部变量具有颜色的差别
• 不使用var声明的变量都是全局变量，但是这种方法不推荐使用
• 变量退出作用域之后会自动销毁，而全局变量在关闭网页或者浏览器的时候才会销毁

JS与其他编程语言的变量作用域差别：

JS中只有定义在函数体内的变量为局部变量，在函数体外的都为全局变量

面试常考点

题目1：

//请写出一下代码的运行结果：
    var price = 10;
    fun();
    function fun() {
        console.log(price);
        var price =20;
    }

解：
答案：undefined
题目分析：这道题暗藏很多坑，首先是使用var定义了一个price并且初始化为10，在函数中很多人都会以定性思维想程序由上往下执行，因此都会先输出price当前的值为10，然后再去跑var price =20 ;思维没有错，但是这里再次使用var 定义时，JS语言会对函数的执行顺序做一个处理：

    var price = 10;
    fun();
    function fun() {
    	var price;
        console.log(price);
        price =20;
    }

程序会变成以上的样子。因为在函数体内，首先跑到console.log(price)后，程序会先在函数体内查询是否有price变量，查询到变量定义在语句的后面会将定义自动提前，但是赋值并不会提前。因此就会导致以上的结果。此时price是一个新定义的变量，因此输出undefined

题目2

//请写出以下程序的输出结果
    var a =10;
    f1();
    function f1() {
        var b =11;
        console.log(a);
        console.log(b);
        var a ='abc';
    }

解：
答案：
undefined
11
解析：第一个undefined与上一题原理雷同。11是b的值，先于调用定义，直接使用b的值

题目3

//请写出以下代码的输出结果
    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    function f1() {
        var a = b = c =5;
        console.log(a);
        console.log(b);
        console.log(c);
    }

解：
答案：
5
5
5
5
5
报错

解析：
在JS中很多语法与其他语言不同，这道题的坑就在于var a =b =c =5中，在JS中其实代码应该解析成这样：

    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    function f1() {
        var a =5;
        b=5;
        c=5;
        console.log(a);
        console.log(b);
        console.log(c);
    }

因此可以看到，在函数体内，只有a是局部变量，b,c都是全局变量，因此程序先走函数体内的3个输出语句输出5,5,5，然后再走函数体外的输出语句输出5,5，报错（因为在函数外调用局部变量报错）