js學習手冊和es6新增知識10關于class類

1、Class 基本語法 概述JavaScript 語言的傳統方法是通過構造函數，定義并生成新對象。下面是一個例子。function Po(x,y)上面這種寫法跟傳統的面象語言（比如 C+和Java）差異很大，很容易讓新學習這門語言的程序員感到困惑。ES6 提供了更接近傳統語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過 class 關鍵字，可以定義類?；旧?，ES6 的class 可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓對象原型的寫法更加清晰、更像面象編程的語法而已。上面的代碼用ES6 的“類”改寫，就是下面這樣。/定義類 cla

2、ss Poconstructor(x, y) this.x = x; this.y = y;toString() return ( + this.x + , + this.y + );this.x = x; this.y = y;Ptotype.toString = function () return ( + this.x + , + this.y + );上面代碼定義了一個“類”，可以看到里面有一個 constructor 方法，這就是構造方法，而 this 關鍵字則代表實例對象。也就是說，ES5 的構造函數 Po，對應 ES6 的 Po類的構造方法。Po類除了構造方法，還定義了

3、一個 toString 方法。注意，定義“類”的方法的時候，前面不需要加上 function 這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。ES6 的類，完全可以看作構造函數的另一種寫法。class Potypeof Po / functionPo = Ptotype.constructor / true上面代碼表明，類的數據類型就是函數，類本身就指向構造函數。構造函數的 prototype 屬性，在ES6 的“類”上面繼續(xù)存在。事實上，類的所有方法都定義在類的 prototype 屬性上面。在類的實例上面調用方法，其實就是調用原型上的方法。c

4、lass B let b = new B();b.constructor = B.prototype.constructor / trueclass Po constructor()/ . toString()/ . toValue()/ . / 等同于Ptotype = toString(),toValue();/ .上面代碼中，b 是B 類的實例，它的 constructor 方法就是B 類原型的 constructor方法。由于類的方法都定義在 prototype 對象上面，所以類的新方法可以添加在 prototype對象上面。方法可以很方便地一次向類添加多個方法。class

5、Poconstructor()/ .Objesign(Ptotype, toString(),toValue();prototype 對象的constructor 屬性，直接指向“類”的本身，這與 ES5 的行為是一致的。Ptotype.constructor = Po / true所有定義的方法，都是不可枚舉的（non-enumerable）。另外，類的class Poconstructor(x, y) / .toString() / .Object.keys(Ptotype)/ Object.getOwnPropertyNames(Ptotype)/

6、 constructor,toString上面代碼中，toString 方法是ES5 的行為不一致。類定義的方法，它是不可枚舉的。這一點與var Po= function (x, y)/ .;PoObjesign/ toStringObject.getOwnPropertyNames(Ptotype)上面代碼采用ES5 的寫法，方法就是可枚舉的。類的屬性名，可以采用表達式。上面代碼中，Square 類的方法名getArea，是從表達式得到的。constructor 方法constructor 方法是類的默認方法，通過 new 命令生成對象實例時，自動調用該方法。一個類必須有 cons

7、tructor 方法，如果沒有顯式定義，一個空的 constructor 方被默認添加。constructor() constructor 方法默認返回實例對象（即 this），完全可以指定返回另外一個對象。class Foo constructor() return Object.create(null);let methodName = getArea; class Squareconstructor(length) / . methodName() / . toString/ constructor,toStringPtotype.toString = function() /

8、 .;Object.keys(Ptotype)上面代碼中，constructor 函數返回一個全新的對象，結果導致實例對象不是 Foo 類的實例。類的實例對象生成類的實例對象的寫法，與ES5 完全一樣，也是使用 new 命令。如果忘記加上 new，像函數那樣調用 Class，將會報錯。/ 報錯 var po = Po(2, 3);/ 正確 var po = new Po(2, 3);與ES5 一樣，實例的屬性除非顯式定義在其本身（即定義在 this 對象上），否則都是定義在原型上（即定義在 class 上）。/定義類 class Po constructor(x,y) this.x

9、=this.y =x;y;toString()return ( +this.x + , + this.y + );var po = new Po(2, 3);po.toString() / (2, 3)po.hasOwnProperty(x) / truepo.hasOwnProperty(y) /truepofalsepo.hasOwnProperty(toString) /._proto .hasOwnProperty(toString) / truenew Foo() instanceof Foo/ false上面代碼中， 和都是實例對象自身的屬性（因為定義在變量上），所以hasOwnP

10、roperty 方法返回 true，而toString 是原型對象的屬性（因為定義在。這些都與ES5 的行為保持一類上），所以hasOwnProperty 方法返回致。與ES5 一樣，類的所有實例共個原型對象。var p1 = new Po(2,3);var p2 = new Po(3,2);p1. proto = p2. proto_/true都是Po的實例，它們的原型都是Po上面代碼中，性是相等的。和，所以屬這也意味著，可以通過實例的 proto 屬性為Class 添加方法。上面代碼在 p1 的原型上添加了一個 prName 方法，由于的原型就是的原型，因此 p2 也可以調用這個方法。而且

11、，此后新建的實例 p3 也可以調用這個方法。這意味著，使用實例的屬性改寫原型，必須相當謹慎，不使用，因為這會改變Class 的原始定義，影響到所有實例。name 屬性由于本質上，ES6 的Class 只是ES5 的構造函數的一層包裝，所以函數的許多特性都被Class 繼承，包括 name 屬性。class PoP / Po proto p2p1var p1 = new Po(2,3);var p2 = new Po(3,2);p1. proto .prName = function () return Oops ;p1.prName() / Oopsp2.prName() / Oo

12、psvar p3 = new Po(4,2);p3.prName() / Oops proto p2p1falsePothispoyx屬性總是返回緊跟在關鍵字后面的類名。Class 表達式與函數一樣，Class 也可以使用表達式的形式定義。 getClaame() 上面代碼使用表達式定義了一個類。需要注意的是，這個類的名字是 MyClass 而不是Me，Me 只在Class 的代碼可用，指代當前類。inst.getClaame() / MeM / ReferenceError: Me is not defined上面代碼表示，Me 只在Class有定義。如果Class沒用到的話，可

13、以省略 Me，也就是可以寫成下面的形式。const MyClass = class /* . */ ;采用Class 表達式，可以寫出立即執(zhí)行的Class。let= new class constructor(name) = name;sayName() console.log();();.sayName(); / let inst = new MyClass();return M;const MyClass = class Me classname是一個立即執(zhí)行的Class 的實例。上面代碼中，不存在變量Class 不存在變量（hoist），

14、這一點與ES5 完全不同。類使用，定義在后，這樣會報錯，因為ES6 不會把變量上面代碼中，提升到代碼頭部。這種規(guī)定的原因與下文要提到的繼承有關，必須保證子類在父類之后定義。上面的代碼不會報錯，因為繼承的時候，已經有定義了。但是，如果存在Class 的，上面代碼就會報錯，因為 class 會被到代碼頭部，而 let 命令是不的，所以導致 class 繼承 Foo 的時候，Foo 還沒有定義。嚴格模式類和模塊的，默認就是嚴格模式，所以不需要使用 use strict 指定運行模式。只要你的代碼寫在類或模塊之中，就只有嚴格模式可用?？紤]到未來所有的代碼，其實都是運行在模塊之中，所以 ES6 實際上把

15、整個語言升級到了嚴格模式。Class 的繼承FooFooclasslet Foo = class ; class Bar extends Foo Foonew Foo(); / ReferenceErrorclass Foo 基本用法Class 之間可以通過 extends 關鍵字實現繼承，這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。class ColorPo extends Po 上面代碼定義了一個 ColorPo類，該類通過 extends 關鍵字，繼承了 Po類的所有屬性和方法。但是由于沒有部署任何代碼，所以這兩個類完全一樣，等于了一個 Po類。下面，在 ColorPo加上

16、代碼。class ColorPoextends Poconstructor(x, y, color) super(x, y); / 調用父類的constructor(x, y)this.color = color;toString() return this.color + + super.toString(); / 調用父類的toString()上面代碼中，constructor 方法和toString 方法之中，都出現了 super 關鍵字，它在這里表示父類的構造函數，用來新建父類的 this 對象。子類必須在 constructor 方法中調用 super 方法，否則新建實例時會報錯。這

17、是因為子類沒有自己的 this 對象，而是繼承父類的 this 對象，然后對其進行加工。如果不調用 super 方法，子類就得不到 this 對象。class Po /* . */ class ColorPoextends Poconstructor() let cp = new ColorPo(); / ReferenceError上面代碼中，ColorPo繼承了父類 Po，但是它的構造函數沒有調用 super 方法，導致新建實例錯。ES5 的繼承，實質是先創(chuàng)造子類的實例對象 this，然后再將父類的方法添加到 this上面（Parent.apply(this)）。ES6 的繼承機制完全不同

18、，實質是先創(chuàng)造父類的實例對象 this（所以必須先調用 super 方法），然后再用子類的構造函數修改 this。如果子類沒有定義 constructor 方法，這個方被默認添加，代碼如下。也就是說，不管有沒有顯式定義，任何一個子類都有constructor 方法。另一個需要注意的地方是，在子類的構造函數中，只有調用 super 之后，才可以使用this 關鍵字，否則會報錯。這是因為子類實例的構建，是基于對父類實例加工，只有super 方法才能返回父類實例。class Po 上面代碼中，子類的 constructor 方法沒有調用 super 之前，就使用 this 關鍵字，結果報錯，而放在

19、super 方法之后就是正確的。下面是生成子類實例的代碼。和 Po兩個類的實例，這與ES5 的上面代碼中，實例對象 cp 同時是 ColorPo行為完全一致。let cp = new ColorPo(25, 8, green);cp instanceof ColorPo/ truecp instanceof Po/ trueconstructor(x, y) this.x = x; this.y = y;class ColorPoextends Poconstructor(x, y, color) this.color = color; / ReferenceErrorsuper(x, y);

20、 this.color = color; / 正確 constructor(.args) super(.args);類的 prototype 屬性和proto屬性大多數瀏覽器的ES5 實現之中，每一個對象都有 proto_屬性，指應的構造函數的prototype 屬性。Class 作為構造函數的語法糖，同時有prototype 屬性和 proto 屬性，因此同時存在兩條繼承鏈。（1）子類的 proto 屬性，表示構造函數的繼承，總是指向父類。（2）子類 prototype 屬性的 proto 屬性，表示方法的繼承，總是指向父類的prototype 屬性。上面代碼中，子類B 的 proto 屬性

21、指向父類A，子類B 的prototype 屬性的 proto 屬性指向父類A 的prototype 屬性。這樣的結果是因為，類的繼承是按照下面的模式實現的。對象的擴展一章給出過 Object.setPrototypeOf 方法的實現。因此，就得到了上面的結果。Object.setPrototypeOf(B.prototype, A.prototype);Object.setPrototypeOf = function (obj, proto) obj._proto = proto;return obj;class A class B / B 的實例繼承A 的實例 Object.setProto

22、typeOf(B.prototype, A.prototype);/ B 繼承A 的靜態(tài)屬性 Object.setPrototypeOf(B, A);class A class B extends A B. proto = A / trueB.prototype. proto = A.prototype / true這兩條繼承鏈，可以這樣理解：作為一個對象，子類（B）的原型（ proto 屬性）是父類（A）；作為一個構造函數，子類（B）的原型（prototype 屬性）是父類的實例。Extends 的繼承目標extends 關鍵字后面可以跟多種類型的值。上面代碼的A，只要是一個有 protot

23、ype 屬性的函數，就能被B 繼承。由于函數都有prototype 屬性，因此A 可以是任意函數。下面，三種特殊情況。第一種特殊情況，子類繼承Object 類。這種情況下，A 其實就是構造函數 Object 的，A 的實例就是 Object 的實例。第二種特殊情況，不存在任何繼承。class A class A extends Object A. proto = Object / trueA.prototype. proto = Ototype / trueclass B extends A B.prototype = new A();/ 等同于B.prototype. pr

24、oto_ = A.prototype;/ 等同于B.prototype. proto_ = A.prototype;Object.setPrototypeOf(B, A);/ 等同于B. proto_ = A;這種情況下，A 作為一個基類（即不存在任何繼承），就是一個普通函數，所以直接繼承Ftotype。但是，A 調用后返回一個空對象（即 Object 實例），所以A.prototype. proto 指向構造函數（Object）的prototype 屬性。第三種特殊情況，子類繼承 null。這種情況與第二種情況非常像。A 也是一個普通函數，所以直接繼承Funciton.

25、prototype。但是，A 調用后返回的對象不繼承任何方法，所以它的 proto 指向Ftotype，即實質上執(zhí)行了下面的代碼。Object.getPrototypeOf()Object.getPrototypeOf 方法可以用來從子類上獲取父類。因此，可以使用這個方法判斷，一個類是否繼承了另一個類。super 關鍵字super 這個關鍵字，有兩種用法，含義不同。（1）作為函數調用時（即 super(.args)），super 代表父類的構造函數。Object.getPrototypeOf(ColorPo) = Po/ trueclass C extends null

26、constructor() return Object.create(null); class A extends null A. proto = Ftotype / trueA.prototype. proto = undefined / trueA. proto = Ftotype / trueA.prototype. proto = Ototype / true（2）作為對象調用時（即 suprop 或super.method()），super 代表父類。注意，此時 super 即可以父類實例的屬性和方法，也可以父類的靜態(tài)方法

27、。上面代碼中，子類通過 super 關鍵字，調用父類實例的_p 屬性。由于，對象總是繼承其他對象的，所以可以在任意一個對象中，使用 super 關鍵字。實例的proto屬性子類實例的proto屬性的proto屬性，指向父類實例的proto屬性。也就是說，子類的原型的原型，是父類的原型。上面代碼中，ColorPo繼承了 Po，導致前者原型的原型是后者的原型。因此，通過子類實例的 proto ._proto 屬性，可以修改父類實例的行為。var p1 = new Po(2, 3);var p2 = new ColorPo(2, 3, red);p2. proto = p1. proto_ / fa

28、lsep2. proto ._proto = p1. proto / truevar obj = toString() return MyObject: + super.toString();obj.toString(); / MyObject: object Objectclass B extends A get m() return this._p * super._p;set m() throw new Error(該屬性只讀);p2. proto . proto .prconsole.log(Ha);Name = function () p1.prName() / Ha上面代碼在 Co

29、lorPo的實例 p2 上向Po類添加方法，結果影響到了 Po的實例 p1。原生構造函數的繼承原生構造函數是指語言內置的構造函數，通常用來生成數據結構。ECMAScript 的原生構造函數大致有下面這些。()Number()String()Array()Date()Function()RegExp()Error()Object()以前，這些原生構造函數是無法繼承的，比如，不能自己定義一個 Array 的子類。function MyArray() Array.apply(this, arguments);MyAtotype = Object.create(Atot

30、ype, constructor: value: MyArray, writable: true, configurable: true, enumerable: true);上面代碼定義了一個繼承Array 的 MyArray 類。但是，這個類的行為與 Array 完全不一致。之所以會發(fā)生這種情況，是因為子類無法獲得原生構造函數的屬性，通過。ES5 是先新建子類的實例對象 this，再屬性無法獲取，導致無法繼承原生的構造Array.apply()或者分配給原型對象都將父類的屬性添加到子類上，由于父類的函數。比如，Array 構造函數有一個屬性DefineOwnProperty，用來定義新屬性

31、時，更新 length 屬性，這個行為不正常。屬性無法在子類獲取，導致子類的 length 屬性ES6 允許繼承原生構造函數定義子類，因為 ES6 是先新建父類的實例對象 this，然后再用子類的構造函數修飾 this，使得父類的所有行為都可以繼承。下面是一個繼承Array 的例子。上面代碼定義了一個 MyArray 類，繼承了 Array 構造函數，因此就可以從 MyArray 生成數組的實例。這意味著，ES6 可以自定義原生數據結構（比如Array、String 等）的子類，這是ES5 無法做到的。上面這個例子也說明，extends 關鍵字不僅可以用來繼承類，還可以用來繼承原生的構造函數。

32、因此可以在原生數據結構的基礎上，定義自己的數據結構。下面就是定義了一個帶版本功能的數組。class MyArray extends Array constructor(.args) super(.args);var arr = new MyArray(); arr0 = 12;arr.length / 1arr.length = 0; arr0 / undefinedvar colors = new MyArray(); colors0 = red; colors.length / 0colors.length = 0;colors0 / red上面代碼中，VeredArray 結構會通過co

33、mmit 方法，將自己的當前狀態(tài)存入history 屬性，然后通過 revert 方法，可以撤銷當前版本，回到上一個版本。除此之外，VeredArray 依然是一個數組，所有原生的數組方法都可以在它上面調用。下面是一個自定義 Error 子類的例子。class ExtendableError extends Error constructor(message) super();this.message = message; this.stack = (new Error().stack; = ;class VeredArray ex

34、tends Array constructor() super(); this.history = ;commit() this.history.push(this.slice();revert() this.splice(0, this.length, .this.historythis.history.length -1);var x = new VeredArray();x.push(1);x.push(2);x / 1, 2x.history / mit();x.history / , 1, 2x.push(3); x / 1, 2, 3x.revert();x / 1, 2注意，繼承

35、 Object 的子類，有一個行為差異。上面代碼中，NewObj 繼承了 Object，但是無法通過 super 方法向父類 Object 傳參。這是因為ES6 改變了Object 構造函數的行為，一旦發(fā)現 Object 方法不是通過 newObject()這種形式調用，ES6 規(guī)定 Object 構造函數會忽略參數。Class 的取值函數（getter）和存值函數（setter）與ES5 一樣，在Class可以使用 get 和 set 關鍵字，對某個屬性設置存值函數和取值函數，該屬性的存取行為。class MyClass constructor() / . get prop() return

36、 getter;claewObj extends Object constructor()super(.arguments);var o = new NewObj(attr: true); console.log(o.attr = true); / falseclass MyError extends ExtendableError constructor(m) super(m);var myerror = new MyError(ll);myerror.message / llmyerror instanceof Error / / MyErrormyerr

37、or.stack/ Error/at MyError.ExtendableError/.上面代碼中，prop 屬性有對應的存值函數和取值函數，因此賦值和義了。行為都被自定存值函數和取值函數是設置在屬性的descriptor 對象上的。上面代碼中，存值函數和取值函數是定義在 html 屬性的描述對象上面，這與 ES5 完全一致。class CustomHTMLElement constructor(element) this.element = element;get html() return this.element.innerHTML;set html(value) this.elemen

38、t.innerHTML = value;var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLEtotype, html);get in descriptor / trueset in descriptor / trueset prop(value) console.log(setter: +value);let inst = new MyClass();p = 123;/ setter: 123 p/ getterClass 的 Generator 方法如果某個方法之前加上星號

39、（*），就表示該方法是一個Generator 函數。class Foo constructor(.args) this.args = args;* Symbol.iterator() for (let arg of this.args) yield arg;for (let x of new Foo(console.log(x);o, world) /o/ world上面代碼中，Foo 類的Symbol.iterator 方法前有一個星號，表示該方法是一個Generator 函數。Symbol.iterator 方法返回一個Foo 類的默認遍歷器，for.of 循環(huán)會自動調用這個遍歷器。Cla

40、ss 的靜態(tài)方法類相當于實例的原型，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態(tài)方法”。class Foo sic classMethod() return o;Foo.classMethod() / ovar foo = new Foo();sic上面代碼中，類的方法前有關鍵字，表明該方法是一個靜態(tài)方法，可以直接在 Foo 類上調用（Foo.classMethod()），而不是在 Foo 類的實例上調用。如果在實例上調用靜態(tài)方拋出一個錯誤，表示不存在該方法。父類的靜態(tài)方法，可以被子類繼承。class Fo

41、o sic classMethod() return o;class Bar extends Foo Bar.classMethod(); / o上面代碼中，父類 Foo 有一個靜態(tài)方法，子類Bar 可以調用這個方法。靜態(tài)方法也是可以從 super 對象上調用的。class Foo sic classMethod() return o;class Bar extends Foo sic classMethod() return super.classMethod() + ,too;Bar.classMethod();Class 的靜態(tài)屬性和實例屬性sicclassMethodFoofoo.cl

42、assMethod()/ TypeError: undefined is not a function靜態(tài)屬性指的是Class 本身的屬性，即 Cpname，而不是定義在實例對象（this）上的屬性。上面的寫法為 Foo 類定義了一個靜態(tài)屬性 prop。目前，只有這種寫法可行，因為ES6 明確規(guī)定，Class屬性。只有靜態(tài)方法，沒有靜態(tài) / 寫法二 sic prop: 2ES7 有一個靜態(tài)屬性的提案，目前Babel 轉支持。這個提案對實例屬性和靜態(tài)屬性，都規(guī)定了新的寫法。（1）類的實例屬性類的實例屬性可以用等式，寫入類的定義之中。上面代碼中，myProp 就是 MyClass

43、的實例屬性。在 MyClass 的實例上，可以個屬性。這以前，定義實例屬性，只能寫在類的constructor 方法里面。class MyClass myProp = 42;constructor() console.log(this.myProp); / 42 Fp / undefined/ 以下兩種寫法都無效 class Foo / 寫法一 prop: 2class Foo Fp = 1;Fp / 1this.se = 上面代碼中，構造方法里面，定義了this.se 屬性。有了新的寫法以后，可以不在 constructor 方法里面定義。 se = 這種

44、寫法比以前更清晰。為了可讀性的目的，對于那些在 constructor 里面已經定義的實例屬性，新寫法允許直接列出。（2）類的靜態(tài)屬性類的靜態(tài)屬性只要在上面的實例屬性寫法前面，加上 sic 關鍵字就可以了。 sic mySicProp = 42;class MyClass class ReactCounter extendsponent constructor(props) suprops);this.se = count: 0;se;count: 0;class ReactCounter extendsponent constructorcount: 0;class ReactCounter

45、 extendsponent constructor(props) suprops);同樣的，這個新寫法大大方便了靜態(tài)屬性的表達。上面代碼中，老寫法的靜態(tài)屬性定義在類的外部。整個類生成以后，再生成靜態(tài)屬性。這樣讓人很容易忽略這個靜態(tài)屬性，也不符合相關代碼應該放在一起的代碼組織原則。（declarative），而不是賦值處理，語義更好。另外，新寫法是顯式new.屬性令。ES6 為是從構造函數生成實例命令引入了一個屬性，（在構造函數中）返回 new 命令作用于的那個構造函數。如果構造函數不是通過 new命令調用的，會返回，因此這個屬性可以用來確定構造函數是怎么調用的。function (name) if (new.!= undefined) e