為什麼要學 ES6 的語法呢？

因為 Vue 語法有很多都是 ES6（ECMAScript 6），這裡推薦 [阮一峰 ECMAScript 6 入門]: http://es6.ruanyifeng.com/

# // var 聲明的是全局變數   
    <script type="text/javascript">
        // 輸出a，發現沒有，會自動在前面 var a;  然後再進行操作
        console.log(a)    //有變數提升，undefined
        {
            var a = 3;   
        }
        console.log(a)    //3



        # let 聲明的是局部的，不會存在變數提升
        console.log(b)
        {
            // b 是局部作用域的  只能在這個大括弧里才能使用
            let b = 10;   
        }
        console.log(b)
    </script>

    let聲明變數的特點： 
        1、局部作用域  
            2、不會存在變數提升  
            3、變數不能重覆聲明


    let 與 var 聲明變數的區別：
        var 聲明的是全局變數，而 let 是局部的 

const 聲明變數

    <script>
        console.log(b)
        {
            const b = 10;  
            b = 20;   // 報錯
        }
        console.log(b)
    </script>

const 聲明變數的特點：
    1、局部作用域  
        2、不會存在變數提升  
        3、變數不能重覆聲明
        4、只能聲明常量，不可變的量   （比 let 聲明變數多一個特點）

模板字元串

tab 鍵上面的反引號 `${變數名}` 來插值


<script>
    let name = '未來';
    let str = `我是${name}`;

    console.log(str)   // 我是未來
</script>

ES6 的箭頭函數

funtion () {} === () => {}  this的指向發生改變

# ES5 聲明函數：
        function add(x){
            return x;
        }
        add(5)

        let add = function(x){
            return x;
        }
        console.log(add(50))


# ES6 聲明函數（箭頭函數）：
        let add = (x) => {
            return x;
        }
        console.log(60)

# 簡潔版（不易閱讀）：
        let add2 = x => x;
        console.log(add2(100))



#ES5 的案例：
    <script type="text/javascript">
        let person = {
            name: '日天',
            age: 18,
            fav: function(){
                console.log(this)  // 指向 person 
                console.log(this.name)   // 日天
            }
        }
        person.fav()
    </script>



# ES6 的案例：
        let person = {
            name: '日天',
            age: 30,
            fav: () => {
      //this指向  發生了改變。this指向 定義person的父級對象（上下文）
                console.log(this)    // 指向window
                console.log(this.name)  // 輸出 空 
            }       
        }
        person.fav()



# 對象的單體模式
    <script type="text/javascript">
        let person = {
            name: '日天',
            age: 18,
            fav(){   // 相當於 fav:function(){}函數聲明
                console.log(this)  // // 指向 person
                console.log(this.name)   // 輸出 日天
            }
        }
        person.fav()
    </script>

ES6 的類

function person(name, age){
    this.name = name;
    this.age = age;
}
var p1 = person('tom','16');



    <script>
        //聲明一個Person 類
        class Person{
            // 當前類的父類（繼承性）
            // constructor 方法相當於python中的__init__初始化方法
             constructor(name='tom', age=45){  
                 this.name = name;
                 this.age = age;
             }
             showname(){
                console.log(this.name)
             }
             showage(){
                console.log(this.age)
             }
        }

        let v = new Person();
        v.showname();   //輸出tom
    </script>