建站
咨詢
售后
建站咨詢
新聞中心
在ES6中，class (類)作為對(duì)象的模板被引入，可以通過 class 關(guān)鍵字定義類，class 的本質(zhì)是 function，它可以看作一個(gè)語法糖，讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法，下面為大家詳細(xì)講解一下ES6 Class 。
基礎(chǔ)用法
類定義
類表達(dá)式可以為匿名或命名。
// 匿名類
let Example = class {
constructor(a) {
this.a = a;
}
}
// 命名類
let Example = class Example {
constructor(a) {
this.a = a;
}
}
類聲明
class Example {
constructor(a) {
this.a = a;
}
}
注意要點(diǎn)：不可重復(fù)聲明。
class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been
// declared
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been
// declared
注意要點(diǎn)
類定義不會(huì)被提升，這意味著，必須在訪問前對(duì)類進(jìn)行定義，否則就會(huì)報(bào)錯(cuò)。
類中方法不需要 function 關(guān)鍵字。
方法間不能加分號(hào)。
new Example();
class Example {}
類的主體
屬性
prototype
ES6 中，prototype 仍舊存在，雖然可以直接自類中定義方法，但是其實(shí)方法還是定義在 prototype 上的。 覆蓋方法 / 初始化時(shí)添加方法
Example.prototype={
//methods
}
添加方法
Object.assign(Example.prototype,{
//methods
})
靜態(tài)屬性
靜態(tài)屬性：class 本身的屬性，即直接定義在類內(nèi)部的屬性（ Class.propname ），不需要實(shí)例化。 ES6 中規(guī)定，Class 內(nèi)部只有靜態(tài)方法，沒有靜態(tài)屬性。
class Example {
// 新提案
static a = 2;
}
// 目前可行寫法
Example.b = 2;
公共屬性
class Example{}
Example.prototype.a = 2;
實(shí)例屬性
實(shí)例屬性：定義在實(shí)例對(duì)象（ this ）上的屬性。
class Example { a = 2; constructor () { console.log(this.a); }}
name 屬性
返回跟在 class 后的類名(存在時(shí))。
let Example=class Exam { constructor(a) { this.a = a; }}console.log(Example.name); // Examlet Example=class { constructor(a) { this.a = a; }}console.log(Example.name); // Example
方法
constructor 方法
constructor 方法是類的默認(rèn)方法，創(chuàng)建類的實(shí)例化對(duì)象時(shí)被調(diào)用。
class Example{ constructor(){ console.log('我是constructor'); }}new Example(); // 我是constructor
返回對(duì)象
class Test { constructor(){ // 默認(rèn)返回實(shí)例對(duì)象 this }}console.log(new Test() instanceof Test); // trueclass Example { constructor(){ // 指定返回對(duì)象 return new Test(); }}console.log(new Example() instanceof Example); // false
靜態(tài)方法
class Example{ static sum(a, b) { console.log(a+b); }}Example.sum(1, 2); // 3
原型方法
class Example { sum(a, b) { console.log(a + b); }}let exam = new Example();exam.sum(1, 2); // 3
實(shí)例方法
class Example { constructor() { this.sum = (a, b) => { console.log(a + b); } }}
類的實(shí)例化
new
class 的實(shí)例化必須通過 new 關(guān)鍵字。
class Example {}let exam1 = Example();// Class constructor Example cannot be invoked without 'new'
實(shí)例化對(duì)象
共享原型對(duì)象
class Example { constructor(a, b) { this.a = a; this.b = b; console.log('Example'); } sum() { return this.a + this.b; }}let exam1 = new Example(2, 1);let exam2 = new Example(3, 1);console.log(exam1._proto_ == exam2._proto_); // trueexam1._proto_.sub = function() { return this.a - this.b;}console.log(exam1.sub()); // 1console.log(exam2.sub()); // 2
decorator
decorator 是一個(gè)函數(shù)，用來修改類的行為，在代碼編譯時(shí)產(chǎn)生作用。
類修飾
一個(gè)參數(shù)
第一個(gè)參數(shù) target，指向類本身。
function testable(target) { target.isTestable = true;}@testableclass Example {}Example.isTestable; // true
多個(gè)參數(shù)——嵌套實(shí)現(xiàn)
function testable(isTestable) { return function(target) { target.isTestable=isTestable; }}@testable(true)class Example {}Example.isTestable; // true
實(shí)例屬性
上面兩個(gè)例子添加的是靜態(tài)屬性，若要添加實(shí)例屬性，在類的 prototype 上操作即可。
方法修飾
3個(gè)參數(shù)：target（類的原型對(duì)象）、name（修飾的屬性名）、descriptor（該屬性的描述對(duì)象）。
class Example { @writable sum(a, b) { return a + b; }}function writable(target, name, descriptor) { descriptor.writable = false; return descriptor; // 必須返回}
修飾器執(zhí)行順序
由外向內(nèi)進(jìn)入，由內(nèi)向外執(zhí)行。
class Example { @logMethod(1) @logMthod(2) sum(a, b){ return a + b; }}function logMethod(id) { console.log('evaluated logMethod'+id); return (target, name, desctiptor) => console.log('excuted logMethod '+id);}// evaluated logMethod 1// evaluated logMethod 2// excuted logMethod 2// excuted logMethod 1
封裝與繼承
getter / setter
定義
class Example{ constructor(a, b) { this.a = a; // 實(shí)例化時(shí)調(diào)用 set 方法 this.b = b; } get a(){ console.log('getter'); return this.a; } set a(a){ console.log('setter'); this.a = a; // 自身遞歸調(diào)用 }}let exam = new Example(1,2); // 不斷輸出 setter ，最終導(dǎo)致 RangeErrorclass Example1{ constructor(a, b) { this.a = a; this.b = b; } get a(){ console.log('getter'); return this._a; } set a(a){ console.log('setter'); this._a = a; }}let exam1 = new Example1(1,2); // 只輸出 setter , 不會(huì)調(diào)用 getter 方法console.log(exam._a); // 1, 可以直接訪問
getter 不可單獨(dú)出現(xiàn)
class Example { constructor(a) { this.a = a; } get a() { return this.a; }}let exam = new Example(1); // Uncaught TypeError: Cannot set property // a of # which has only a getter
getter 與 setter 必須同級(jí)出現(xiàn)
class Father { constructor(){} get a() { return this._a; }}class Child extends Father { constructor(){ super(); } set a(a) { this._a = a; }}let test = new Child();test.a = 2;console.log(test.a); // undefinedclass Father1 { constructor(){} // 或者都放在子類中 get a() { return this._a; } set a(a) { this._a = a; }}class Child1 extends Father1 { constructor(){ super(); }}let test1 = new Child1();test1.a = 2;console.log(test1.a); // 2
extends
通過 extends 實(shí)現(xiàn)類的繼承。
class Child extends Father { ... }
super
子類 constructor 方法中必須有 super ，且必須出現(xiàn)在 this 之前。
class Father { constructor() {}}class Child extends Father { constructor() {} // or // constructor(a) { // this.a = a; // super(); // }}let test = new Child(); // Uncaught ReferenceError: Must call super// constructor in derived class before accessing 'this' or returning// from derived constructor
調(diào)用父類構(gòu)造函數(shù),只能出現(xiàn)在子類的構(gòu)造函數(shù)。
class Father {
test(){
return 0;
}
static test1(){
return 1;
}
}
class Child extends Father {
constructor(){
super();
}
}
class Child1 extends Father {
test2() {
super(); // Uncaught SyntaxError: 'super' keyword unexpected
// here
}
}
調(diào)用父類方法, super 作為對(duì)象，在普通方法中，指向父類的原型對(duì)象，在靜態(tài)方法中，指向父類
class Child2 extends Father {
constructor(){
super();
// 調(diào)用父類普通方法
console.log(super.test()); // 0
}
static test3(){
// 調(diào)用父類靜態(tài)方法
return super.test1+2;
}
}
Child2.test3(); // 3
注意要點(diǎn)
不可繼承常規(guī)對(duì)象。
var Father = {
// ...
}
class Child extends Father {
// ...
}
// Uncaught TypeError: Class extends value #
新聞標(biāo)題：詳解ES6Class
URL標(biāo)題：http://m.fisionsoft.com.cn/article/djjigpd.html
