本文實例講述了原生JavaScript之es6中Class的用法。分享給大家供大家參考，具體如下：

es6class寫法

class Point { constructor(x, y) {  this.x = x;  this.y = y; } toString() {  return '(' + this.x + ', ' + this.y + ')'; }}

es5寫法

function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);

對比一下

基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class改寫 就是第一個那樣

上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，ES5 的構造函數Point，對應 ES6 的Point類的構造方法。

Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。

使用的時候，也是直接對類使用new命令，跟構造函數的用法完全一致。

class Bar { doStuff() {  console.log('stuff'); }}var b = new Bar();b.doStuff() // "stuff"

其實就是調用原型上的方法。

| `class B {}
let b = new B();

b.constructor === B.prototype.constructor // true`| |

上面代碼中，b是B類的實例，它的constructor方法就是B類原型的constructor方法。

constructor 方法

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

class Point {}// 等同于class Point { constructor() {}}

上面代碼中，定義了一個空的類Point，JavaScript 引擎會自動為它添加一個空的constructor方法。

constructor方法默認返回實例對象（即this），完全可以指定返回另外一個對象。

class Foo { constructor() {  return Object.create(null); }}new Foo() instanceof Foo

靜態方法

類相當于實例的原型，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態方法”。

class Foo { static classMethod() {  return 'hello'; }}Foo.classMethod() // 'hello'var foo = new Foo();foo.classMethod()

注意，如果靜態方法包含this關鍵字，這個this指的是類，而不是實例。