本文例項講述了原生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指的是類，而不是例項。
父類的靜態方法，可以被子類繼承

class Foo {
 static classMethod() {
  return 'hello';
 }
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'

上面程式碼中，父類Foo有一個靜態方法，子類Bar可以呼叫這個方法。

靜態方法也是可以從super物件上呼叫的。

class Foo {
 static classMethod() {
  return 'hello';
 }
}
class Bar extends Foo {
 static classMethod() {
  return super.classMethod() + ',too';
 }
}
Bar.classMethod() /

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。