ES6 Class背后隐藏的真相

原文：The Hidden Truths in ES6 Classes
作者：Can Ho 翻译：王嘉怡 责编：仲培艺

对许多开发者来说，尤其是那些来自传统编程语言，比如Java、PHP……以及对OOP范式抱有极大激情的程序员，ES6在JavaScript中引入了类的概念，但这仅是一个巨大的“诱饵”。

新瓶装旧酒

在ES6里面，开发者这样声明一个类：

class A {

}

当检查A类型时：

typeof A

如果开发者在Chrome控制台输入以上代码，它将会输出：

function class A {

}

A是一个特殊的函数，不可调用。试图invoke A()，它将会产生ReferenceError错误：

Uncaught ReferenceError: A is not defined

很明显，这在ES6没有任何新意。

仅仅为了语法方便

下面来看看，在处理一个类时，JavaScript引擎干了些什么：

class Rectangle {

    constructor(width, height) {

        this.height= height;

        this.width = width;

    }

    getArea() {

        return this.height* this.width;

    }

    toString() {

        return `Rectangle: width(${this.width}), height(${this.height})`;

    }

    static create(height, width) {

        return new Rectangle(height, width);

    }

}

class Square extends Rectangle {

    constructor(height) {

        super(height, height);

    }

    toString() {

        return `Square: length(${this.height})`;

    }

}

const s1 = new Square(10);

JavaScript具体结构图：

显然，还是一样没有新意。

只是一个构建在原型上的语法糖

苹果VS.橙子

下面一起来看看ES6 class和OOP语言之间的区别：

概念

在传统的OOP语言中，类是一个蓝图或创建模板实例。
在JavaScript中，类是一个构造函数。

行为

在传统语言中，当创建实例、方法、属性这些时，会从父类中向下拷贝到子类，然后再从类到新的实例。
https://i2.wp.com/vietcanho.files.wordpress.com/2016/07/oop-behavior.png?ssl=1&w=450

而在JavaScript中，并没有这样的父类、子类之间的拷贝实例，只有对象之间的链接。
https://i0.wp.com/vietcanho.files.wordpress.com/2016/07/js-class-behavior.png?ssl=1&w=450

功能

Classes是OOP语言的核心，这并不奇怪，OOP语言支持很多功能，比如类变量作用域，多个inheritances，静态块，嵌套类等。

在JavaScript中，类仅仅是构建在原型继承之上的语法糖。在类的功能支持上是非常有限的。目前，只支持以下这些：

• 构造函数
• 实例方法
• 静态方法

备注：不支持类属性。

所以，拿JavaScript与OOP语言来比较类，就像是拿苹果与橘子作比较。

2016年8月12日-13日，由CSDN重磅打造的互联网应用架构实战峰会、运维技术与实战峰会将在成都举行，目前18位讲师和议题已全部确认。两场峰会大牛讲师来自阿里、腾讯、百度、京东、小米、乐视、聚美优品、YY互娱、华为、360等知名互联网公司，一线深度的实践，共同探讨高可用/高并发/高性能系统架构设计、电商架构、分布式架构、运维工具研发与实践、运维自动化系统的构建、DevOps、云上的运维案例分析、虚拟化技术、应用性能检测与管理、游戏行业的运维实践等，将和与会嘉宾共同探讨「构建更安全、更高性能、更稳定的架构和运维体系」等领域的话题与技术。【八折优惠中，点击这里抢票，欲购从速。】