es6 - 類

notebin 發布于2019-08-22 15:18 / 2122人閱讀

摘要：創建自定義類型看下面一段代碼上面代碼使用創建了一個自定義類型，是這個類的構造器，是類的公共方法。注意事項在使用類繼承的實現中，需要注意的點是如果子類沒有重寫方法，默認會調用父類的構造器方法。

es6 類-class

與大多正規的面向對象編程語言不同(比如java)，js在創建之初就不支持類。js的面向對象編程實現方式是通過構造函數和原型來實現的。

我之前以為es6引入類的概念將會帶給這門語言極大的改變。后來才發現es6類的特性只是一種語法糖，使得js創建自定義類型和傳統的面向對象語言語法上更為相似，其內部機理和之前構造函數-原型模式本質上是一樣的。但是，es6 類的特性依然是值得掌握的，它使得js語言更加的嚴謹，消除了一些可能導致出錯的狀況。

語法

類的創建依賴于class和constructor兩個關鍵字，下面介紹下類創建的語法。

創建自定義類型

看下面一段代碼：

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        console.log(this.name);
    }
}

上面代碼使用class創建了一個自定義類型Person，constructor是這個類的構造器，sayName是類的公共方法。它和下面一段代碼是等價的。

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name);
}

二者在使用上完全相同，比如：創建一個Person的實例 new Person("icode007")等。一些小的差別主要有下面幾點：

使用class創建的類只能使用new來調用，而后者可以作為普通函數調用。

class沒有聲明提升，后者作為函數會有聲明提升。

類聲明中的代碼自動運行在嚴格模式下。

類的所有方法都是不可枚舉的。

類表達式

與函數類似，類也具有兩種形式，類聲明和類表達式。

let Person = class{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        console.log(this.name);
    }
}

let person = new Person("icode007");

類表達式在使用上與類聲明幾乎沒有區別。

類的訪問器屬性

使用get和set關鍵字可以為類定義訪問器屬性。

let Person = class{
    constructor(firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    get fullname(){
        return this.firstname + this.lastname;
    }
    set fullname(name){
        var arr = name.split(" ");
        this.firstname = arr[0];
        this.lastname = arr[arr.length - 1];
    }
}
let person = new Person("nicholas", "zakas");
console.log(person.fullname);

類的靜態成員

要定義類的靜態方法，只需要在公共方法定義前加static關鍵字即可。如：

let Person = class{
    constructor(firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    static getFullname(){
        return this.firstname + this.lastname;
    }
}

要使用該靜態方法，需要直接在類上調用，比如Person.getFullname()。

類的繼承

es6的類使用extends來實現繼承。例如：

class Rectangle{
    constructor(length,width){
        this.length = length;
        this.width = width;
    }
    getArea(){
        return this.length * this.width;
    }
}

class Square extends Rectangle {
    constructor(length){
        super(length, length);
    }
    getPerimeter(){
        return this.length * 4;
    }
}
var sqr = new Square(5);
console.log(sqr.getArea()

上面代碼中，類Square繼承了Rectangle類，所以實例sqr同樣具有getArea()方法。同時sqr添加了自己的getPerimeter方法。并重寫了構造器constructor。

注意事項

在使用類繼承的實現中，需要注意的點是：

如果子類沒有重寫constructor方法，默認會調用父類的構造器方法。

如果重寫了constructor方法，那么需要顯式的調用父類的構造器方法，即super(arg...)，并且super()調用一定要放到構造器的最前面(準確的說是在使用this前需要調用super)。

父類的靜態成員同樣會被繼承到子類上。

最佳實踐

es6的類的語法比較易于掌握，推薦在實際開發中，多使用class來創建自定義類型。首先會使關于類的信息都包裹在一個class{}中，也會使得js中的類與其他語言的類的語法更加的統一。

更多關于es6的內容，可以關注右側專欄 - 學習ES6。

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93351.html

【ES6】更易于繼承的類語法

摘要：的類使用熟悉的關鍵字指定類繼承的函數，并且可以通過方法訪問父類的構造函數。例如繼承一個的類繼承了，術語上稱為基類，為派生類。例如注意到上例中，不僅是派生類的實例，也是派生類的實例，內建對象繼承的實用之處是改變返回對象的類型。和其它面向對象編程語言一樣，ES6 正式定義了 class 類以及 extend 繼承語法糖，并且支持靜態、派生、抽象、迭代、單例等，而且根據 ES6 的新特性衍...

Lionad-Morotar 2019-08-23 12:44 評論0 收藏0
ES6深入淺出 Classes

摘要：一步，一步前進一步深入淺出之。是構造函數，可在里面初始化我們想初始化的東西。類靜態方法大多數情況下，類是有靜態方法的。中添加類方法十分容易類方法和靜態方法是同一個東西在的語法中，我們可以使用關鍵字修飾方法，進而得到靜態方法。一步，一步前進の一步 ES6深入淺出之Classes。翻譯的同時亂加個人見解，強烈推薦閱讀原作者的文章，言簡意賅。es6-classes-in-depth 類語...

array_huang 2019-08-23 10:45 評論0 收藏0
es6之js的類

摘要：生成的類的原型會被自動調整，而你還能調用方法來訪問基類的構造器。唯一能避免調用的辦法，是從類構造器中返回一個對象。起源 JS 從創建之初就不支持類，也沒有把類繼承作為定義相似對象以及關聯對象的主要方式，這讓不少開發者感到困惑。而從 ES1 誕生之前直到ES5 時期，很多庫都創建了一些工具，讓 JS 顯得貌似能支持類。盡管一些 JS 開發者強烈認為這門語言不需要類，但為處理類而創建的代...

libin19890520 2019-07-31 10:15 評論0 收藏0
ES6學習總結（三）

摘要：不同于其他面向對象語言，以前的中中沒有類的概念，主要是通過原型的方式來實現繼承，中引入了原型鏈，并且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另一個對象的方法和屬性，中原型繼承的關鍵是將一個實例的原型對象指向另一個實例，因此前一不同于其他面向對象語言，ES6以前的JavaScript中中沒有class類的概念，主要是通過原型的方式來實現繼承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 評論0 收藏0
ES6 中Class創建對象與繼承實現

摘要：使用類創建實例對象也是直接對類使用命令，跟中構造函數的用法一致。中沒有構造函數，作為構造函數的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構造函數的繼承，總是指向父類。 1 Class in ES6 ES6提出了類(Class)的概念，讓對象的原型的寫法更像面向對象語言寫法。 ES6中通過class定義對象，默認具有constructor方法和自定義方法，但是包含...

zhou_you 2019-08-20 14:40 評論0 收藏0