JavaScript面向?qū)ο笾钊肓私釫S6的class

更新時(shí)間：2022年03月18日 10:52:55 作者：MomentYY

class盡管只算是一個(gè)語(yǔ)法糖,但它卻是語(yǔ)言規(guī)范方面的一大成就,也對(duì)之前的繼承進(jìn)行了一定的增強(qiáng),下面這篇文章主要給大家介紹了關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的相關(guān)資料,需要的朋友可以參考下

前言

在前面一篇中主要介紹了JavaScript中使用構(gòu)造函數(shù)+原型鏈實(shí)現(xiàn)繼承，從實(shí)現(xiàn)的步驟來(lái)說(shuō)還是比較繁瑣的。在ES6中推出的class的關(guān)鍵字可以直接用來(lái)定義類(lèi)，寫(xiě)法類(lèi)似與其它的面向?qū)ο笳Z(yǔ)言，但是使用class來(lái)定義的類(lèi)其本質(zhì)上依然是構(gòu)造函數(shù)+原型鏈的語(yǔ)法糖而已，下面就一起來(lái)全面的了解一下class吧。

1.類(lèi)的定義

class關(guān)鍵字定義類(lèi)可使用兩種方式來(lái)定義：

class Person {} // 類(lèi)聲明
const Person = class {} // 類(lèi)表達(dá)式

2.類(lèi)的構(gòu)造函數(shù)

從上面class定義類(lèi)可以發(fā)現(xiàn)是沒(méi)有()讓我們來(lái)傳遞參數(shù)的，當(dāng)希望在實(shí)例化對(duì)象的給類(lèi)傳遞一些參數(shù)，這個(gè)時(shí)候就可以使用到類(lèi)的構(gòu)造函數(shù)constructor了。

每個(gè)類(lèi)都可以有一個(gè)自己的constructor方法，注意只能有一個(gè)，如果有多個(gè)會(huì)拋出異常；

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  constructor() {}
}

當(dāng)通過(guò)new操作符來(lái)操作類(lèi)時(shí)，就會(huì)去調(diào)用這個(gè)類(lèi)的constructor方法，并返回一個(gè)對(duì)象（具體new操作符調(diào)用函數(shù)時(shí)的默認(rèn)操作步驟在上一篇中有說(shuō)明）；

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

const p = new Person('curry', 30)
console.log(p) // Person { name: 'curry', age: 30 }

3.類(lèi)的實(shí)例方法

在構(gòu)造函數(shù)中實(shí)現(xiàn)方法繼承是將其放到構(gòu)造函數(shù)的原型上，而在class定義的類(lèi)中，可直接在類(lèi)中定義方法，最終class還是會(huì)幫我們放到其原型上，供多個(gè)實(shí)例來(lái)使用。

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log(this.name + 'is eating.')
  }

  running() {
    console.log(this.name + 'is running.')
  }
}

4.類(lèi)的訪問(wèn)器方法

在使用Object.defineProperty()方法來(lái)控制對(duì)象的屬性時(shí)，在其數(shù)據(jù)屬性描述符中可以使用setter和getter函數(shù)，在class定義的類(lèi)中，也是可以使用這兩個(gè)訪問(wèn)器方法的。

class Person {
  constructor(name, age) {
    this.name = name
    this._age = 30 // 使用_定義的屬性表示為私有屬性，不可直接訪問(wèn)
  }

  get age() {
    console.log('age被訪問(wèn)')
    return this._age
  }

  set age(newValue) {
    console.log('age被設(shè)置')
    this._age = newValue
  }
}

const p = new Person('curry', 30)
console.log(p) // Person { name: 'curry', _age: 30 }
p.age // age被訪問(wèn)
p.age = 24 // age被設(shè)置
console.log(p) // Person { name: 'curry', _age: 24 }

5.類(lèi)的靜態(tài)方法

什么叫類(lèi)的靜態(tài)方法呢？該方法不是供實(shí)例對(duì)象來(lái)使用的，而是直接加在類(lèi)本身的方法，可以使用類(lèi)名點(diǎn)出來(lái)的方法，可以使用static關(guān)鍵字來(lái)定義靜態(tài)方法。

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  static foo() {
    console.log('我是Person類(lèi)的方法')
  }
}

Person.foo() // 我是Person類(lèi)的方法

6.類(lèi)的繼承

6.1.extends關(guān)鍵字

在ES6之前實(shí)現(xiàn)繼承是不方便的，ES6中增加了extends關(guān)鍵字，可以方便的幫助我們實(shí)現(xiàn)類(lèi)的繼承。

實(shí)現(xiàn)Student子類(lèi)繼承自Person父類(lèi)：

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log(this.name + ' is eating.')
  }
}

class Student extends Person {
  constructor(sno) {
    this.sno = sno
  }

  studying() {
    console.log(this.name + ' is studying.')
  }
}

那么子類(lèi)如何使用父類(lèi)的屬性和方法呢？

6.2.super關(guān)鍵字

使用super關(guān)鍵字可以在子類(lèi)構(gòu)造函數(shù)中調(diào)用父類(lèi)的構(gòu)造函數(shù)，但是必須在子類(lèi)構(gòu)造函數(shù)中使用this或者返回默認(rèn)對(duì)象之前使用super。

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log(this.name + ' is eating.')
  }
}

class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }

  studying() {
    console.log(this.name + ' is studying.')
  }
}

const stu = new Student('curry', 30, 101111)
console.log(stu) // Student { name: 'curry', age: 30, sno: 101111 }
// 父類(lèi)的方法可直接調(diào)用
stu.eating() // curry is eating.
stu.studying() // curry is studying.

但是super關(guān)鍵字的用途并不僅僅只有這個(gè)，super關(guān)鍵字一般可以在三個(gè)地方使用：

子類(lèi)的構(gòu)造函數(shù)中（上面的用法）；
實(shí)例方法中：子類(lèi)不僅可以重寫(xiě)父類(lèi)中的實(shí)例方法，還可以通過(guò)super關(guān)鍵字復(fù)用父類(lèi)實(shí)例方法中的邏輯代碼；

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log(this.name + ' is eating.')
  }

  parentMethod() {
    console.log('父類(lèi)邏輯代碼1')
    console.log('父類(lèi)邏輯代碼2')
    console.log('父類(lèi)邏輯代碼3')
  }
}

class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }

  // 直接重寫(xiě)父類(lèi)eating方法
  eating() {
    console.log('Student is eating.')
  }

  // 重寫(xiě)父類(lèi)的parentMethod方法，并且復(fù)用邏輯代碼
  parentMethod() {
    // 通過(guò)super調(diào)用父類(lèi)方法，實(shí)現(xiàn)復(fù)用
    super.parentMethod()

    console.log('子類(lèi)邏輯代碼4')
    console.log('子類(lèi)邏輯代碼5')
    console.log('子類(lèi)邏輯代碼6')
  }
}

靜態(tài)方法中：用法就和實(shí)例方法的方式一樣了；

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  static parentMethod() {
    console.log('父類(lèi)邏輯代碼1')
    console.log('父類(lèi)邏輯代碼2')
    console.log('父類(lèi)邏輯代碼3')
  }
}

class Student extends Person {
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }

  // 重寫(xiě)父類(lèi)的parentMethod靜態(tài)方法，并且復(fù)用邏輯代碼
  static parentMethod() {
    // 通過(guò)super調(diào)用父類(lèi)靜態(tài)方法，實(shí)現(xiàn)復(fù)用
    super.parentMethod()

    console.log('子類(lèi)邏輯代碼4')
    console.log('子類(lèi)邏輯代碼5')
    console.log('子類(lèi)邏輯代碼6')
  }
}

Student.parentMethod()

6.3.繼承內(nèi)置類(lèi)

extends關(guān)鍵字不僅可以實(shí)現(xiàn)繼承我們自定義的父類(lèi)，還可以繼承JavaScript提供的內(nèi)置類(lèi)，可對(duì)內(nèi)置類(lèi)的功能進(jìn)行擴(kuò)展。

比如，在Array類(lèi)上擴(kuò)展兩個(gè)方法，一個(gè)方法獲取指定數(shù)組的第一個(gè)元素，一個(gè)方法數(shù)組的最后一個(gè)元素：

class myArray extends Array {
  firstItem() {
    return this[0]
  }

  lastItem() {
    return this[this.length - 1]
  }
}

const arr = new myArray(1, 2, 3)
console.log(arr) // myArray(3) [ 1, 2, 3 ]
console.log(arr.firstItem()) // 1
console.log(arr.lastItem()) // 3

7.類(lèi)的混入

何為類(lèi)的混入？在上面的演示代碼中，都只實(shí)現(xiàn)了子類(lèi)繼承自一個(gè)父類(lèi)，因?yàn)镴avaScript的類(lèi)只支持單繼承，不能繼承自多個(gè)類(lèi)。如果非要實(shí)現(xiàn)繼承自多個(gè)類(lèi)呢？那么就可以引入混入（Mixin）的概念了。

看看JavaScript中通過(guò)代碼如何實(shí)現(xiàn)混入效果：

// 封裝混入Animal類(lèi)的函數(shù)
function mixinClass(BaseClass) {
  // 返回一個(gè)匿名類(lèi)
  return class extends BaseClass {
    running() {
      console.log('running...')
    }
  }
}

class Person {
  eating() {
    console.log('eating...')
  }
}

class Student extends Person {
  studying() {
    console.log('studying...')
  }
}

const NewStudent = mixinClass(Student)
const stu = new NewStudent
stu.running() // running...
stu.eating() // eating...
stu.studying() // studying...

混入的實(shí)現(xiàn)一般不常用，因?yàn)閰?shù)不太好傳遞，過(guò)于局限，在JavaScript中單繼承已經(jīng)足夠用了。

8.class定義類(lèi)轉(zhuǎn)ES5

上面介紹ES6中類(lèi)的各種使用方法，極大的方便了我們對(duì)類(lèi)的使用。我們?cè)谌粘ｉ_(kāi)發(fā)中編寫(xiě)的ES6代碼都是會(huì)被babel解析成ES5代碼，為了對(duì)低版本瀏覽器做適配。那么使用ES6編寫(xiě)的類(lèi)被編譯成ES5語(yǔ)法會(huì)是什么樣呢？通過(guò)babel官網(wǎng)的試一試可以清楚的看到ES6語(yǔ)法轉(zhuǎn)成ES5后的樣子。

剛開(kāi)始通過(guò)執(zhí)行自調(diào)用函數(shù)得到一個(gè)Person構(gòu)造函數(shù)；
定義的實(shí)例方法和類(lèi)方法會(huì)分別收集到一個(gè)數(shù)組中，便于后面直接調(diào)用函數(shù)進(jìn)行遍歷添加；
判斷方法類(lèi)型：如果是實(shí)例方法就添加到Person原型上，是類(lèi)方法直接添加到Person上；
所以class定義類(lèi)的本質(zhì)還是通過(guò)構(gòu)造函數(shù)+原型鏈，class就是一種語(yǔ)法糖；

這里可以提出一個(gè)小問(wèn)題：定義在constructor外的屬性最終會(huì)被添加到哪里呢？還是會(huì)被添加到類(lèi)的實(shí)例化對(duì)象上，因?yàn)镋S6對(duì)這樣定義的屬性進(jìn)行了單獨(dú)的處理。

class Person {
  message = 'hello world'

  constructor(name, age) {
    this.name = name
    this.age = age
  }

  eating() {
    console.log(this.name + ' is eating.')
  }

  static personMethod() {
    console.log('personMethod')
  }
}

const p = new Person('curry', 30)
console.log(p) // Person { message: 'hello world', name: 'curry', age: 30 }

擴(kuò)展：在上圖中通過(guò)通過(guò)babel轉(zhuǎn)換后的代碼中，定義的Person函數(shù)前有一個(gè)/*#__PURE__*/，那么這個(gè)有什么作用呢？

實(shí)際上這個(gè)符號(hào)將函數(shù)標(biāo)記為了純函數(shù)，在JavaScript中純函數(shù)的特點(diǎn)就是沒(méi)有副作用，不依賴(lài)于其它東西，獨(dú)立性很強(qiáng)；
在使用webpack構(gòu)建的項(xiàng)目中，通過(guò)babel轉(zhuǎn)換后的語(yǔ)法更有利于webpack進(jìn)行tree-shaking，沒(méi)有使用到的純函數(shù)會(huì)直接在打包的時(shí)候被壓縮掉，達(dá)到減小包體積效果；

總結(jié)

到此這篇關(guān)于JavaScript面向?qū)ο笾钊肓私釫S6的class的文章就介紹到這了,更多相關(guān)了解ES6的class內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具