原生JavaScript之es6中Class的用法分析

本文實(shí)例講述了原生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);

對(duì)比一下

基本上，ES6 的class可以看作只是一個(gè)語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。上面的代碼用 ES6 的class改寫 就是第一個(gè)那樣

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

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

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

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

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

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

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

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

constructor 方法

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

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

上面代碼中，定義了一個(gè)空的類Point，JavaScript 引擎會(huì)自動(dòng)為它添加一個(gè)空的constructor方法。

constructor方法默認(rèn)返回實(shí)例對(duì)象（即this），完全可以指定返回另外一個(gè)對(duì)象。

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

靜態(tài)方法

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

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

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

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

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

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

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

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(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錯(cuò)誤與調(diào)試技巧總結(jié)》

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