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

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號
久久五月精品中文字幕| 国产在线91区精品| 久久精品人人做人人爽| 精品国产污污免费网站入口| 日韩AV影院在线观看| 岛国精品在线观看| 999久久久无码国产精品| 97在线视频精品| 日韩精品一区二区亚洲AV观看| 精品国产福利久久久| 久夜色精品国产一区二区三区| 亚洲精品成人久久久| 亚洲 日韩经典 中文字幕| 国产精品免费小视频| 国内精品自产拍在线观看| 亚洲精品无码国产片| 69久久夜色精品国产69| 精品无码一区二区三区在线 | 亚洲国产精品久久久久婷婷老年| 亚洲精品成人无码中文毛片不卡| 香蕉伊思人在线精品| 精品国产一区二区三区AV性色| 国产精品内射久久久久欢欢| 亚洲人成国产精品无码| 乱人伦精品视频在线观看| 日本Aⅴ大伊香蕉精品视频| 青青久久精品国产免费看| 日韩在线免费看网站| 日韩一级在线播放免费观看| 日韩精品高清在线| 黑人巨大精品播放| 亚洲AⅤ永久无码精品AA| 亚洲国产精品自在拍在线播放| 2022年国产精品久久久久| 国产偷国产偷高清精品| 久久久久久极精品久久久| 99精品视频在线观看re| 国产精品无圣光一区二区| 国产成人精品日本亚洲| 久久这里只有精品66re99| 午夜精品久久久久久中宇|