返回 登录
0

ES6 Class背后隐藏的真相

阅读5461

原文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、云上的运维案例分析、虚拟化技术、应用性能检测与管理、游戏行业的运维实践等,将和与会嘉宾共同探讨「构建更安全、更高性能、更稳定的架构和运维体系」等领域的话题与技术。【八折优惠中,点击这里抢票,欲购从速。】

评论