来聊聊ES6(六)

在ES2015标准中的类系统被提出之前,开发者们一直是从ECMAScript的其他地方挖掘出被“隐藏”起来的类系统。

先回顾一下我们之前一套简陋却成熟的类机制,即利用函数原型来实现类系统。

越来越多的实例证明,ECMAScript需要一个原生的、标准的类机制,以供开发者来应对日益复杂的开发需求。1.使用语法

ES2015中的类语法与其他C语言家族成员的类语法有许多相同之处,如果开发者有在Javascript中使用过基于原型的类机制,那么会很容易接受ES2015的语法。

在ES2015的类语法中,原本的构造函数被类的constructor方法代替,而其余原本需要定义在prototype中的方法则可以直接定义在class中。

这里需要注意的是,在类中定义的方法,都是带有作用域的普通函数,而不是箭头函数,方法内第一层所引用的this都指向当前实例。如果实例方法内包含箭头函数,则引擎就会根据包含层级把箭头函数内引用的this所指向的实例对象一直向上搜索,直到到达一个函数作用域或块级作用域为止。如果一直搜索到运行环境的最上层,就会指向underfined。

2.继承语法

ES2015中的类继承方法相比之前利用对象原型所实现的类机制做到类的继承要简单的多。我们只需要关心语法即可。

非常方便的是,ES2015的继承语法同样可以将以前使用构建函数模拟的类作为父类来继承,而非只由class语法定义的类才可以使用。

这里需要注意一点的是,如果一个子类继承了一个父类,那么在子类的constructor构造函数中必须使用super函数调用父类的构造函数后才能在子类的constructor构造函数中使用this,否则会报this is not defined的错误。

3.Getter/Setter

Getter/Setter是一种元编程的概念,元编程的特点在于,允许程序可以对运行时(Runtime)的对象进行读取和操作。

ES2015的类机制同样支持Getter/Setter在类中的使用,配合元编程的概念,类的能力会变的更加强大。

4.静态方法

多数情况下,我们只需要关心类的实例方法即可。但有些时候要为类对象本身定义一些方法,以满足一些特殊需求。比如类型检测、实力创建等。

就比如上文中Animal,这个类的构造函数带有三个参数,实际开发中需要定义其子类以实现一些参数固话,那么便可以通过实现一个静态方法使Animal被拓展。

与静态方法extend先定义了一个继承于Animal的子类,并在该子类的构建函数中将extend方法的后续参数作为形参传入super(Animal的构建函数)中,以实现参数固化。

5.高级技巧

在ECMAScript中所有的对象都会带有一个名为toString()的方法,而这个方法是被定义在Object这个最底层类上的。

一般情况下,如果定义一个对象字面量并执行它的toString方法,可以观察到这个方法所返回的内容是这样的一个字符串[object object]。

如果使用自己定义的类来生成实例,就会返回以这个类名作为标签的返回值。前提是,这个类并没有覆盖toString方法。

在Object类及其所有的子类(在ECMAScript中,除了null、underfined以外,一切类型和类都可以看做是Object的子类)的实例中,有一个利用Symbol.toStringTag作为键的属性,它定义着当这个对象的toString()方法被调用时,所返回的Tag的内容是什么。

既然知道了其中的原理,这就意味着我们可以进行一些自定义操作。通过[]语法和Gerter特性为一个类自定义toString标签。

6.注意点

虽然说ES2015中类语法可以与以前的原型一起使用,但是他们之间是有区别的。

函数有两种定义方式。

声明式函数定义在运行中是可以被提升的,即在声明式函数所开始的作用域开始执行时,无论是否已经执行到这个函数的代码,都可以对这个函数进行访问和使用。而这个函数的提升甚至包含定义在return语句之后的情况。

和这个特性同样适用于利用原型定义的类。然而对于ES2015中类语法来说,这个特性是无用的。

这是因为从逻辑上来讲,类的继承必须是单向的,不可能出现A类继承于B类的同时,B类也继承A类的情况,这就意味着,父类必须在子类之前被定义。

--END --

如果觉得文章对你有帮助,点赞、转发一下,谢谢各位支持。

Copyright 2018 kovlento

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180110G04VOY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券