带你入门 JavaScript ES6 (四)

he_xd 发布于2019-08-21 18:40 / 458人阅读

摘要：方法如示例中定义的方法静态方法使用关键字修饰的方法，允许通过类名直接调用静态方法而无需实例化。

本文同步带你入门 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教程入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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