你真的理解ES6的Class嗎

在面向對象的編程中,類是一個用於建立對象，爲狀態（成員變量）和行爲實現（成員函數或方法）提供初始值的可擴展程序代碼模板。

在實際開發中，咱們每每須要建立不少相同類型的對象，如用戶、商品或其餘對象。咱們知道，經過new一個function能夠建立一個對象，但在現代的JavaScript裏，有一個更高級的「類」結構，對於面向對象編程提供了一些很不錯的特性。

Class語法

基本的class語法以下：

class MyClass{
    constructor(){}
    method1(){}
    method2(){}
    method3(){}
}

而後經過new MyClass()來建立一個擁有以上方法的對象實例，與此同時，經過new操做符,構造方法(constructor)是被自動調用,的，這意味着在構造方法中咱們能夠作一些初始化的工做。

列如:

class User{
    constructor(name){
        this.name = name
    }
    showUInfo(){
        alert(this.name)
    }
}
//Usage:
let user = new User('Darkcode')
user.showUInfo()

當new User('Darkcode')被調用的時候：

• 建立了一個新的對象
• 構造方法經過給定的參數運行，併爲其分配this.name

而後咱們可以調用方法，如user.showUInfo()

注意：

類方法之間是沒有逗號的

究竟什麼是類？

其實，在JavaScript中，類是函數的一種。如：

class User{
    constructor(name){
        this.name = name
    }
    showUInfo(){
        alert(this.name)
    }
}
// proof: User is a function
alert(typeof User)//function

class User {...}作了什麼呢：

1. 建立一個名爲User的函數，該函數將成爲類聲明的結果
2. 在User.prototype中存儲全部方法，例如showUInfo

以後，對於新對象，當咱們調用一個方法的時候，它就是從原型中獲取的，所以新的User對象就能夠訪問到類方法了。

咱們能夠將class User的聲明作以下簡述：

class User{
            constructor(name){
                this.name = name
            }
            showUInfo(){
                alert(this.name)
            }
        }
        // proof: class is a function
        alert(typeof User)//function
    
        // ...or, more precisely, the constructor method
        alert(User === User.prototype.constructor)//true
    
        // The methods are in User.prototype, e.g:
        alert(User.prototype.showUInfo)// alert(this.name);
    
        // there are exactly two methods in the prototype
        alert(Object.getOwnPropertyNames(User.prototype)); // constructor, showUInfo

並不僅是語法糖

一些人說在JavaScript中class是一種"語法糖"，由於咱們實際上能夠在沒有class關鍵字的狀況下聲明一個類。在Es6以前，咱們能夠經過function去實現一個類。

// 1. Create constructor function
function User(name) {
    this.name = name
}
// any function prototype has constructor property by default,
// so we don't need to create it


// 2. Add the method to prototype
User.prototype.showUInfo = function () {
    alert(this.name)
}
// Usage:
let user = new User('Darkcode')
user.showUInfo()

這個定義的結果大體相同。所以，確實能夠將類視爲一種語法糖來定義構造函數及其原型方法。但與class的方式建立一個類有着重要的差別。

首先，由class建立的函數由特殊的內部屬性標記[[FunctionKind]]:"classConstructor".因此它與手動建立並不徹底相同。與常規函數不一樣，若是沒有new，則沒法調用類構造函數

class User {
      constructor() {}
    }
    
    alert(typeof User); // function
    User(); // Error: Class constructor User cannot be invoked without 'new'

此外，大多數JavaScript引擎中的類構造函數的字符串表示形式都以「class ...」開頭。

class User {
  constructor() {}
}

alert(User); // class User { ... }

其次，類方法是不可枚舉的。對於原型中的全部方法，類定義將enumerable標誌設置爲false。

最後，類老是使用嚴格模式的。這意味着類構造中的全部代碼都自動處於嚴格模式。

此外，除了基本操做以外，類語法還帶來了許多其餘功能，稍後咱們將對其進行探討。

類表達式

就像函數同樣，類能夠在另外一個表達式中定義，傳遞，返回，分配等。

let User = class {
            showUInfo() {
                alert("Hello");
            }
        };
   new User().showUInfo()

與命名函數表達式相似，類表達式可能有也可能沒有名稱。

若是類表達式具備名稱，則它僅在類中可見：

let User = class MyClass{
        showUInfo(){
            alert(MyClass)// MyClass is visible only inside the class
        }
    }
    new User.showUInfo()// works, shows MyClass definition
    alert(MyClass); // error, MyClass not visible outside of the class

咱們甚至能夠「按需」動態建立類，代碼以下：

function makeClass(phrase) {
        // declare a class and return it
        return class {
            showUInfo() {
                alert(phrase);
            };
        };
    }

    // Create a new class
    let User = makeClass("Hello");

    new User().showUInfo(); // Hello

Getters/Setters

類可能包括getter / setter，生成器，計算屬性等。這裏經過使用get/set來實現user.name

class User{
        constructor(name){
            this._name = name
        }

        get name(){
            return this._name
        }

        set name(value){
            if(value.length<4){
                alert("名字長度不夠.");
                return;
            }
            this._name = name
        }
    }

    let user = new User('Darkcode')
    alert(user.name)
    user = new User('')//名字長度不夠.

在User的原型對象中，經過類聲明建立get/set：

Object.defineProperties(User.prototype, {
      name: {
        get() {
          return this._name
        },
        set(name) {
          // ...
        }
      }
    });

類屬性

在上面的列子中，User類中僅僅添加了簡單的方法，如今來添加一些屬性。

class User {
      name = "Anonymous";
    
      sayHi() {
        alert(`Hello, ${this.name}!`);
      }
    }
    
    new User().sayHi();

該屬性未放入User的原型中。相反，它是由new建立的，分別爲每一個對象建立。所以，該屬性永遠不會在同一個類的不一樣對象之間共享。

接下來將介紹類中私有的，保護的屬性和方法。