第一讲：var的使用

目录

使用var声明变量

不使用var，直接给变量赋值

 变量的作用域

全局变量和局部变量的混用

 变量提升

总结

---

 

javascript中，使用var声明变量，看似简单易学，其实不然。

在我接触的许多编程语言中，如c, c#, vb, java, php等等，声明变量都有严格的语法格式，只有一套标准，没有其二。所以说声明变量是很简单的事情。

javascript中，声明变量有两种方式：var 和 let (ES6）。声明一个变量，到底使用哪一个呢。

下面先学习var的使用。

使用var声明变量

    //先声明变量，后赋值
    var myName;
    myName = "张三"

    //声明变量同时赋值
    var age = 20

    //同时声明多个变量
    var gender, phone;
    //或者
    var gender = '男', phone = '15366668888'

    //控制台输出变量的值
    console.info(gender, phone)

 运行的结果如下图

 注意，JavaScript 的变量名区分大小写，A和a是两个不同的变量。

 

不使用var，直接给变量赋值

    myName = '张三'
    console.log(myName)

JS中变量声明分显式声明和隐式声明

显示声明：使用var关键字

隐式声明：省略var关键字

隐匿声明虽然代码更少，但不是好办法。二者之间也有区别，继续往下看。

 变量的作用域

在 JavaScript 中有两种作用域类型：

• 局部作用域
• 全局作用域

作用域决定了这些变量的可访问性（可见性）。 

    //示例1：使用var声明变量，name是全局变量
    var myName = "张三"

    //不使用var， age是全局变量
    age = 20

    var show = function () {
        console.log(myName)
        console.log(age)
    }

    show()

    //示例2 在语句块中使用var声明的变量，或者不使用var声明变量，都是全局变量
    var flag = 1
    if (flag) {
        var score = 80
        course = '数学'
        console.log(score)
    }

    console.log(score,course) //输出80  数学


    //示例3 在for循环中使用var声明变量，或者不使用var声明变量，都是全局变量
    var arr = [1, 2, 3, 4, 5]
    //可以省略var
    for (var i = 0, len = arr.length; i < len; i++) {
        console.log(arr[i])
    }

    //可以访问到全局变量i和len
    console.log(i, len) //输出5  5

在函数外部使用var或者不使用var的变量，都是全局变量。

    function showMe() {
        var myName = '张三';
        age = 20;
        console.log(`自我介绍一下，我叫${name},今年${age}`)
    }
    showMe()

    console.log(myName)  //报错，未找到变量
    console.log(age) //20

 

 在函数中使用var关键字进行显式申明的变量是做为局部变量，而没有用var关键字，使用直接赋值方式声明的是全局变量。　　
　　当我们使用访问一个没有声明的变量时，JS会报错。而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式申明一个全局变量，这一点一定要注意。

全局变量和局部变量的混用

    //全局变量
    var a = "Hello"
    function test1() {
        var a; //局部变量
        console.log(a) //输出undefined
        a = "World"  //局部变量
        console.log(a) //输出World
    }

    function test2() {
        console.log(a) //全局变量，输出Hello
        a = "World" //全局变量
        console.log(a) //输出World
    }

    function test3() {
        console.log(a) //局部变量，输出undefined
        var a = "World" //局部变量
        console.log(a) //输出World
    }

    test1()
    test2()
    test3()

上面代码中，函数test1 和 test2 好理解，函数test3 理解困难。继续往下看。。。 

 变量提升

所有变量的声明语句会被提升到当前变量作用域的顶部。先声明但未进行初始化。

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

    console.log(a)  //报错

    console.log(b) //不会报错，输出undefined
    var b = 3

    //相当于
    var b;
    console.log(b)
    b = 3

函数内的变量也会提升到当前作用域的顶部

    var a = "Hello"
    function test3() {
        console.log(a) //局部变量，输出undefined
        var a = "World" //局部变量
        console.log(a) //输出World
    }

    //相当于
    function test3() {
        var a;
        console.log(a) //局部变量，输出undefined
        a = "World" //局部变量
        console.log(a) //输出World
    }

总结

使用var声明的变量，作用域不容易搞懂，还存在变量提升的弊端，坑非常多。