帶你入門 JavaScript ES6 (四)

he_xd 發布于2019-08-21 18:40 / 459人閱讀

摘要：方法如示例中定義的方法靜態方法使用關鍵字修飾的方法，允許通過類名直接調用靜態方法而無需實例化。

本文同步帶你入門 JavaScript ES6 (四)，轉載請注明出處。

前面我們學習了：

for of 變量和擴展語法

塊作用域變量和解構

箭頭函數

本章我們將學習 ES6 中的類，了解類基本定義和繼承相關知識

一、概述

ES6 中的類是基于原型的繼承語法糖，本質上它是一個 function 類型

1.1 原型聲明

function Car(engines) {
    this.engines = engines
    this.run = false
}

Car.prototype.startEngines = function() {
    console.log("running ...")
    this.run = true
}

const yourCar = new Car(1)
yourCar.startEngines()


const myCar = new Car(2)
myCar.startEngines()

1.2 類聲明

class Car {
    constructor(engines){
        this.engines = engines
        this.run = false
    }

    startEngines(){
        console.log("running ...")
        this.run = true
    }
}

const yourCar = new Car(1)
yourCar.startEngines()


const myCar = new Car(2)
myCar.startEngines()

console.log(typeof Car)// function

使用類聲明是，需要先聲明類，然后才能訪問，否則拋出ReferenceError。這一點不同于函數聲，函數聲明會提升作用域，而無需事先聲明

二、類聲明

2.1 構造方法

使用關鍵詞 constructor 聲明的方法，用于在創建和實例化類對象。

2.2 方法

如示例 1.2 中定義的 startEngines 方法

2.3 靜態方法

使用關鍵字 static 修飾的方法，允許通過類名直接調用靜態方法而無需實例化。

class Car {
    constructor(engines = 1) {
        this.engines = engines
        this.run = false
    }

    static startEngines() {        
        console.log("running ...")
        this.run = true
    }
}

Car.startEngines()

三、類的繼承

extends 關鍵詞用于創建基于另一個類的子類定義
當子類存在構造函數時，需要在使用 this 之前調用 super()

class Animal {
    constructor (name) {
        this.name = name
    }
}

class Dog extends Animal {
    constructor (name) {
        super(name)
        this.legs = 4;
    }

    run() {
        console.log("running ...")
    }
}

const lily = new Dog("lily")

lily.run();

console.log( lily instanceof Dog)// trye
console.log( lily instanceof Animal)// true

四、為什么使用類

簡化代碼

相比原型繼承代碼解構更清晰

所有類方法在聲明類時聲明

五、注意的點

實例化類，使用 new 關鍵詞

類方法之間無需使用逗號

子類構造函數使用 super() 函數完成父類構造函數調用

參考

MDN 類

GPU云服務器云服務器 ES6入門 javascript入門帶你學c帶你飛 javascript教程入門

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

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

帶你入門 JavaScript ES6 (一)

摘要：是國際組織于年月日發布的第六版，正式名為通常被成為或。二模版字面量提供一種簡單實現表達式嵌套的字符串字面量操作，簡而言之就是能夠以簡單的方法實現字符串拼接操作。本文同步帶你入門 JavaScript ES6 (一)，轉載請注明出處。 ES6: 是 ECMA國際組織于 2015 年 6 月 17 日發布的 ECMAScript 第六版，正式名為 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 評論0 收藏0
帶你入門 JavaScript ES6 (二)

摘要：上一篇學習下一代語法一，我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。本文同步帶你入門 JavaScript ES6 (二)，轉載請注明出處。上一篇學習下一代 JavaScript 語法: ES6 (一)，我們學習了關于塊作用域變量或常量聲明 let 和 const 語法、...

chanthuang 2019-08-21 18:26 評論0 收藏0
帶你入門 JavaScript ES6 (五) 集合

摘要：一概述集合是引入的新的內置對象類型，其特點同數學意義的集合，即集合內所有元素不重復元素唯一。數組集合對比數組和集合，數組可以加入重復數據，而集合的所有元素是唯一的不允許重復。因此，適合臨時存放一組對象，以及存放跟對象綁定的信息。本文同步帶你入門帶你入門 JavaScript ES6 (五) 集合，轉載請注明出處。前面我們學習了： for of 變量和擴展語法塊作用域變量和解構...

BetaRabbit 2019-08-26 17:04 評論0 收藏0
帶你入門 JavaScript ES6 (三)

摘要：上一章我們學習了遍歷和擴展字符語法。本章我們主要學習中的箭頭函數箭頭函數更準確來說叫箭頭函數表達式。箭頭函數余普通函數功能相同，但語法差別比較大。帶你入門 JavaScript ES6 (三) 本文同步帶你入門 JavaScript ES6 (三)，轉載請注明出處。上一章我們學習了 for of 遍歷和擴展字符語法。本章我們主要學習 ES6 中的箭頭函數箭頭函數更準確來說叫箭...

劉福 2019-08-21 18:35 評論0 收藏0
帶你玩轉 JavaScript ES6 (六) - Map 映射

摘要：初始化申明一個設置和獲取值使用設置新值或更新值申明設置值張三豐張三豐重復設置值如果鍵值存在則新值替換舊值張三豐使用獲取值，如果獲取的不存在返回分別獲取判斷是否存在使用判斷給定是否存在映射內。本文同步帶你入門帶你玩轉 JavaScript ES6 (六) - Map 映射，轉載請注明出處。本章我們講學習 ES6 中的 Map(映射)。上一章節我們學習了 [Set(集合)]()的相關...

acrazing 2019-08-22 14:02 評論0 收藏0