国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JavaScript之class繼承_動力節點Java學院整理

2019-11-19 16:11:53
字體:
來源:轉載
供稿:網友

JavaScript的對象模型是基于原型實現的,特點是簡單,缺點是理解起來比傳統的類-實例模型要困難,最大的缺點是繼承的實現需要編寫大量代碼,并且需要正確實現原型鏈。

有沒有更簡單的寫法?有!

新的關鍵字class從ES6開始正式被引入到JavaScript中。class的目的就是讓定義類更簡單。

我們先回顧用函數實現Student的方法:

function Student(name) {  this.name = name;}Student.prototype.hello = function () {  alert('Hello, ' + this.name + '!');}

如果用新的class關鍵字來編寫Student,可以這樣寫:

class Student {  constructor(name) {    this.name = name;  }  hello() {    alert('Hello, ' + this.name + '!');  }}

比較一下就可以發現,class的定義包含了構造函數constructor和定義在原型對象上的函數hello()(注意沒有function關鍵字),這樣就避免了Student.prototype.hello = function () {...}這樣分散的代碼。

最后,創建一個Student對象代碼和前面章節完全一樣:

var xiaoming = new Student('小明');xiaoming.hello();

class繼承

用class定義對象的另一個巨大的好處是繼承更方便了。想一想我們從Student派生一個PrimaryStudent需要編寫的代碼量。現在,原型繼承的中間對象,原型對象的構造函數等等都不需要考慮了,直接通過extends來實現:

class PrimaryStudent extends Student {  constructor(name, grade) {    super(name); // 記得用super調用父類的構造方法!    this.grade = grade;  }  myGrade() {    alert('I am at grade ' + this.grade);  }}

注意PrimaryStudent的定義也是class關鍵字實現的,而extends則表示原型鏈對象來自Student。子類的構造函數可能會與父類不太相同,例如,PrimaryStudent需要namegrade兩個參數,并且需要通過super(name)來調用父類的構造函數,否則父類的name屬性無法正常初始化。

PrimaryStudent已經自動獲得了父類Studenthello方法,我們又在子類中定義了新的myGrade方法。

ES6引入的class和原有的JavaScript原型繼承有什么區別呢?實際上它們沒有任何區別,class的作用就是讓JavaScript引擎去實現原來需要我們自己編寫的原型鏈代碼。簡而言之,用class的好處就是極大地簡化了原型鏈代碼。

你一定會問,class這么好用,能不能現在就用上?

現在用還早了點,因為不是所有的主流瀏覽器都支持ES6的class。如果一定要現在就用上,就需要一個工具把class代碼轉換為傳統的prototype代碼,可以試試Babel這個工具。

練習

請利用class重新定義Cat,并讓它從已有的Animal繼承,然后新增一個方法say(),返回字符串 'Hello, xxx!'

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 双柏县| 绩溪县| 綦江县| 涿州市| 乌审旗| 灵武市| 石棉县| 措美县| 九台市| 永城市| 荔浦县| 新河县| 庆阳市| 陕西省| 德钦县| 钟山县| 大丰市| 汾西县| 吉木乃县| 卢氏县| 濮阳市| 普定县| 黑河市| 梧州市| 秭归县| 广汉市| 红河县| 古浪县| 盐池县| 仁化县| 遂宁市| 米林县| 磴口县| 财经| 南安市| 盐山县| 成武县| 文昌市| 赤水市| 当雄县| 宜阳县|