本文實(shí)例講述了ES6新特性之類(Class)和繼承(Extends)相關(guān)概念與用法。分享給大家供大家參考，具體如下：

一、類（Class）

1.基本語(yǔ)法

JavaScript語(yǔ)言的傳統(tǒng)方法是通過(guò)構(gòu)造函數(shù)，定義并生成新對(duì)象。下面是一個(gè)例子

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提供了更接近傳統(tǒng)語(yǔ)言的寫法，引入了Class（類）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類?；旧?，ES6的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。上面的代碼用ES6的“類”改寫，就是下面這樣。

//定義類
class Point {
  constructor(x, y) {  //constructor 構(gòu)造方法
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
var p = new Point(1, 2);

構(gòu)造函數(shù)的prototype屬性，在ES6的“類”上面繼續(xù)存在。事實(shí)上，類的所有方法都還是定義在類的prototype屬性上面。

2.constructor方法

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

二、繼承（Extends）

Class之間可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調(diào)用父類的constructor(x, y)
    this.color = color;
  }
  toString() {
    return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
  }
}

上面代碼中，constructor方法和toString方法之中，都出現(xiàn)了super關(guān)鍵字，它在這里表示父類的構(gòu)造函數(shù)，用來(lái)新建父類的this對(duì)象。

子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悰](méi)有自己的this對(duì)象，而是繼承父類的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對(duì)象。

三、原生構(gòu)造函數(shù)繼承

原生構(gòu)造函數(shù)是指語(yǔ)言內(nèi)置的構(gòu)造函數(shù)，通常用來(lái)生成數(shù)據(jù)結(jié)構(gòu)。ECMAScript的原生構(gòu)造函數(shù)大致有下面這些。以前，這些原生構(gòu)造函數(shù)是無(wú)法繼承的。

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()

ES6允許繼承原生構(gòu)造函數(shù)定義子類，因?yàn)镋S6是先新建父類的實(shí)例對(duì)象this，然后再用子類的構(gòu)造函數(shù)修飾this，使得父類的所有行為都可以繼承。下面是一個(gè)繼承Array的例子。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}
var arr = new MyArray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined

上面代碼定義了一個(gè)MyArray類，繼承了Array構(gòu)造函數(shù)，因此就可以從MyArray生成數(shù)組的實(shí)例。這意味著，ES6可以自定義原生數(shù)據(jù)結(jié)構(gòu)（比如Array、String等）的子類，這是ES5無(wú)法做到的。

四、Class的Generator方法

如果某個(gè)方法之前加上星號(hào)（*），就表示該方法是一個(gè)Generator函數(shù)。

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}
for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

上面代碼中，F(xiàn)oo類的Symbol.iterator方法前有一個(gè)星號(hào)，表示該方法是一個(gè)Generator函數(shù)。Symbol.iterator方法返回一個(gè)Foo類的默認(rèn)遍歷器，for...of循環(huán)會(huì)自動(dòng)調(diào)用這個(gè)遍歷器。

五、Class的靜態(tài)方法

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

class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

上面代碼中，F(xiàn)oo類的classMethod方法前有static關(guān)鍵字，表明該方法是一個(gè)靜態(tài)方法，可以直接在Foo類上調(diào)用（Foo.classMethod()），而不是在Foo類的實(shí)例上調(diào)用。如果在實(shí)例上調(diào)用靜態(tài)方法，會(huì)拋出一個(gè)錯(cuò)誤，表示不存在該方法。

父類的靜態(tài)方法，可以被子類繼承。

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

最新評(píng)論