ES6入門——類的概念

時間 2019-12-08

原文原文鏈接

一、Class的基本用法html

概述程序員

JavaScript語言的傳統方式是經過構造函數，定義並生成新對象。這種寫法和傳統的面嚮對象語言差別很大，下面是一個例子：編程

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);
console.log(p.x); // 1

View Code

爲了讓程序員再也不感到困惑和使JavaScript這門當初的玩具語言成爲一款可以構建大型應用程序的高級貨，ES6引入了Class（類）這個概念，做爲對象的模板。經過class關鍵字，能夠定義類。基本上，ES6的class能夠看作只是一個語法糖，它的絕大部分功能，ES5均可以作到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。如今使用ES6的類寫法從新編寫上面那個例子，查看並分析它們之間的差別：數組

//定義Point類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ',' + this.y + ')';
  }
}
var p = new Point(1, 2);
console.log(p.y); // 調用屬性
console.log(p.toString()); // 調用方法

View Code

【分析】瀏覽器

上面的代碼定義了一個類，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象。也就是說，ES5的構造函數Point，對應ES6的Point類的構造方法。數據結構

【注意】app

Point類除了構造方法，還定義了一個toString方法。在定義類的方法的時候，前面不須要加上function這個關鍵字，另外，方法之間不須要逗號分隔，加了會報錯。ide

【拓展】函數

構造函數的prototype屬性，在ES6的類上面繼續存在，事實上，類的全部方法都定義在類的prototype屬性上面，怎麼來理解這句話呢？固然得貼上代碼學習

class Point {
  constructor() {}
  toString() {}
  toValue() {}
}
// 等同於
Point.prototype = {
  toString() {},
  toValue() {}
}

View Code

在類的實例上調用方法，其實就是調用原型上的方法

class B {}
let b = new B();
b.constructor === B.prototype.constructor // true

因爲類的方法都定義在prototype對象上面，因此類的新方法能夠添加在prototype對象上面。Object.assign方法能夠很方便地一次向類添加多個方法。

class Point {
  constructor() {}
}
Object.assign(Point.prototype, {
  toString() {},
  toValue() {}
})

View Code

prototype對象的constructor屬性，直接指向類的自己，這與ES5的行爲一致。

Point.prototype.constructor === Point //true

另外，類的內部全部定義的方法，都是不可枚舉的（non-enumerable），怎麼來理解，下面請看一張對比圖：

類的屬性名，能夠採用表達式

let methodName = "getArea";
class Square {
  constructor(length) {}
  [methodName]() {}
}

View Code

上面代碼中，Square類的方法名getArea是從表達式獲得的。

constructor方法

constructor方法是類的默認方法，經過new命令生成對象實例時，自動調用該方法。一個類必選有constructor方法，若是沒有顯示定義，一個空的constructor方法會被默認添加。constructor方法默認返回實例對象（即this），徹底能夠指定返回一個對象。

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

View Code

上面代碼中，constructor函數返回一個全新的對象，結果致使實例對象不是Foo類的實例

【區分】

類的構造函數不使用new是無法調用的，會報錯。然而普通構造函數的即便不用new也能夠執行，不報錯

class Foo {
  constructor() {
    return Object.create(null);
  }
}
Foo() //報錯

View Code

類的實例對象

生成類的實例對象的寫法，與ES5徹底不同，也是使用new命令，若是忘記加上new，像調用函數那樣調用class，將會報錯。另一點，ES6與ES5同樣，實例的屬性除非顯式定義在其自己（即定義在this對象上），不然都是定義在原型上（即定義在class上）

//定義Point類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ',' + this.y + ')';
  }
}
var p = new Point(1, 2);
console.log(p.toString()); //（2,3）
console.log(p.hasOwnProperty('x')); //true
console.log(p.hasOwnProperty('y')); //true
console.log(p.hasOwnProperty('toString')); //false
console.log(p.__proto__.hasOwnProperty('toString')); //true

View Code

上面代碼中，x和y都是實例對象point自身的屬性（由於定義在this變量上），因此hasOwnProperty方法返回true，而toString是原型對象的屬性（由於定義在Point類上），因此返回hasOwnProperty方法返回false，這些都與ES5的行爲保持一致。

【再聊幾句】

與ES5同樣，類的全部實例共享一個原型對象。

var p1 = new Point(1, 2);
var p2 = new Point(3, 4);
p1.__proto__ == p2.__proto__  //true

上面的代碼中，p1和p2都是Point的實例，它們的原型都是Point.prototype，因此__proto__屬性是相等的。這也意味着，能夠經過實例的__proto__屬性爲Class添加方法。

var p1 = new Point(1, 2);
var p2 = new Point(3, 4);
p1.__proto__.printName = function(){return 'OPen'};
console.log(p1.printName()); //OPen
console.log(p2.printName()); //OPen
var p3 = new Point(5, 6);
console.log(p3.printName()); //OPen

View Code

【分析】

上面那段代碼在p1的原型上添加了一個printName的方法，因爲p1的原型就是p2的原型，所以p2也能夠調用這個方法。並且，此後新建的實例p3也能夠調用這個方法。

【注意】

以上分析意味着，使用實例的__proto__屬性改寫原型，必須至關謹慎，不推薦使用，由於這會改變class的原始定義，影響到全部實例。

不存在變量提高

class不存在變量提高（hoist），這一點與ES5徹底不一樣。

new Foo();  //報錯
class Foo {}

上面代碼中，Foo類使用在前，定義在後，這樣會報錯，由於ES6不會把類的聲明提高到代碼頭部。這種規定的緣由與繼承有關，必須保證子類在父類以後定義。

{
  let Foo = class {};
  class Bar extends Foo {

  }
}

Class表達式

與函數同樣，類也可使用表達式的形式定義。

const Myclass = class Me {
  getClassName() {
    return Me.name;
  }
};

上面代碼使用表達式定義了一個類。須要注意的是這個類的名字是Myclass而不是Me，Me只在Class的內部代碼可用，指代當前類，若是類的內部沒用到的話，能夠省略Me。以下代碼所示：

const Myclass = class Me {
  getClassName() {
    return Me.name;
  }
};
let inst = new Myclass();
console.log(inst.getClassName()); //Me
console.log(Me.name); //ReferenceError: Me is not defined

View Code

【拓展】

採用class表達式，能夠寫出當即執行的class。下面代碼中，person是一個當即執行的類的實例。

let person = new class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}('張三');
person.sayName(); //張三

View Code

私有方法

私有方法是常見需求，但ES6不提供，只能經過變通的方法模擬實現。一種作法是在命名上加以區別：

class Width {
  //公有方法
  foo(baz) {
    this._bar(baz);
  }
  //私有方法
  _bar(baz) {
    return this.snaf = baz;
  }
}

View Code

然而這種作法是不保險的，在類的外部，仍是能夠調用到這個方法

【另外一種作法】

將私有方法移出模塊，由於模塊內部的全部方法都是對外可見的。

class Width {
  foo(baz) {
    bar.call(this, baz);
  }
}

function bar(baz) {
  return this.snaf = baz;
}

View Code

上面代碼中，foo是公有方法，內部調用了bar.call(this,baz)，這使得bar實際上成爲了當前模塊的私有方法

【最後一種作法】

利用Symbol值的惟一性，將私有方法的名字命名爲一個Symbol值。

const bar = Symbol('bar');
const snaf = Symbol('snaf');
export default class myClass {
  //公有方法
  foo(baz) {
    this[bar](baz);
  }
  //私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }
};

View Code

上面代碼中，bar和snaf都是Symbol值，致使第三方沒法獲取到它們，所以達到了私有方法和私有屬性的效果。

this的指向

類的方法內部若是含有this，它默認指向類的實例。可是，必須很是當心，一旦單獨使用該方法，極可能報錯（注：下面開始我要貼圖了，敲代碼太太累，學習效率也不高，重點放在對代碼的分析上）

上面代碼中，printName方法中的this默認指向Logger類的實例。可是，若是將這個方法提取出來單獨使用，this會指向該方法運行時所在的環境，由於找不到print方法而致使報錯。

【解決之道1】

在構造方法中綁定this，這樣就不會找不到print方法了

【解決之道2】

使用箭頭函數

【解決之道3】

使用Proxy，獲取方法的時候，自動綁定this。

嚴格模式

類和模塊的內部，默認就是嚴格模式，因此不須要使用use strict指定運行模式。只要你的代碼寫在類或模塊之中，就只有嚴格模式能夠用。考慮到將來全部的代碼，其實都是運行在模塊之中，因此ES6實際上把整個語言升級到了嚴格模式。

name屬性

因爲本質上，ES6的類只是ES5的構造函數的一層包裝，因此函數的許多特性都被class繼承，包括name屬性。name屬性老是返回緊跟在class關鍵字後面的類名。

class Point {}
Point.name  //Point

二、Class的繼承

基本用法

Class之間能夠經過extends關鍵字實現繼承，這比ES5的經過修改原型鏈實現繼承，要清晰和方便不少

上面代碼定義了一個ColorPoint類，該類經過extends關鍵字，繼承了Point類的全部屬性和方法。在constructor方法和toString方法之中，都出現了super關鍵字，它在這裏表示父類的構造函數，用來新建父類的this對象。

【注意】

子類必須在constructor方法中調用super方法，不然新建實例時會報錯。這是由於子類沒有本身的this對象，而是繼承父類的this對象，而後對其進行加工，若是不調用super方法，那麼子類就得不到this對象。

ES6繼承與ES5的區別

ES5的繼承實質是先創造子類的實例對象this，而後將父類的方法添加到this上面（Parent.apply(this)）。ES6的繼承機制徹底不一樣，實質是先創造父類的實例對象this（因此必須先調用super方法），而後再用子類的構造函數修改this。

【進一步說明】

若是在ES6中，子類沒有定義constructor方法，則這個方法會被默認添加。也就是說，無論有沒有顯式定義，任何一個子類都有constructor方法。

【注意】

在子類的構造函數中只有調用super以後，纔可使用this關鍵字，不然會報錯。這是由於子類實例的構建，是基於對父類實例加工，只有super方法才能返回父類實例。

生成上述子類實例的代碼：

上面代碼中，實例對象cp同時是ColorPoint和Point兩個類的實例，這與ES5的行爲徹底一致。

類的prototype屬性和__proto__屬性

大多數瀏覽器的ES5實現中，每個對象都有__proto__屬性，指向對應的構造函數的prototype屬性，Class做爲構造函數的語法糖，同時有prototype屬性和__proto__屬性，所以同時存在兩條繼承連。

（1）子類的__proto__屬性，表示構造函數的繼承，老是指向父類。

（2）子類prototype屬性的__proto__屬性，表示方法的繼承，老是指向父類的prototype屬性。

【分析】

上面代碼這樣的結果是由於：類的繼承是按照下面的模式來實現的。

《對象的擴展》一章給出過Object.setPrototypeOf方法的實現，所以就獲得了上面的結果。

【再嘮叨幾句】

這兩條繼承鏈，能夠這樣理解：

做爲一個對象，子類（B）的原型（__proto__屬性）是父類（A）；

做爲一個構造函數，子類（B）的原型（prototype屬性）是父類（A）的實例。

Extends的繼承目標

extends關鍵字後面能夠跟多種類型的值，下面代碼的A，只要是一個有prototype屬性的函數，就能被B繼承。因爲函數都有prototype屬性（除了Function.prototype函數），所以A能夠是任意函數。

class B extends A {

}

【拓展】

（1）三種繼承目標特殊狀況之子類繼承Object類。這種狀況下，A其實就是構造函數Object的複製，A的實例就是Object的實例。

（2）三種繼承目標特殊狀況之不存在任何繼承。這種狀況下，A做爲一個基類（即不存在任何繼承），就是一個普通函數，因此直接繼承Function.prototype。可是，A調用後返回一個空對象（即Object實例），因此A.prototype.__proto__指向構造函數（Object）的prototype屬性。

（3）三種繼承目標特殊狀況之子類繼承null。這種狀況與第二種狀況很是像，A也是一個普通函數，因此直接繼承Function.prototype。可是，A調用後返回的對象不繼承任何方法，因此它的__proto__指向Function.prototype。

其實質上執行了下面的代碼

Object.getPrototypeOf()

Object.getPrototypeOf方法能夠用來從子類上獲取父類。所以這個方法能夠來判斷一個類是否繼承了另外一個類。

super關鍵字

super這個關鍵字，既能夠當作函數使用，也能夠當作對象使用。在這兩種狀況下，它的用法徹底不一樣。

（1）做爲函數調用：表明父類的構造函數，ES6要求子類的構造函數必須執行一次super函數。

【注意】

super雖然表明父類A的構造函數，可是返回的是子類B的實例，即super內部的this指的是B，所以super()在這裏至關於A.prototype.constructor.call(this)。而且做爲函數時，super()只能用在子類的構造函數之中，用在其餘地方就會報錯。請看下面的兩張圖片：

（2）做爲對象使用：在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。

上面代碼中，子類B當中的super.p()，就是講super當作一個對象來使用。這時，super在普通方法之中，指向A.prototype，因此super.p()就至關於A.prototype.p()。

【注意】

因爲super指向父類的原型對象，因此定義在父類實例上的方法或者屬性，是沒法經過super調用的。好比下面代碼，p是父類A實例的屬性，super.p就引用不到它。

若是屬性定義在父類的原型對象上，super就能夠獲取到。好比下面代碼，屬性x是定義在A.prototype上的，因此super.x能夠取到它的值。

【拓展1】

ES6規定，經過super調用父類的方法時，super會綁定子類的this。

上面代碼中，super.print()雖然調用的是A.prototype.print()，可是A.prototype.print()會綁定子類B的this，致使輸出的是2，而不是1。也就是說，實際上執行的是super.print.call(this)。

【拓展2】

因爲綁定子類的this，因此若是經過super對某個屬性賦值，這時super就是this，賦值的屬性會變成子類實例的屬性。以下面代碼中，super.x賦值爲3，這時等同於對this.x賦值爲3，而當讀取super.x的時候，讀的是A.prototype.x，因此返回undefined。

【拓展3】

若是super做爲對象，用來靜態方法之中，這時super將指向父類，而不是父類的原型對象。好比在下面代碼中，super在靜態方法之中指向父類，在普通方法之中指向父類的原型對象。

【注意】

使用super的時候，必須顯式指定是做爲函數、仍是做爲對象使用，不然會報錯。

下面代碼中，super.valueOf()代表super是一個對象，所以就不會報錯。同時，因爲super綁定B的this，因此super.valueOf()返回的是一個B的實例。

【再嘮叨嘮叨】

因爲對象老是繼承其餘對象的，因此能夠在任意一個對象中，使用super關鍵字。

實例的__proto__屬性

子類實例的__proto_屬性的__proto__屬性，指向父類實例的__proto__屬性。也就是說，子類的原型的原型，是父類的原型。

上面代碼中，ColorPoint繼承了Point，致使前者原型的原型是後者的原型。所以，經過子類實例的__proto__.proto__屬性，能夠修改父類實例的行爲。

上面代碼在ColorPoint的實例p2上向Point類添加方法，結果影響到了Point的實例p1。

三、原生構造函數的繼承

原生構造函數是指語言內置的構造函數，一般用來生成數據結構。ECMAScript的原生構造函數大體有下面這些：

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

之前，這些原生構造函數是沒法繼承的。好比，不能本身定義一個Array的子類。下面左邊代碼定義了一個繼承Array的MyArray類，可是，這個類的行爲與Array徹底不一致（右邊代碼）

【分析1】

之因此會發生這種狀況，是由於子類沒法得到原生構造函數的內部屬性，經過Array.apply()或者分配給原型對象都不行。原生構造函數會忽略apply方法傳入的this，也就是說，原生構造函數的this沒法綁定，致使拿不到內部屬性。

【分析2】

ES5是先新建子類的實例對象this，再將父類的屬性添加到子類上，因爲父類的內部屬性沒法獲取，致使沒法繼承原生的構造函數。好比，Array構造函數有一個內部屬性 [[DefineOwnProperty]]，用來定義新屬性時，更新length屬性，這個內部屬性沒法在子類中獲取，致使子類的length屬性行爲不正常。下面，咱們想讓一個普通對象繼承Error對象：

上面代碼中，咱們想經過Error.call(e)這種寫法，讓普通對象e具備Error對象的實例屬性。可是，Error.call()徹底忽略傳入的第一個參數，而是返回一個新對象，e自己沒有任何變化。這證實了Error.call(e)這種寫法，沒法繼承原生構造函數。

【ES6】

ES6容許繼承原生構造函數定義子類，由於ES6是先新建父類的實例對象this，而後再用子類的構造函數修飾this，使得父類的全部行爲均可以繼承。下面是一個繼承Array的例子

上面代碼定義了一個MyArray類，繼承了Array構造函數，所以就能夠從MyArray生成數組的實例。這意味着，ES6能夠自定義原生數據結構（好比Array、String等）的子類，這是ES5沒法作到的。

【拓展1】

上面那個例子也說明，extends關鍵字不只能夠用來繼承類，還能夠用來繼承原生的構造函數。所以能夠在原生數據結構的基礎上，定義本身的數據結構，下面就是定義了一個帶版本功能的數組。

上面代碼中，VersonedArray結構會經過commit方法，將本身的當前狀態存入history屬性，而後經過revert方法，能夠撤銷當前版本，回到上一個版本。除此以外，VersionedArray依然是一個數組全部原生的數組方法均可以在它上面調用。

【自定義Error子類】

【注意】

繼承Object的子類，有一個行爲差別。下面代碼中，NewObj繼承了Object，可是沒法經過super方法向父類Object傳參。這是由於ES6改變了Object構造函數的行爲，一旦發現Object方法不是經過new Object()這種形式調用，ES6規定Object構造函數會忽略參數。

四、Class的取值函數（getter）和存值函數（setter）

與ES5同樣，在Class內部可使用get和set關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行爲。

【拓展】

存值函數和取值函數是設置在屬性descriptor對象上的。

上面代碼中，存值函數和取值函數是定義在html屬性的描述對象上面，這與ES5徹底一致。

五、Class的Generator方法

若是某個方法以前加上星號（*），就表示該方法是一個Generator函數。下面代碼中，Foo類的Symbol.iterator方法前有一個星號，表示該方法是一個Generator函數。Symbol.iterator方法返回一個Foo類的默認遍歷器，for...of循環會自動調用這個遍歷器。

六、Class的靜態方法

類至關於實例的原型，全部在類中定義的方法，都會被實例繼承。若是在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接經過類來調用，這就被稱爲「靜態方法」。下面代碼中，Foo類的classMethod方法前有static關鍵字，代表該方法是一個靜態方法，能夠直接在Foo類上調用（Foo.classMethod()），而不是在Foo類的實例上調用。若是在實例上調用靜態方法，會拋出一個錯誤，表示不存在該方法。

【拓展1】

父類的靜態方法，能夠被子類繼承。下面代碼中，父類Foo有一個靜態方法，子類Bar能夠調用這個方法。

【拓展2】

靜態方法也是能夠從super對象上調用的。

七、Class的靜態屬性和實例屬性

靜態屬性指的是class自己的屬性，即class.propname，而不是定義在實例對象（this）上的屬性。下面的寫法爲Foo類定義了一個靜態屬性prop。

【注意】

目前，只有這種寫法可行，由於ES6明確規定，class內部只有靜態方法，沒有靜態屬性。

八、類的私有屬性

目前，有一個提案，爲class加了私有屬性。方法是在屬性名以前，使用#表示。下面代碼中，#x就表示私有屬性x，在Point類以外是讀取不到這個屬性的。還能夠看到，私有屬性與實例的屬性是能夠同名的（好比：#x與get x()）。

九、new.target屬性

new是從構造函數生成實例的命令。ES6爲new命令引入了一個new.target屬性，在構造函數中返回new命令做用於那個構造函數。若是構造函數不是經過new命令調用的，new.target會返回undefined，所以這個屬性能夠用來肯定構造是怎麼調用的。

上面代碼確保構造函數只能經過new命令調用。

【拓展】

class內部調用new.target，返回當前class。

【注意】

子類繼承父類時，new.target會返回子類。

利用這個特色，能夠寫出不能獨立使用、必須繼承後才能使用的類。

上面代碼中，Shape類不能被實例化，只能用於繼承。

十、Mixin模式的實現

Mixin模式指的是，將多個類的接口混入（mix in）另外一個類，它在ES6的實現以下：

上面代碼的mix函數，能夠將多個對象合成爲一個類。使用的時候，只要繼承這個類便可。

十一、ES5繼承與ES6繼承的寫法大比拼

（1）ES5

//ES5父類
function User(name, age) {
  this.name = name;
  this.age = age;
}
//靜態方法
User.getClassName = function () {
  return 'User';
};
//類的方法
User.prototype.changeName = function (name) {
  this.name = name;
};
User.prototype.changeAge = function (name) {
  this.age = age;
};
Object.defineProperty(User.prototype, 'info', {
  get() {
    return 'name:' + this.name + ' | age:' + this.age;
  }
});
var user = new User('feng', 23);
console.log(user.info); // name:feng | age:23

//子類
function Manager(name, age, password) {
  User.call(this, name, age);
  this.password = password;
}
//繼承靜態方法
Manager.__proto__ = User;
//繼承prototype方法
Manager.prototype = User.prototype;
//添加新方法
Manager.prototype.changePassword = function (pwd) {
  this.password = password;
};
var manager = new Manager('feng', 22, '556677');
console.log(manager.name); //feng
//調用changeName方法
manager.changeName('feng xiong');
console.log(manager.name); //feng xiong

View Code

（2）ES6

//ES6父類
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  //靜態方法
  static getClassName() {
    return 'User';
  }

  //類的方法
  changeName(name) {
    this.name = name;
  }
  changeAge(age) {
    this.age = age;
  }
  get info() {
    return 'name:' + this.name + ' | age:' + this.age;
  }
}
var user = new User('fengg', 233);
console.log(user.info); // name:fengg | age:233

//子類
class Manager extends User {
  constructor(name, age, password) {
    super(name, age);
    this.password = password;
  }
  changePassword(password) {
    this.password = password;
  }
  get info(){
      var info = super.info;
      console.log(info);
      return info + ' -- new';
  }
}
var manager = new Manager('ES6feng', 22, '556677');
console.log(manager.name); //ES6feng
manager.changeName('jack');
console.log(manager.name); //jack

console.log(manager.info);
// name:jack | age:22
// test.js:88 name:jack | age:22 -- new

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。