ES6之清楚明白的使用類(class)

2022-09-09 05:00:14 字數 3745 閱讀 1554

類是建構函式、原型鏈的語法糖。

定義類有兩種方式

class student 

var student = class

某些瀏覽器可能無法解析es6及以上的語法,這時候需要通過babel將**解析成瀏覽器可識別的語法,定義類的語法通過babel編譯之後就是通過function定義的建構函式。

類和建構函式是一樣的,通過new關鍵字建立,具有prototype屬性

class student{}

var student = new student()

console.log(student.prototype)

console.log(student.prototype.constructor)

console.log(student.__proto__ === student.prototype)

console.log(student instanceof student)

console.log(typeof student)

執行結果如下

構造方法

通過constructor來定義類的構造方法,通過new關鍵字來建立類的例項時會執行構造方法中的**

class student 

}var student = new student('alice', 18)

console.log(student)

執行結果如下,建立了乙個student的例項物件

babel解析結果如下

例項方法

例項方法就是掛載在類(建構函式)原型上的方法,可以供所有的例項物件使用,不會在每個例項物件上儲存乙份

class student 

studying() likes studing~`)

}}var student = new student('kiki', 16)

console.log(student)

student.studying()

執行結果如下

訪問器方法

訪問器方法可以用於獲取/修改類中的屬性

class student 

get subject()

set subject(value)

}var student = new student()

console.log(student)

student.mainsubject = 'math'

console.log(student)

執行結果如下

靜態方法

定義在類(建構函式)上,且僅供類(建構函式)自身可使用

class student 

}student.showinfo()

執行結果如下

類中實現繼承要比建構函式中更為簡單,通過extends關鍵字就可以實現兩個類的繼承關係。

class person

}class student extends person

var student = new student()

console.log(student)

student.eating()

執行結果如下

如果要共享構造方法中的資料,則需要通過super來實現

class person

eating()

}class student extends person

eating()

}var student = new student('kiki', 16, 1)

console.log(student)

student.eating()

執行結果如下

當我們需要對j**ascript內建的函式做一些擴充的時候,可以繼承自內建的函式。比如對陣列進行補充,新增乙個返回陣列中第乙個元素的方法。

class iarray extends array 

}let arr = new iarray(1, 2, 3)

console.log(arr)

console.log(arr.firstitem())

執行結果如下

j**ascript中只能單繼承,不支援多個父類,當子類希望獲取多個父類的屬性和方法時,可以自定義mixin的方式來實現繼承關係

function mixinrunner(baseclass) 

}}function mixineater(baseclass)

}}class person

const student = mixineater(mixinrunner(person))

const student = new student()

student.running()

student.eating()

執行結果如下

不同的資料型別操作執行同乙個操作時,表現出來的行為不一致,就稱為多型。

function calcarea(foo) 

var circle =

}function person()

}calcarea(circle)

calcarea(new person())

執行結果如下

以上執行兩次calcarea函式,傳入的引數分別為普通物件和例項物件,執行他們各自的getarea方法,最後獲取的結果也不一樣

以上就是es6之類(class)使用的具體介紹,關於js高階,還有很多需要開發者掌握的地方,可以看看我寫的其他博文,持續更新中~

es6中class類的使用

在es5中我們是使用建構函式例項化出來乙個物件,那麼建構函式與普通的函式有什麼區別呢?其實沒有區別,無非就是函式名稱用首字母大寫來加以區分,這個不用對說對es5有了解的朋友都應該知道。但是es5的這種方式給人的感覺還是不夠嚴謹,於是在es6中就換成了class,就是把es5中的function換成了...

ES6 細化ES6之 物件的擴充套件

物件的屬性 屬性表示法es6 允許在大括號裡面,直接寫入變數和函式,作為物件的屬性和方法 es5 let name 張無忌 function sayme es5定義物件的屬性和方法的方式 var obj console.log obj.name 張無忌es6 let name 張無忌 functio...

es6 類的繼承

function animal name animal.prototype.drink function animal.prototype.eat function item function dog name,breed animal.prototype dog.prototype animal....