[ES6] ES 6基本用法

ES6（JS）在線編輯器：https://www.runoob.com/try/try.php?filename=tryjs_hoisting4

一、ES6語法

1.let

局部作用域

{
    let x = 5;
}
console.log(x)

let定義的變量x的作用域在大括號范圍內，所以在括號外面打印x，會報錯：y is not defined

不存在變量提升

console.log(y)
var y = 6;

當我們使用var來定義變量y時，之前打印y的話，結果為undefined，而不會報錯，這是因為y的聲明被自動提前到作用域的最前面了，相當於：

var y;  // 此時y為undefined
console.log(y)
var y = 6;

從這里也可以看出，var是可以對變量重復聲明的。

變量不能重復聲明

let不能對變量重復聲明：

{
    let x = 5;
    let x = 7;  
}    

報錯：Identifier 'x' has already been declared

2.const

和let的特點類似：

• 局部作用域
• 不存在變量提升
• 變量不能重復聲明

另外還有一條，就是定義常量（即不可變）：

• 定義常量

3.模板字符串

let name = 'leo';
let str = `我的名字是:${name}`;
console.log("str: " + str);

模板字符串兩邊使用的是"反引號"。

4.箭頭函數

在ES5中，我們定義函數是這樣的：

function add(x){
    return x;
}

或者：

var add = function(x){
    return x;  
}

但在ES6中，添加了箭頭函數：

let add2 = (x)=>{  // 這里的(x)表示參數為x
    return x;
}

還有一種（直接返回參數）：

let add2 = x => x;  // 第一個x為參數，第二個x為return x；

5.定義對象

let person = {
    name : "leo",
    age :32,
    func : function(){
        console.log(this);  // 打印{name: "leo", age: 32, func: ƒ}，指向person本身
        console.log(this.name);  // 打印leo
    } 
}
person.func();

單體模式寫法：

let person = {
    name : "leo",
    age :32,
    func(){
        console.log(this);  // 打印 {name: "leo", age: 32, func: ƒ}，指向person本身
        console.log(this.name); // 打印leo
    }
}
person.func();

兩面兩種寫法是完全一樣的。

 

但是，如果在對象中使用箭頭函數：

let person = {
    name : "leo",
    age :32,
    func : ()=>{ console.log(this);  // 打印 Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
 } 
}
person.func();

可以看到，this的指向被改變了。不是指向person本身，而是指向創建person對象的父級對象（即上下文），這里是Window。

6.類

在ES5中，類是這么定義的：

// 定義一個Person類，屬性有name和age
var Person = function(name,age){  
    this.name = name;
    this.age = age;
}
// 為Person類添加方法showName
Person.prototype.showName = function(){
    console.log(this.name);
}
// 定義個Person對象p
var p = new Person('leo',32);
p.showName();

在ES6中：

class Person{
    // 構造函數，和python的__init__()一樣
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    // 定義方法
    showName(){
        console.log(this.name);
    }
}
let p = new Person('leo',32);
p.showName();

注意，成員方法都是單體模式寫法。

 

 

66