Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. ES6
Code

ECMAScript 6 高级教程: 类和继承.

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Template Strings
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Chinese (Simplified) (中文(简体)) translation by Feng Huang (you can also view the original English article)

我喜欢和你们分享关于ECMAScript 6系列的文章. 并且怀着激动的心情给你们解释它是如何为你们工作的. 我非常希望你们享受阅读这个过程就像我在写作他们时那样.

首先, 我们工作的环境是微软的浏览器引擎Microsoft Edge. 这是一个多年来我们所知道的对IE进行了巨大改进的引擎. 我个人偏爱其中支持很多的ECMAScript 6的功能. 对我来说, 这非常有利于写大型的web应用程序.

我们都知道到目前为止,Microsoft Edge引擎上大约支持70%的ECMAScript 6的功能. 参考:http://kangax.github.io/compat-table/es6/ES6 on dev.modern.ie/platform/status.

Table of ECMAScript 6 features on Microsoft Edge

我喜欢用JavaScript,但是当做一个像Babylon.js这样的大工程时, 我更倾向使用TypeScript+ 现在流程的Angular 2框架. 原因就是JavaScript(就是我们知道的ECMAScript 5)没有我以往其它语言写大项目的语法功能. 对于实例我没办法使用类和继承.

所以,事不宜迟,让我们赶紧看接下来的内容.

1 创建一个类

JavaScript是一种原型实例语言, 但是对于ECMAScript 5它可以模拟类和继承.

当JavaScript里处理类的时候我们习惯把一个类封装成一个复杂的function. 我们使用的诀窍就是扩展一个对象的prototype属性.

我们能看到这里我们定义了一个包含"属性"和"方法"的"".

构造函数是通过自身实例化的方法Animal实现. 通过prototype来扩展的functions可以被认为是实例的方法.

这样就可以了, 但这是假设你对原型继承非常了解. 对于只了解类继承的人来说看起来却是很困惑. 更奇怪的是,JavaScript还有一个class关键字. 但是这个关键字没任何意义. ECMAScript 6现在可以实现这些, 并且只要很短的代码.

能够得到相同的结果,但是对于编写类的开发人员来说更容易读写. 这里不需要prototype属性, 并且你能使用new关键字定义构造函数.

另外: 比起ECMAScript 5类多了一些新的语法规定. 例如: 你现在不能不用new来调用构造函数. 你也不能用new来作为构造方法. 另外一个变化是, 所有的方法变成不可枚举.

有趣的是:新旧版本互不影响.

也就是说最后不管怎么样,即使有了新的关键字. 你还是可以使用原型放来增加一个方法. 一个方法在这就是你的对象的一个function属性.

另两个基于类开发的核心功能是getter和setter, 在ES6中也支持. 这样能够更清楚一个方法是做什么用的?

更方便了,对不对?

但这里我们会看到你一个JavaScript的常见经过. "并非真的私有" 私有成员(_age). 我前一段时间写了关于这一主题的一篇文章.

 感谢!  用ECMAScript 6新的功能symblos能更好的解决这个问题.

那么什么是symbol? 这是一种不可重复且不能修改的数据类型. 用来作为对象的属性标识符. 如果没有symbol类型,你就不能访问属性.

这就导致更多的私有成员权限.

或者,至少,不太容易访问了. Symbols在命名唯一性上非常有用. 但是唯一并不代表私有. 唯一仅仅意味着, 如果你需要一个和其它关键字不重复的关键字. 可以创建一个新的symbol.

但是这还并不是真正的私有因为, 感谢Object.getOwnPropertySymbols , 下游用户可以使用这个方法访问你的symbol属性.

2 继承的处理

每次当我们创建类后,都要用到继承. 再说一次ES5可以模拟实现继承,但是做起来很复杂.

例如: 我们可以用TypeScript来生成可模拟继承的类.

的确代码很不容易读.

但是用ECMAScript 6变得好多了.

要多谢extends这个关键字你可以指定一个类作为子类. 使用super关键字来定义它的父类.

有了这些新增加的功能, 现在我们可以创建的工作和使用继承方法而不需要用原型来伪装成继承了.

3 为什么使用TypeScript 比以前更有用?

因为我们的浏览器已经支持了这些新的功能. 我认为用TypeScript来生成JavaScript代码会比以前更好.

首先,最新版本的TypeScript(1.4)已经开始支持ECMAScript 6代码(包含letconst关键字). 所以你只要保持现有的TypeScript代码并且启用新的选项就可以生成ECMAScript 6代码.

如果你更仔细的查看一下TypeScript你会发现,它其实看起来更像是没有类型的ECMAScript 6. 所有现在学好TypeScript能为将来学好ECMAScript 6打好基础.

结论

使用TypeScript你的代码能在任何浏览器上转换成ECMAScript 5. 如果你要直接在浏览器中使用ECMAScript 6. 你需要升级到Window10 使用Microsoft Edge引擎来测试.

如果你不想这么做只想体验一下新的浏览器功能. 你也可以使用Microsoft Edge远程模式访问一台Window10的电脑. 在你的Mac OS或者Linux box上也支持.

当然了Microsoft并不是唯一支持ES6标准的浏览器. 其它浏览器也可以支持, 你可以检索支持的列表在: http://kangax.github.io/compat-table/es6/.

JavaScript的ECMAScript 6标准前途一片光明.老实说我真的有点迫不及待看到所有的现代浏览器都支持他.

这篇文件是微软Web开发技术系列教程的一部分. 我们非常高兴和你们分享Microsoft Edge和新的EdgeHTML 渲染引擎. 想要在你的Mac,IOS,Android或Windows设备上得到免费的虚拟机或者远程测试环境.请访问: @ http://dev.modern.ie/.

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.