前言

EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民。但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的
语法糖,所以它们并没有带来任何的新特性。不过,它使代码的可读性变得更高,并且为今后版本里更多面向对象的新特性打下了基础。

这样做的原因是为了保证向后兼容性。也就是,旧代码可以在不做任何hack的情况下,与新代码同时运行。

定义类

让我们回想一下在ES5中定义一个类的方式。通过不是很常用的Object.defineProperty方法,我可以定义一些只读的属性。

function Vehicle(make, year) {
Object.defineProperty(this, 'make', {
get: function() { return make; }
}); Object.defineProperty(this, 'year', {
get: function() { return year; }
});
} Vehicle.prototype.toString = function() {
return this.make + ' ' + this.year;
} var vehicle = new Vehicle('Toyota Corolla', 2009); console.log(vehicle.make); // Toyota Corolla
vehicle.make = 'Ford Mustang';
console.log(vehicle.toString()) // Toyota Corolla 2009

很简单,我们定义了一个有两个只读属性和一个自定义toString方法的Vehicle类。让我们在ES6中来做一样的事情:

class Vehicle {
constructor(make, year) {
this._make = make;
this._year = year;
} get make() {
return this._make;
} get year() {
return this._year;
} toString() {
return `${this.make} ${this.year}`;
}
} var vehicle = new Vehicle('Toyota Corolla', 2009); console.log(vehicle.make); // Toyota Corolla
vehicle.make = 'Ford Mustang';
console.log(vehicle.toString()) // Toyota Corolla 2009

上面两个例子中定义的类有一个不同的地方。我们为了享受新的get语法带来的好处,所以只是将makeyear定义成了普通的属性。这使它们可以被外部所改变。如果你确实需要一个严格的私有属性,还是请继续使用defineProperty

类声明

在ES6中,有两个声明类的方式。第一种方法叫作 类声明,这也是我们在上述例子中使用的方式。

class Vehicle() {
}

有一个需要注意的地方是,类声明与函数声明不同,它不会被提升(hoisted)。例如,以下的代码工作正常:

console.log(helloWorld());

function helloWorld() {
return "Hello World";
}

但是,以下代码会抛出一个异常:

var vehicle = new Vehicle();

class Vehicle() {
}

类表达式

另一个定义类的方式叫做 类表达式。它与函数表达式的运行方式完全一样。一个类表达式可以是具名的也可以是匿名的。

var Vehicle = class {
} var Vehicle = class VehicleClass {
constructor() {
// VehicleClass is only available inside the class itself
}
} console.log(VehicleClass); // throws an exception

静态方法

static关键字是ES6的另一个语法糖,它使静态方法声明也成为了一个一等公民。在ES5中,静态方法就像是构造函数的一个属性。

function Vehicle() {
// ...
} Vehicle.compare = function(a, b) {
// ...
}

在使用了新的static关键字后:

class Vehicle {
static compare(a, b) {
// ...
}
}

在底层,JavaScript所做的,也只是将这个方法添加为Vehicle构造函数的一个属性。值得注意的是,你也可以用同样的语法为类添加静态属性。

类继承

旧的原型继承有时看起来让人非常头疼。ES6中新的extends关键字解决了这个问题。在ES5,我们是这么做的:

function Motorcycle(make, year) {
Vehicle.apply(this, [make, year]);
} Motorcycle.prototype = Object.create(Vehicle.prototype, {
toString: function() {
return 'Motorcycle ' + this.make + ' ' + this.year;
}
}); Motorcycle.prototype.constructor = Motorcycle;

使用的新的extends关键字,看上去就清晰多了:

class Motorcycle extends Vehicle {
constructor(make, year) {
super(make, year);
} toString() {
return `Motorcycle ${this.make} ${this.year}`;
}
}

super关键字也可以用于静态方法:

class Vehicle {
static compare(a, b) {
// ...
}
} class Motorcycle {
static compare(a, b) {
if (super.compare(a, b)) {
// ...
}
}
}

super关键字

上一个例子也展示了新的super关键字的用法。当你想要调用父类的函数时,这个关键字就显得十分好用。

在想要调用父类的构造函数时,你可以简单地将super关键字视作一个函数使用,如super(make, year)。对于父类的其他函数,你可以将super视作一个对象,如super.toString()。例子:

class Motorcycle extends Vehicle {
toString() {
return 'Motorcycle ' + super.toString();
}
}

可被计算的方法名

当在class中声明属性时,定义属性名时,你可以使用表达式。这个语法特性在一些ORM类库中将会非常流行。例子:

function createInterface(name) {
return class {
['findBy' + name]() {
return 'Found by ' + name;
}
}
} const Interface = createInterface('Email');
const instance = new Interface(); console.log(instance.findByEmail());

最后

在当前,使用class关键字来声明类,而不使用原型,获得的仅仅是语法上的优势。但是,这个是一个适应新语法和新实践的好开始。JavaScript每天都在变得更好,并且通过class关键字,可以使各种工具更好得帮助你。

原文地址

https://strongloop.com/strongblog/an-introduction-to-javascript-es6-classes/

JavaScript ES6 class指南的更多相关文章

  1. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

  2. javascript立体学习指南

    javascript立体学习指南第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的.基 ...

  3. JavaScript编码规范指南

    前言 本文摘自Google JavaScript编码规范指南,截取了其中比较容易理解与遵循的点作为团队的JavaScript编码规范. JavaScript 语言规范 变量 声明变量必须加上 var  ...

  4. JavaScript 跳坑指南

    JavaScript 跳坑指南 坑0-String replace string的replace方法我们经常用,替换string中的某些字符,语法像这样子 string.replace(subStr/ ...

  5. 《JavaScript面向对象编程指南(第2版)》读书笔记(一)

    目录 一.对象 1.1 获取属性值的方式 1.2 获取动态生成的属性的值 二.数组 2.1 检测是否为数组 2.2 增加数组长度导致未赋值的位置为undefined 2.3 用闭包实现简易迭代器 三. ...

  6. 《JavaScript面向对象编程指南(第2版)》读书笔记(二)

    <JavaScript面向对象编程指南(第2版)>读书笔记(一) <JavaScript面向对象编程指南(第2版)>读书笔记(二) 目录 一.基本类型 1.1 字符串 1.2 ...

  7. JavaScript ES6中export及export default的区别

    相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...

  8. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  9. JavaScript ES6 核心功能一览

    JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015 ...

随机推荐

  1. 【GDOI2017模拟12.9】最近公共祖先

    题目 分析 首先,将这些节点按dfs序建一棵线段树. 因为按dfs序,所以在同一子树上的节点会放在线段树相邻的位置. 发现,对于一个位置x,它的权值只会对以x为根的子树造成影响. 当修改x时,用w[x ...

  2. UVALive 3211 : Now or later 【2-SAT】

    题目链接 题意及题解参见lrj训练指南 #include<bits/stdc++.h> using namespace std; ; struct TwoSAT { int n; vect ...

  3. 解决 Failed to start LSB: Bring up/down networking 问题

    我用的是虚拟机,一换网络环境虚拟机的ip就没有了,重启网上就报Failed to start LSB: Bring up/down networking错误.网上查了一圈说什么HWADDR有问题,改了 ...

  4. GO语言学习笔记5-defer的使用

    1. 什么是defer defer是Go语言提供的一种用于注册延迟调用的机制:让函数或语句可以在当前函数执行完毕后(包括通过return正常结束或者panic导致的异常结束)执行. 2. defer的 ...

  5. IDC机房跳线

    服务网卡口与配线架 这里有一根网线 记录方式 签 A:23FM-23U-T07 (配线架网线) B:23FM-23U-NIC1(服务器网线) 在配线架的机柜旁边一定写明了 跳线的对面的   交换和配线 ...

  6. Qt第三方库----QCustomPlot

    一.软件下载 下载地址:http://www.qcustomplot.com/index.php/download 这里推荐下载第一个链接的内容: 注:这里的第三方库要放在非中文目录下. 二.配置 ( ...

  7. Codeforces Round #287 (Div. 2) E. Breaking Good 路径记录!!!+最短路+堆优化

    E. Breaking Good time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  8. 更好的构建 Node 服务的工具

    更好的构建 Node 服务的工具 无论前端项目在打包后都发送给后台, 有时候自己想看看效果在运行 npm run build 后只是看到一个 build 文件夹,但是直接打开是无法浏览,因此需要开启一 ...

  9. Spring Boot教程(一)在springboot中用redis实现消息队列

    环境依赖 创建一个新的springboot工程,在其pom文件,加入spring-boot-starter-data-redis依赖: <dependency> <groupId&g ...

  10. LINK : fatal error LNK1104: 无法打开文件“qtmaind.lib”

    LINK : fatal error LNK1104: 无法打开文件"qtmaind.lib" VS2019+QT5.13出现该问题,可以尝试这样解决. 1.找打qtmaind.l ...