本文實例講述了原生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寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。上面的代碼用 ES6 的class改寫 就是第一個那樣

上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實例對象。也就是說，ES5 的構(gòu)造函數(shù)Point，對應(yīng) ES6 的Point類的構(gòu)造方法。

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

使用的時候，也是直接對類使用new命令，跟構(gòu)造函數(shù)的用法完全一致。

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

其實就是調(diào)用原型上的方法。

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

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

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

constructor 方法

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

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

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

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

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

靜態(tài)方法

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

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

注意，如果靜態(tài)方法包含this關(guān)鍵字，這個this指的是類，而不是實例。
父類的靜態(tài)方法，可以被子類繼承

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

上面代碼中，父類Foo有一個靜態(tài)方法，子類Bar可以調(diào)用這個方法。

靜態(tài)方法也是可以從super對象上調(diào)用的。

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測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論