站長資訊網
最全最豐富的資訊網站

class類是es6語法么

class類是es6語法,是es6新增的一種特性。ES6中,引入了class關鍵字用于快速地定義“類”,但是類的本質是function;它可以看作一個語法糖,讓對象原型的寫法更加清晰、更像面向對象編程的語法。用class定義類的方法“class Person{//類聲明}”或“const Person=class{//類表達式}”。

class類是es6語法么

前端(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的使用位置有三個:子類的構造函數、實例方法、靜態方法;

class類是es6語法么

繼承內置類

我們也可以讓我們的類繼承自內置類,比如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的類只支持單繼承:也就是只能有一個父類 。那么在開發中我們我們需要在一個類中添加

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
亚洲av无码成人精品区| 精品中文字幕久久久久久| 国产成人A人亚洲精品无码| 国产午夜福利精品一区二区三区| 日韩在线天堂免费观看| 国产伦精品一区二区三区免费下载| 久久久一本精品99久久精品36| 91大神精品全国在线观看| 国产成人亚洲精品影院 | 人妻老妇乱子伦精品无码专区| 四虎国产精品免费久久影院| 最新国产精品视频| 成人精品一区二区激情| 日本精品无码一区二区三区久久久 | 国产69精品久久久久99| 国产日韩在线观看视频网站| 78成人精品电影在线播放日韩精品电影一区亚洲 | 91免费福利精品国产| 99视频在线精品免费| 日韩一区精品视频一区二区| 久久久999久久久精品| 无码精品一区二区三区在线 | 精品久久人妻av中文字幕| 久久久91人妻无码精品蜜桃HD| www国产亚洲精品久久久日本| 老司机福利精品视频| segui久久综合精品| 亚洲七七久久精品中文国产 | 亚洲精品无码Av人在线观看国产| 久久精品国产亚洲精品| 久久99热这里只有精品国产| 久久久这里有精品中文字幕| 国产三级国产精品国产普男人| 九九热这里只有国产精品| 久久久久久久久久久免费精品| 2022免费国产精品福利在线| 精品偷自拍另类在线观看丰满白嫩大屁股ass| 精品亚洲一区二区三区在线观看 | 亚洲中文字幕久久精品无码APP| 少妇伦子伦精品无吗| 国精品午夜福利视频不卡麻豆 |