前言

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. pyqt5-QTDesigner--控件操作

    Edit菜单       编辑小伙伴.用鼠标直接拖       编辑控件---样式等等. 点击需要编辑的控件--->   信号与槽 先用鼠标从控件往外拖---> --->选中相应的信 ...

  2. layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...

  3. Idea中Springboot热部署无效解决方法

    仅适用IDEA中,eclipse中不需要设置 一.开启idea自动make功能 1 - Enable Automake when the application is running PRESS: C ...

  4. AJAX - 向服务器发送请求请求

    AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据.直线电机生产厂家 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 ...

  5. #417 Div2 Problem C Sagheer and Nubian Market (二分 && std::accumulate)

    题目链接 : http://codeforces.com/problemset/problem/812/C 题意 : 给你 n 件物品和你拥有的钱 S, 接下来给出这 n 件物品的价格, 这些物品的价 ...

  6. ZOJ 2301 离散化

    题目链接: 题意是说,有从 1 开始递增依次编号的很多球,开始他们都是黑色的,现在依次给出 n 个操作(ai,bi,ci),每个操作都是把编号 ai 到 bi 区间内的所有球涂成 ci 表示的颜色(黑 ...

  7. sh_02_判断年龄改进版

    sh_02_判断年龄改进版 # 输入用户年龄 age = int(input("请输入年龄:")) # 判断是否满 18 岁 (>=) if age >= 18: # ...

  8. 苹果cms如何添加播放器预加载和缓冲广告

    1,来到系统后台>>系统>>播放器参数设置  可以看到添加预加载和缓冲广告的输入框.文件格式为html 自己写一个html的网页上传到网站进行调用即可.链接前面不要加http或 ...

  9. 【canvas学习笔记四】绘制文字

    本节我们来学习如何绘制文字. 绘制文字有两个主要的方法: fillText(text, x, y [, maxWidth]) 在x, y位置填充文字text,有一个可选参数maxWidth设置最大绘制 ...

  10. (四)mysql -- 常用函数

    今天get一个,先记录一下 以后慢慢补充~ 将varchar转换成int 例如:select * from tb_1 order by cast(sport_sum as unsigned integ ...