JS類—class

典型的面向對象編程語言（比如C++和Java）存在類（class）這個概念。所謂類就是對象的模板，對象是類的實例

JS中沒有類，在ES5中使用構造函數（constructor）作為對象的模板。但是ES5中實現繼承的代碼非常冗長與混亂（盜用構造函數、組合繼承、原型式繼承等等），因此在ES6中新引入了class關鍵字具有了正式定義類的能力

　　類（class）是ECMAScript中新的基礎性語法糖結構。其背后使用的仍然是原型和構造函數的概念

1.類定義

class Person {}
const Person = class {}

 說明：

• class聲明不存在變量提升：

  • console.log(classDemo);
    class classDemo {};        // var_let_const.html:12 Uncaught ReferenceError: Cannot access 'classDemo' before initialization

• 函數受函數作用域限制，而類受塊作用域限制：

  •         {
                class classDemo { };
            }
    
            console.log(classDemo);        // var_let_const.html:16 Uncaught ReferenceError: classDemo is not defined

• 類名首字母同函數構造函數一樣，建議類名首字母大寫

2.類構造函數

constructor關鍵字用於在類定義塊內部創建類的構造函數。方法名constructor會告訴解釋器在使用new操作符創建類的新實例時，應該調用這個函數。

構造函數非必須，不定義相當於構造函數為空

示例：

        class Person { 
            constructor(override){
                console.log("我是一個人")
            }
        };

        let p1 = new Person()        // 我是一個人

 （1）使用new實例化類

　　使用new實例化的操作等於使用new調用其構造函數，new執行的操作有：

• 在內存中創建一個新對象
• 這個新對象內部的__proto__屬性賦值為構造函數的prototype屬性
• 構造函數內部的this被賦值為這個新對象（this指向了新對象）
• 執行構造函數內部的代碼
• 如果構造函數返回非空對象，則返回該對象，否則返回剛創建的新對象

說明：

• 類實例化時傳入的參數會用作構造函數的參數。如果不需要參數，則類名后面的括號是可選的
• 類構造函數與構造函數的主要區別在於：
  • 調用類構造函數必須使用new操作符。不使用new則會拋出錯誤（Uncaught TypeError: Class constructor Person cannot be invoked without 'new'）
  • 而普通構造函數如果不使用new調用，那么就會以全局的this（window）作為內部對象

（2）把類當成特殊函數

JS中並沒有正式的類這個類型。從各方面看，ECMAScript的類就是一種特殊的函數。可以使用typeof 檢測表明它是一個函數：

        class Person { };

        console.log(typeof Person);    // function

• 可以使用instanceof操作符檢查一個對象是不是類的實例：

        class Person {};

        let p = new Person()

        console.log(p instanceof Person);    // true

• 類也可以向其他對象或者函數引用一樣把類作為參數傳遞

        let pList = [
            class Person {
                constructor ( id ){
                    this._id = id
                    console.log("類作為參數:",this._id)
                }
            }
        ]

        function createIns( classDefinition, id ){
            return new classDefinition(id)
        }

        let foo = createIns(pList[0],1234)    // 類作為參數: 1234

•  類還可以立即實例化

        let foo = new class Person {
            constructor(id) {
                console.log("立即實例化對象")
            }
        }

3.實例、原型和類成員

每次通過new調用類標識符時，都會執行類構造函數，在這個函數內部，可以為新創建的實例（this）添加自有屬性。且構造函數執行完畢以后，仍然可以給實例繼續添加新成員。

（1）實例成員

每個實例都對應一個唯一的成員對象，即所有成員都不會在原型上共享：

        class Person {
            constructor(id) {
                this.name = new String('Jack')

                this.sayName = () => console.log(this.name);

                this.nickNames = ['張三','李四']
            }
        }

        let p1 = new Person(),p2 = new Person();

        p1.sayName();    // Jack
        p2.sayName();    // Jack
        console.log(p1.name === p2.name); // false
        console.log(p1.sayName === p2.sayName); // false
        console.log(p1.nickNames === p2.nickNames); // false

（2）原型方法與訪問器

為了在實例間共享方法，類定義語法把在類塊中定義的方法作為原型方法

        class Person {
            constructor() {
                // 存在這個類的不同的實例上
                this.locate = () => console.log("instance");
            }
            // 在類塊中定義的所有內容都會定義在類的原型上
            locate() {
                console.log("prototype");
            }
        }

        let p = new Person()

        p.locate()    // instance
        Person.prototype.locate()    // prototype

• 可以把方法定義在類構造函數中或者類塊中，但不能在類塊中給原型添加原始值或對象作為成員數據

        class Person {
            name: '張三'
        }
        // Uncaught SyntaxError: Unexpected identifier

• 類方法等同於對象屬性，因此可以使用字符串、符號或計算的值作為鍵

        let funName = "fn02"

        class Person {
            
            fn01(){
                console.log("字符串屬性名");
            }

            [funName](){
                console.log("變量屬性名");
            }

            ['fn' + '03'](){
                console.log("計算屬性名");
            }

        }
        
        let p = new Person()
        p.fn01()    // 字符串屬性名
        p.fn02()    // 變量屬性名
        p.fn03()    // 計算屬性名

• 類定義也支持get與set訪問器：

        class Person {

            set name(newName){
                console.log("設置新值為：",newName);
                this._name = newName
            }
            
            get name(){
                console.log("讀取到新值：",this._name);
                return this._name
            }

        }
        
        let p = new Person()
        p.name = "張三"        // 設置新值為： 張三
        p.name    // 讀取到新值： 張三

 （3）非函數原型和類成員

類定義並不顯式支持在原型或類上添加成員數據，但是可以在類定義外部手動添加：

        class Person {

            sayName() {
                console.log(`${ Person.greeting }${ this.name }`);
            }

        }
        // 在類上定義數據成員
        Person.greeting = ' 我的名字是'
        // 在原型上定義數據成員
        Person.prototype.name = '張三'
        
        let p = new Person()
        p.sayName()    // 我的名字是張三