ES6中Class類的理解

時間 2019-11-16

原文原文鏈接

在ES6中，class (類)經過 class 關鍵字定義類。它能夠被看做一個語法糖，讓對象原型的寫法更加清晰、更像面向對象編程的語法。
類其實是個「特殊的函數」，就像你可以定義的函數表達式和函數聲明同樣，類語法有兩個組成部分：類表達式和類聲明。編程

類表達式和類聲明

類聲明：

class Person{
constructor(x,y){
this.x = x;
this.y = y
}
}函數

總結：this

類聲明的時候，類名必需要大寫

函數聲明和類聲明之間的一個重要區別是函數聲明會提高，類聲明不會。須要先進行聲明，再去訪問，不然會報錯prototype

var person= new Person()
       class Person {
           constructor(x, y) {
           this.x = x
           this.y = y
         }
       }
       // Personis not defined

類聲明不能夠重複

類必須使用 new 調用，不然會報錯code

class Person {
       constructor(x, y) {
       this.x = x
       this.y = y
     }
   }
   Person()
   // TypeError Class constructor Person cannot be invoked without 'new'

類表達式（類定義）

類表達式能夠是被命名的或匿名的對象

* 匿名類 */ 
    let Person = class {
      constructor(x, y) {
        this.x = x
        this.y = y
      }
    }

    /* 命名的類 */ 
    let Person = class Person {
      constructor(x, y) {
        this.x = x
        this.y = y
      }
    }

類的方法

constructor方法

constructor 方法是類的默認方法，在new 命令生成對象實例時，會自動調用constructor方法，同時默認返回實列對象的this；原型

一個類必須有 constructor 方法，若是沒有顯式定義，一個空的 constructor 方法會被默認添加。一個類只能擁有一個名爲「constructor」的特殊方法，若是類包含多個 constructor 的方法，則將拋出一個 SyntaxError 。it

class Person {
   constructor(x, y) {
    this.x = x    // 默認返回實例對象 this
    this.y = y
  }
  toString() {
    console.log(this.x + ', ' + this.y)
  }
}

靜態方法

在類對象的內部的方法【constructor除外】前面加上static後，該方法就是靜態方法了io

注意：靜態方法能夠經過類名調用，不能經過實例對象調用，不然會報錯console

class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2)  // 3
p.sum(1,2)     //  TypeError p.sum is not a function

原型方法

類的全部方法都定義在類的 prototype 屬性上面，
在類的實例上面調用方法，其實就是調用原型上的方法
原型方法能夠經過實例對象調用，但不能經過類名調用，會報錯

class Person {
        constructor() {
            // 默認返回實例對象 this
        }
        sum() {

        }
        toString() {
            console.log('123456')
        }
    }
    // 給 Person 的原型添加方法
    Person.prototype.toVal = function() {
        console.log('I am is toVal')
    }

    // 等同於
    Person.prototype = {
      constructor() {},
      sum() {},
      toString() {}
    }

    var p = new Person()
    p.toString()       // 123456
    p.toVal()          // I am is toVal
    Person.toString()  // TypeError Person.toStringis not a function
    Person.toVal()  // TypeError Person.toVal is not a function

實例方法

實例方法也能夠經過實例對象調用，但一樣不能經過類名調用，會報錯

class Person {
        constructor() {
            this.sum = function(a, b) {
                console.log(a + b)
            }
        }
    }
    var p = new Person()
    p.sum(1,2)       // 3
    Person.sum(1,2)  // TypeError Person.sum is not a function