class類是es6語法,是es6新增的一種特性。ES6中,引入了class關鍵字用于快速地定義“類”,但是類的本質是function;它可以看作一個語法糖,讓對象原型的寫法更加清晰、更像面向對象編程的語法。用class定義類的方法“class Person{//類聲明}”或“const Person=class{//類表達式}”。
前端(vue)入門到精通課程:進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具:點擊使用
本教程操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
class類是es6語法,是es6新增的一種特性。
ES6中,引入了class關鍵字用于快速地定義“類”。
在JS中,“類”的本質是function,可以將其看做一個語法糖,讓對象原型的寫法更簡潔清晰,更像面向對象編程的語法。
認識class定義類
我們會發現,按照前面的構造函數形式創建 類,不僅僅和編寫普通的函數過于相似,而且代碼并不容易理解。
在ES6(ECMAScript2015)新的標準中使用了class關鍵字來直接定義類;但是類本質上依然是前面所講的構造函數、原型鏈的語法糖而已;所以學好了前面的構造函數、原型鏈更有利于我們理解類的概念和繼承關系;
那么,如何使用class來定義一個類呢?–可以使用兩種方式來聲明類:類聲明和類表達式;
class Person{ //類聲明 } const Person=class{ //類表達式 }
類和構造函數的異同
我們來研究一下類的一些特性:你會發現它和我們的構造函數的特性其實是一致的;
console.log(Person.prototype) console.log(Person.prototype.__proto__)//Object null console.log(Person.prototype.constructor)//Person console.log(typeof Person) // function var p = new Person() console.log(p.__proto__ === Person.prototype) // true
類的構造函數
如果我們希望在創建對象的時候給類傳遞一些參數,這個時候應該如何做呢?
- 每個類都可以有一個自己的構造函數(方法),這個方法的名稱是固定的constructor;
- 當我們通過new操作符,操作一個類的時候會調用這個類的構造函數constructor;
- 每個類只能有一個構造函數,如果包含多個構造函數,那么會拋出異常;
當我們通過new關鍵字操作類的時候,會調用這個constructor函數,并且執行如下操作:
- 1.在內存中創建一個新的對象(空對象);
- 2.這個對象內部的[[prototype]]屬性會被賦值為該類的prototype屬性;
- 3.構造函數內部的this,會指向創建出來的新對象;
- 4.執行構造函數的內部代碼(函數體代碼);
- 5.如果構造函數沒有返回非空對象,則返回創建出來的新對象;
類的實例方法
在上面我們定義的屬性都是直接放到了this上,也就意味著它是放到了創建出來的新對象中:
在前面我們說過對于實例的方法,我們是希望放到原型上的,這樣可以被多個實例來共享;
這個時候我們可以直接在類中定義;
class Person { constructor(name, age) { this.name = name this.age = age this._address = "廣州市" } // 普通的實例方法 // 創建出來的對象進行訪問 // var p = new Person() // p.eating() eating() { console.log(this.name + " eating~") } running() { console.log(this.name + " running~") } }
類的訪問器方法
我們之前講對象的屬性描述符時有講過對象可以添加setter和getter函數的,那么類也是可以的:
class Person { constructor(name, age) { this.name = name this.age = age this._address = "廣州市" } // 類的訪問器方法 get address() { console.log("攔截訪問操作") return this._address } set address(newAddress) { console.log("攔截設置操作") this._address = newAddress } }
類的靜態方法
靜態方法通常用于定義直接使用類來執行的方法,不需要有類的實例,使用static關鍵字來定義:
class Person { constructor(name, age) { this.name = name this.age = age this._address = "廣州市" } // 類的靜態方法(類方法) // Person.createPerson() static randomPerson() { var nameIndex = Math.floor(Math.random() * names.length) var name = names[nameIndex] var age = Math.floor(Math.random() * 100) return new Person(name, age) } }
ES6類的繼承 – extends
前面我們花了很大的篇幅討論了在ES5中實現繼承的方案,雖然最終實現了相對滿意的繼承機制,但是過程卻依然是非常繁瑣的。在ES6中新增了使用extends關鍵字,可以方便的幫助我們實現繼承:
class Person{ } class Student extends Person{ }
super關鍵字
我們會發現在上面的代碼中我使用了一個super關鍵字,這個super關鍵字有不同的使用方式:注意:在子(派生)類的構造函數中使用this或者返回默認對象之前,必須先通過super調用父類的構造函數!
super的使用位置有三個:子類的構造函數、實例方法、靜態方法;
繼承內置類
我們也可以讓我們的類繼承自內置類,比如Array:
class HYArray extends Array { firstItem() { return this[0] } lastItem() { return this[this.length-1] } } var arr = new HYArray(1, 2, 3) console.log(arr.firstItem()) console.log(arr.lastItem())
類的混入mixin
JavaScript的類只支持單繼承:也就是只能有一個父類 。那么在開發中我們我們需要在一個類中添加