ES6学习笔记之Classes

MSchumi 发布于2019-08-19 18:15 / 2250人阅读

摘要：静态方法静态方法直接用类名来调用就可以了，熟悉面向对象编程的同学应该都不陌生。在中，一个类不能继承多个类。为了解决这个问题，可以使用。当类表达式有命名时，该命名仅作为类内部使用。

本文同步自我得博客：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

云服务器海外云主机学习笔记学习笔记一基础学习笔记深度学习笔记

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

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