ES5 與 ES6 中類的區別

類定義與呼叫的區別

在 ES5 中主要是通過建構式方式和原型方式來定義一個類，但是在 ES6 新引入了 class 關鍵字，使之具有了正式類的能力，類（class）是ECMAScript 中新的基礎性語法糖結構，雖然 ES6 類表面上看起來可以支持正式的面向物件編程，但實際上它背后使用的仍然是原型和建構式的概念，

• 使用 ES5 定義一個類并呼叫

function Person(name, age, job) {
    this.name = "Totora";
    this.age = 19;
    this.job =  "student";
    this.sayName = function() {
        console.log(this.name);
    };
}
let person = new Person();
person.sayName();

• 使用 ES6 定義一個類并呼叫

  • ES6中有兩種定義類的方式：類宣告和類運算式

    class Person {} 和 const Person = class {};

class Person {
    constructor() {
        this.name = "Totora";
        this.age = 19;
        this.job = "student";
    }
    sayName() {
        console.log(this.name);
    }
}
let person = new Person();
person.sayName();
//當我們使用typeof檢測Person的型別時：
console.log(typeof Person); //function,它的本質仍然是函式

在呼叫類時，不管是ES5還是ES6，都必須使用new運算子來進行呼叫，不可以直接執行，

兩者區別在于：

• ES5這樣呼叫不會報錯，可以正常執行（因為ES5中的類和普通函式幾乎沒有本質上的區別）

function Person(name, age, job) {
    this.name = "Totora";
    this.age = 19;
    this.job =  "student";
    this.sayName = function() {
        console.log(this.name);
    };
}
let person = Person();
console.log(person); //undefined

• ES6會報錯

class Person {
    constructor() {
        this.name = "Totora";
        this.age = 19;
        this.job = "student";
    }
    sayName() {
        console.log(this.name);
    }
}
let person =Person();
console.log(person);
person.sayName(); //Class constructor Person cannot be invoked without 'new'

變數提升

• 通過以下對比可以發現，當用class宣告類執行時會報錯，說明ES6中用class定義的類無法實作變數提升，

• 函式受函式作用域的限制，但是類受塊作用域的限制

//變數提升
let person = new Person()
function Person(name, age, job) {
    this.name = "Totora";
    this.age = 19;
    this.job =  "student";
    this.sayName = function() {
        console.log(this.name);
    };
}
person.sayName(); //Totora

let person = new Person();
class Person {
    constructor() {
        this.name = "Totora";
        this.age = 19;
        this.job = "student";
    }
    sayName() {
        console.log(this.name);
    }
}
person.sayName(); // Cannot access 'Person' before initialization

class中類的構成

類可以包含建構式方法、實體方法、獲取函式、設定函式、靜態類的方法，但是空的類定義照樣有效

//空類定義
class Foo {}
//有建構式的類
class Bar {
    constructor() {}
}
//有獲取函式的類
class Baz {
    get myBaz() {}
}
//有靜態方法的類
class Qux {
    static myQux() {}
}

class中的靜態方法

• 可以在類上定義靜態方法，靜態類成員在類定義中使用static關鍵字作為前綴，在靜態成員中，this參考類自身；
• 與原型成員類似，靜態成員每個類上只能有一個；
• static宣告的靜態屬性和方法都可以被子類繼承，

class Person {
    constructor() {
        //添加到this的所有內容都會存在于不同的實體上
        this.locate = () => console.log('instance', this);
    }
    //定義在類的原型物件上
    locate() {
        console.log('prototype', this);
    }
    //定義在類本身上
    static locate() {
        console.log('class', this);
    }
}
let p = new Person();
p.locate(); //instance Person { locate: [Function (anonymous)] }
Person.prototype.locate(); //prototype {}
Person.locate(); //class [class Person]

class Person {
    static name() {
        this.job(); //此處的this指向類
    }
    static job() {
        console.log('Totora'); //不會出現在實體中
    }
    job() {
        console.log('student');
    }
}
Person.name(); //Totora

繼承

• ES5中的繼承實質上是先創建子類的實體物件，再將父類的方法添加到this上（Parent.apply(this)），通過原型或建構式機制來實作
• ES6的繼承實際上是先創建父類的實體物件this，然后再用子類的建構式修改this，
• ES6中類之間通過extends關鍵字，就可以繼承任何擁有[[Construct]]和原型的物件，在很大程度上，這不僅i僅可以繼承一個類，也可以繼承普通的建構式（保持向后兼容）
• ES6中派生類的方法可以通過super關鍵字參考它們的原型，這個關鍵字只能在派生類中使用，而且僅限于類的建構式、實體方法和靜態方法的內部，在類建構式中使用super可以呼叫父類建構式，

//ES5中的繼承
function parent(a,b) {
    this.a = a;
    this.b = b;
}
function child(c) {
    this.c = c;
}
parent.call(child, 1, 2); //子級來繼承父級
child.prototype = new parent(1, 2);

//ES6中的繼承
class parent {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
    parentMethods() {
        return this.a + this.b
    }
}
class child extends parent {
    constructor(a, b, c) {
        super(a, b); //通過super呼叫父類
        this.c = c;
    }
    childMethods() {
        return this.c + ',' + super.parentMethods() //通過super實體化呼叫父類
    }
}
const point = new child(1, 2, 3);
console.log(point.childMethods());