ES6學習筆記之Classes

MSchumi 發布于2019-08-19 18:15 / 2353人閱讀

摘要：靜態方法靜態方法直接用類名來調用就可以了，熟悉面向對象編程的同學應該都不陌生。在中，一個類不能繼承多個類。為了解決這個問題，可以使用。當類表達式有命名時，該命名僅作為類內部使用。

本文同步自我得博客：http://www.joeray61.com

簡介

ES6的Classes是在原型鏈繼承的基礎上，由語言本身提供的語法糖，并非是一種全新的繼承模式。這使得Javascript有一種更加簡潔清晰的方式來實現類的創建和繼承。

語法

話不多說，直接上代碼。

定義Class

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

繼承Class

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

原型鏈方法

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

speak就是原型鏈方法，不需要再繁瑣地使用prototype來定義，直接定義在class內部即可。

靜態方法

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    static getClassName() {
        return "Person";
    }
}
console.log(Person.getClassName());    // Person

靜態方法直接用類名來調用就可以了，熟悉面向對象編程的同學應該都不陌生。

Species

某些情況下，類里面有一個方法返回的是類的實例，但是你可能希望返回父類的示例，這時候可以使用species pattern來達到目的。

舉個栗子，你實現了一個類叫做MyArray，繼承自Array，如果你不使用species pattern，那么調用map方法將會返回MyArray的實例，如果使用了species pattern則能夠返回Array的實例。

class MyArray extends Array {
    static get [Symbol.species]() {
        return Array;
    }
}

var a = new MyArray(1,2,3);
var mapped = a.map(x => x * x);

console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

Mixin

mixin是類的模板。在EcmaScript中，一個類不能繼承多個類。這樣有些需求就不是很方便。為了解決這個問題，可以使用mixin。

var Bar = Sub => class extends Sub {
    bar() {}
};

var Baz = Sub => class extends Sub {
    baz() {}
};

class Person {
    speak() {}
}

class Student extends Bar(Baz(Person)) {}

這樣，Student就可以繼承Bar、Baz和Person3個基類了。

特點提升

以前使用function來定義類的時候，我們可以在定以前先使用new，由于JS語言的變量提升特性，這樣寫不會有任何問題，示例如下：

var joe = new Person("joe", 23);
function Person(name, age) {
    this.name = name;
    this.age = age;
}

如果使用class來定義類，則必須在定義后才能使用new來進行對象的實例化，如果先new則會報錯

var joe = new Person("joe", 23);    // ReferenceError
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

嚴格模式（strict mode）

類聲明和類表達式都是在嚴格模式下執行的。

類表達式

跟function一樣，class也可以使用表達式來定義。類表達式可以命名也可以匿名。當類表達式有命名時，該命名僅作為類內部使用。

var Person = class Man {
    getName() {
        return Man.name;
    }
};
var p = new Person();
console.log(p.getName());    // Man
console.log(Man);    // ReferenceError: Man is not defined

參考資料

Classes

http://exploringjs.com/es6/ch_classes.html

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

Essential SQLAlchemy2th學習筆記之反射Reflection

摘要：基于反射對象進行查詢模塊反射這里我們不再使用而是使用擴展模塊的獲取所有的對象名獲取表對象進行操作反射關聯關系可以反射并建立表之間的但是建立關聯列的命名為例如關于更多信息請詳細參看官方文檔示例數據庫下載:http://chinookdatabase.codepl...在SQLALchemy中，我們使用反射技術來獲取相關database schema信息,如tables,views,in...

NSFish 2019-07-25 11:12 評論0 收藏0
JavaScript 風格指南（筆記）

摘要：用且只用一個完成這一需求。執行時可以增加規則對要變量的合法性進行判斷。繼承該類時可以重載默認行為。讓對象擁有私有成員。理想情況下，應將調用其他函數的函數寫在被調用函數的上方。避免位置標記避免在源文件中寫入法律評論參考變量使用有意義、可讀性好的變量使用 ES6 的 const 聲明常量對功能類似的變量名采用統一的命名風格使用易于檢索名稱舉例 // 反例 for (var ...

wind5o 2019-08-23 13:42 評論0 收藏0
ES6深入淺出 Classes

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

array_huang 2019-08-23 10:45 評論0 收藏0
ES6學習筆記之模塊

摘要：但是一直沒有在語言層面支持模塊，直到的出現。相信在不久的將來，的模塊一定會全面取代和。的模塊提供了個新的語法，分別是和。就是模塊用來對外暴露數據的接口，具體用法如下。本文同步自我得博客：http://www.joeray61.com 簡介在當今的Javascript程序中，模塊的作用不言而喻，目前廣泛應用的主要有AMD（瀏覽器端）和CommonJS（服務器端）。但是Javascri...

Airmusic 2019-08-19 18:38 評論0 收藏0
《深入react技術棧》學習筆記（三）漫談React

摘要：前言接下來讓我們進入新的章節漫談。正文一事件系統的事件系統事件系統符合標準，不存在任何兼容性問題，并且與原生的瀏覽器事件一樣有同樣的接口。所有的事件都自動綁定到最外層。組織事件冒泡的行為只適用于合成系統中，且沒辦法阻止原生事件冒泡。前言接下來讓我們進入新的章節：漫談React。本篇文章主要講React事件系統和表單操作。正文一：事件系統 1.react的事件系統react事件系...

isLishude 2019-08-21 11:38 評論0 收藏0