本篇內(nèi)容主要講解“ES6中的class類怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ES6中的class類怎么使用”吧!

成都創(chuàng)新互聯(lián)公司專注于弓長嶺企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城開發(fā)。弓長嶺網(wǎng)站建設(shè)公司,為弓長嶺等地區(qū)提供建站服務(wù)。全流程按需定制設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

認識class定義類

我們會發(fā)現(xiàn)，按照前面的構(gòu)造函數(shù)形式創(chuàng)建 類，不僅僅和編寫普通的函數(shù)過于相似，而且代碼并不容易理解。

在ES6（ECMAScript2015）新的標準中使用了class關(guān)鍵字來直接定義類；但是類本質(zhì)上依然是前面所講的構(gòu)造函數(shù)、原型鏈的語法糖而已；所以學好了前面的構(gòu)造函數(shù)、原型鏈更有利于我們理解類的概念和繼承關(guān)系；

那么，如何使用class來定義一個類呢？–可以使用兩種方式來聲明類：類聲明和類表達式；

class Person{

    //類聲明

}

const Person=class{

    //類表達式

}

類和構(gòu)造函數(shù)的異同

我們來研究一下類的一些特性：你會發(fā)現(xiàn)它和我們的構(gòu)造函數(shù)的特性其實是一致的；

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

類的構(gòu)造函數(shù)

如果我們希望在創(chuàng)建對象的時候給類傳遞一些參數(shù)，這個時候應(yīng)該如何做呢？

每個類都可以有一個自己的構(gòu)造函數(shù)（方法），這個方法的名稱是固定的constructor；

當我們通過new操作符，操作一個類的時候會調(diào)用這個類的構(gòu)造函數(shù)constructor；

每個類只能有一個構(gòu)造函數(shù)，如果包含多個構(gòu)造函數(shù)，那么會拋出異常；

當我們通過new關(guān)鍵字操作類的時候，會調(diào)用這個constructor函數(shù)，并且執(zhí)行如下操作：

1.在內(nèi)存中創(chuàng)建一個新的對象（空對象）；

2.這個對象內(nèi)部的[[prototype]]屬性會被賦值為該類的prototype屬性；

3.構(gòu)造函數(shù)內(nèi)部的this，會指向創(chuàng)建出來的新對象；

4.執(zhí)行構(gòu)造函數(shù)的內(nèi)部代碼（函數(shù)體代碼）；

5.如果構(gòu)造函數(shù)沒有返回非空對象，則返回創(chuàng)建出來的新對象；

類的實例方法

在上面我們定義的屬性都是直接放到了this上，也就意味著它是放到了創(chuàng)建出來的新對象中：

在前面我們說過對于實例的方法，我們是希望放到原型上的，這樣可以被多個實例來共享；

這個時候我們可以直接在類中定義；

class Person {

  constructor（name, age） {

    this.name = name

    this.age = age

    this._address = "廣州市"

  }

  // 普通的實例方法

  // 創(chuàng)建出來的對象進行訪問

  // var p = new Person（）

  // p.eating（）

  eating（） {

    console.log（this.name + " eating——"）

  }

  running（） {

    console.log（this.name + " running——"）

  }

}

類的訪問器方法

我們之前講對象的屬性描述符時有講過對象可以添加setter和getter函數(shù)的，那么類也是可以的：

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（"攔截設(shè)置操作"）

    this._address = newAddress

  }

}

類的靜態(tài)方法

靜態(tài)方法通常用于定義直接使用類來執(zhí)行的方法，不需要有類的實例，使用static關(guān)鍵字來定義：

class Person {

  constructor（name, age） {

    this.name = name

    this.age = age

    this._address = "廣州市"

  }

  // 類的靜態(tài)方法（類方法）

  // 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中實現(xiàn)繼承的方案，雖然最終實現(xiàn)了相對滿意的繼承機制，但是過程卻依然是非常繁瑣的。在ES6中新增了使用extends關(guān)鍵字，可以方便的幫助我們實現(xiàn)繼承：

class Person{

}

class Student extends Person{

}

super關(guān)鍵字

我們會發(fā)現(xiàn)在上面的代碼中我使用了一個super關(guān)鍵字，這個super關(guān)鍵字有不同的使用方式：注意：在子（派生）類的構(gòu)造函數(shù)中使用this或者返回默認對象之前，必須先通過super調(diào)用父類的構(gòu)造函數(shù)！

super的使用位置有三個：子類的構(gòu)造函數(shù)、實例方法、靜態(tài)方法；

繼承內(nèi)置類

我們也可以讓我們的類繼承自內(nèi)置類，比如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的類只支持單繼承：也就是只能有一個父類 。那么在開發(fā)中我們我們需要在一個類中添加更多相似的功能時，應(yīng)該如何來做呢？這個時候我們可以使用混入（mixin）；

JavaScript中的多態(tài)

面向?qū)ο蟮娜筇匦裕悍庋b、繼承、多態(tài)。

前面兩個我們都已經(jīng)詳細解析過了，接下來我們討論一下JavaScript的多態(tài)。JavaScript有多態(tài)嗎？

維基百科對多態(tài)的定義：多態(tài)（英語：polymorphism）指為不同數(shù)據(jù)類型的實體提供統(tǒng)一的接口，或使用一

個單一的符號來表示多個不同的類型。

非常的抽象，個人的總結(jié)：不同的數(shù)據(jù)類型進行同一個操作，表現(xiàn)出不同的行為，就是多態(tài)的體現(xiàn)。

那么從上面的定義來看，JavaScript是一定存在多態(tài)的。

// 多態(tài)： 當對不同的數(shù)據(jù)類型執(zhí)行同一個操作時， 如果表現(xiàn)出來的行為（形態(tài)）不一樣， 那么就是多態(tài)的體現(xiàn)。

function calcArea（foo） {

  console.log（foo.getArea（））

}

var obj1 = {

  name: "why",

  getArea: function（） {

    return 1000

  }

}

class Person {

  getArea（） {

    return 100

  }

}

var p = new Person（）

calcArea（obj1）

calcArea（p）

// 也是多態(tài)的體現(xiàn)

function sum（m, n） {

  return m + n

}

sum（20, 30）

sum（"abc", "cba"）

// 傳統(tǒng)的面向?qū)ο蠖鄳B(tài)是有三個前提：

// 1> 必須有繼承（是多態(tài)的前提）

// 2> 必須有重寫（子類重寫父類的方法）

// 3> 必須有父類引用指向子類對象

// Shape形狀

class Shape {

  getArea（） {}

}

class Rectangle extends Shape {

  getArea（） {

    return 100

  }

}

class Circle extends Shape {

  getArea（） {

    return 200

  }

}

var r = new Rectangle（）

var c = new Circle（）

// 多態(tài)： 當對不同的數(shù)據(jù)類型執(zhí)行同一個操作時， 如果表現(xiàn)出來的行為（形態(tài)）不一樣， 那么就是多態(tài)的體現(xiàn)。

function calcArea（shape: Shape） {

  console.log（shape.getArea（））

}

calcArea（r）

calcArea（c）

export {}

到此，相信大家對“ES6中的class類怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！