ES6 基本語法學習

一、let 特點

    1、聲明的變量是局部作用域

    2、變量不會提升

    3、不能重複聲明變量

二、const 特點

    1、聲明的變量是局部作用域

    2、變量不會提升

    3、不能重複聲明變量

    4、只聲明常量，不可修改變量

三、模板字符串“` `”

let a='hello';
let b=`${a} word`;

四、箭頭函數

let add = (x)=>{
    return x;
}
// let add = x => x;第一個x爲傳入的參數，第二個x想到於 return x; 返回值
console.log(add(20));

ES5中函數與箭頭函數this的指向問題？

ES5中，函數被誰調用this就指向誰；箭頭函數中this則指向的是調用該函數的父對象。

let person = {
    name:'Jsom',
    add:function(){
        console.log(this); // 這裏的this指向當前對象，及 person 對象
        console.log(this.name); // 所以這裏會輸出 Jsom
    },
    edit(){
        // 這種方法聲明是上面方法的簡寫
        console.log(this); // 這裏的this指向當前對象，及 person 對象
        console.log(this.name); // 所以這裏會輸出 Jsom
    }
}

person.add();
person.edit();

let person = {
    name:'Jsom',
    add:() => {
        console.log(this); // 這裏this指向的是 person 對象的父對象（這裏指向的是window對象）
        console.log(this.name); // window中沒有name屬性，所以沒有輸出
    }
}

person.add();

五、class 聲明對象

class Vue{
    // 聲明構造函數
    constructor(name='Jsom',age='18'){
        this.name = name;
        this.age = age;
    }
    show(){
        console.log(this.name)
    }
}

let v = Vue();

v.show() // 輸出 Jsom

ECMAScript 6 入門