文章目錄

• 1. 聲明類
• 2. Setters & Getters
• 3. 靜態(tài)方法
• 4. 繼承

Javascript是一種基于對(duì)象（object-based）的語(yǔ)言，你遇到的所有東西幾乎都是對(duì)象。但是，它又不是一種真正的面向?qū)ο缶幊?#xff08;OOP）語(yǔ)言，因?yàn)樗恼Z(yǔ)法中沒(méi)有class（類）。

對(duì)于面向?qū)ο缶幊潭?#xff0c;更關(guān)注類的聲明、屬性、方法、靜態(tài)方法、繼承、多態(tài)、私有屬性。

1. 聲明類

ES5 中聲明（構(gòu)造方法）：

let Animal = function(type) {// 屬性this.type = type// 方法this.walk = function() {console.log( `I am walking` )} } Animal.prototype.run = function() {console.log( `I am running` ) }let dog = new Animal('dog') let monkey = new Animal('monkey')

ES6 聲明Class類：

class Animal {// 構(gòu)造函數(shù)constructor(type) {this.type = type}// 方法walk() {console.log( `I am walking` )} } let dog = new Animal('dog') let monkey = new Animal('monkey')

class 的方式是 function 方式的語(yǔ)法糖

2. Setters & Getters

對(duì)于類中的屬性，可以直接在 constructor中通過(guò) this 直接定義，還可以直接在類的頂層來(lái)定義：

class Animal {constructor(type, age) {this.type = typethis._age = age}get age() {return this._age}set age(val) {this._age = val} }

設(shè)置制度屬性只需要把set方法去掉即可。

set/get可以控制在滿足條件下才執(zhí)行：

let #age = 1 class Animal {constructor(type) {this.type = type}get age() {return #age}set age(val) {if (val > 0 && val < 10) {#age = val}} }

3. 靜態(tài)方法

靜態(tài)方法是面向?qū)ο笞畛Ｓ玫墓δ?#xff0c;在 ES5 中利用 function 實(shí)現(xiàn)的類是這樣實(shí)現(xiàn)一個(gè)靜態(tài)方法的。

let Animal = function(type) {this.type = typethis.walk = function() {console.log( `I am walking` )} }Animal.eat = function(food) {console.log( `I am eating` ) }

在 ES6 中使用 static 的標(biāo)記是不是靜態(tài)方法，代碼如下：

class Animal {constructor(type) {this.type = type}walk() {console.log( `I am walking` )}static eat() {console.log( `I am eating` )} }

靜態(tài)方法是直接用類名訪問(wèn)的。

4. 繼承

在 ES5 中怎么實(shí)現(xiàn)繼承：

// 定義父類 let Animal = function(type) {this.type = type } Animal.prototype.walk = function() {console.log( `I am walking` ) }// 定義子類 let Dog = function() {// 初始化父類Animal.call(this, 'dog')this.run = function() {console.log('I can run')} } // 繼承 Dog.prototype = Animal.prototype

ES6 中的繼承：

// 父類 class Animal {constructor(type) {this.type = type}walk() {console.log( `I am walking` )} } // 子類繼承父類 class Dog extends Animal {constructor () {super('dog')}run () {console.log('I can run')} }

雖然 ES6 在類的定義上僅是 ES5 定義類的語(yǔ)法糖，但是從開發(fā)者的角度而言，開發(fā)更有效率了，代碼可閱讀性大大提升。

總結(jié)

以上是生活随笔為你收集整理的【ES6(2015)】Class (类)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。