函數 years 綁定 允許 emp pan 提升 推薦 由於

快速了解ES6部分新特性。。。

let

ES6新增了let命令，用於聲明變量。其用法類似var，但是聲明的變量只在let命令所在的代碼塊內有效。

{
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20

var聲明變量存在變量提升。也就是在聲明變量之前就可以使用該變量。

console.log(x)  // undefined，var聲明變量之前可以使用該變量
var x = 10;

而let不會這樣，let聲明的變量不能在聲明之前使用。

console.log(x)  //
 
 ReferenceError: x is not defined，let聲明變量之前不可以使用該變量
let x = 10;

註意： let不允許在相同的作用域內重復聲明同一個變量。 比如：

function foo(){
    let x = 10;
    var x = 20;
}  // 報錯

再比如：

function foo(){
    let y = 10;
    let y = 20;
}  // 報錯

ES5中只有全局作用域和函數作用域，並沒有塊級作用域。 請看下面的示例：

var name = ‘Q1mi‘

function
 
 foo(){
    console.log(name)
    if (false){
        var name = ‘Bob‘
    }
}
foo()  // undefined

出現上述現象的原因就是在函數內部，由於變量提升導致內存的name變量覆蓋了外層的name變量。 類似的情況還出現在 for循環的計數變量最後會泄露為全局變量。

for (var i=0;i<5;i++){
    console.log(‘哈哈‘);
}
console.log(i);  // 5

ES6中的let聲明變量的方式實際上就為JavaScript新增了塊級作用域。

var name = ‘Q1mi‘

function foo(){
    console.log(name)
    if (false){
        let name = ‘Bob‘
    }
}
foo()  // Q1mi

此時，在foo函數內容，外層代碼塊就不再受內層代碼塊的影響。所以類似for循環的計數變量我們最好都是用let來聲明。

const

const用來聲明常量。const聲明變量必須立即初始化，並且其值不能再改變。 const聲明常量的作用域與let相同，只在聲明所在的塊級作用域內有效。 例如：

const PI = 3.14；

全局對象的屬性：

ES6規定：var命令和function命令聲明的全局變量依舊是全局對象的屬性；let命令、const命令和class命令聲明的全局變量不屬於全局對象的屬性。

查看下面的示例代碼：

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

變量的解構賦值

ES6允許按照一定的模式，從數組或對象中提取值，對變量進行賦值，這種方式被稱為解構賦值。

var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

對象的解構賦值：

var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

模板字符串

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。在模板字符串中嵌入變量，需要將變量名寫入${}中。

var name = ‘Q1mi‘, age = 18;
`My name is ${name}, I’m ${age} years old.`

箭頭函數

箭頭函數中this指向會被固定化。這不是因為箭頭函數內部有綁定this的機制。實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。 可以查看下面兩段代碼輸出的區別：

var person = {
    name: ‘Q1mi‘,
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person對象

和

var person = {
    name: ‘Q1mi‘,
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window對象

屬性簡潔表示法

ES6允許直接寫入變量和函數作為對象的屬性和方法。

function (x, y){
    return {x, y}
}

上面的寫法等同於：

function(x, y){
    return {x: x, y: y}
}

對象的方法也可以使用簡潔表示法：

var o = {
    method(){
        return “Hello!”;
    }
}

等同於：

var o = {
    method: function(){
        return “Hello!”;
    }
}

面向對象

ES5的構造對象的方式 使用構造函數來創造。構造函數唯一的不同是函數名首字母要大寫。

function Person(name, age){
    // 點方法 set方法和get方法
    this.name = name;
    this.age = age;
    this.func = function(){
        ...
    }
}

// 給父級綁定方法
Person.prototype.showName = function(){
    console.log(this.name);
}

var p = new Person(‘q1mi’, 18);
console.log(p.name)
p.showName();

ES6 構造對象的方式：

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }  // 不要加逗號！！！
    showName(){
        console.log(this.name);
    }
}

var p = new Person()

附：

有關ES6的其他新特性，推薦閱讀：阮一峰的ECMAScript 6 入門

ES6 快速入門