数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

如何根据语言习惯简化对象构造函数的创建过程

本文转自前端之巅(ID: frontshow),作者是Eric Faust,前端之巅是一个坚持原创内容的前端技术社区媒体,推荐关注! 

ECMAScript 6已经正式发布后,作为它最重要的方言,JavaScript迎来了语法上的重大变革,前端之巅“深入浅出ES6”专栏将详细分析变革中的细节知识。文末附有“深入浅出ES6”专栏文章列表。

本文将与你一起讨论如何根据语言习惯简化对象构造函数的创建过程。

目前面临的问题

假如我们想要创建一个经典的面向对象设计示例:Circle类。想象一下我们正在为一个简单的Canvas库编写这个Circle类,在众多需要考虑的因素中,我们可能更想了解以下功能的实现方式:

  • 在给定的Canvas上绘制一个给定圆。

  • 跟踪记录生成圆的总数。

  • 跟踪记录给定圆的半径,以及如何使其值成为圆的不变条件

  • 计算给定圆的面积。

按照目前常见的JS编码风格,我们首先应该以函数的形式创建一个构造函数,然后给该函数添加任何我们可能想要的属性,然后用一个对象替换构造函数的prototype属性。这个prototype对象将包含构造函数创建的实例的所有初始化属性。下面是一个简单的示例,可以直接作为样板文件(boilerplate)重复使用:

1.png

这段代码非常繁琐且不符合人的直觉,要想读懂必须对函数的运行方式有着非凡的掌握,然后你才能理解各种已装载的属性与生成的实例对象进行绑定的方式。如果这种方法看起来很复杂,不要担心,这篇文章会为你展示一种更简单的方法来实现所有这些功能。

方法定义语法

ES6提供一种向对象添加特殊属性的新语法,可以帮助我们清理这些方法。给Circle.prototype添加area方法非常简单,但是给radius添加getter/setter方法对就很难。随着JS引入越来越多的面向对象方法,人们开始对简化给对象添加访问器的方法感兴趣。我们需要一种功能类似obj.prop = method的新方法来给对象添加“方法”,同时不借助Object.defineProperty的力量。人们想要能够简单地实现以下功能:

  • 给对象添加标准的函数属性。

  • 给对象添加生成器函数属性。

  • 给对象添加标准的访问器函数属性。

  • 给对象添加任意使用[]语法添加的函数属性,我们称其为预计算(computed)属性名。

其中一些功能在以前无法实现,例如:我们不能通过给obj.prop赋值来定义getter或setter。因此,我们亟需新语法来编写以下代码:

2.png

现在,我们可以用这种新语法重写上面的代码片段:

3.png

讲究地说,这段代码与上面的代码段并不完全相同,装载后的对象字面量中的方法定义是可配置(configurable)和可枚举(enumerable) 的,然而在第一段代码段中却不是这样。事实上,很少有人会注意到这个问题,我决定为了简洁起见暂时省略可枚举性和可配置性。

不过,这段代码依然变得更好了,不是么?不幸的是,即使有了新的方法定义语法,我们仍然不能武装到牙齿,所以仍然需要通过定义函数来定义Circle类。没有一种方法能够让你在定义函数时就获取它的属性。

类定义语法

尽管这比以前更好,但是它仍然不能满足人们对于简洁的JavaScript面向对象解决方案的渴望。在其它语言中,有一个句法结构可以用来处理面向对象设计的问题,经过一番讨论后他们将其命名为类(Class)。

好吧,让我们也来添加一些类。

我们需要这样一个系统:给命名构造函数添加方法的同时给函数的.prototype属性也添加相应方法,从而用这个类构造出的实例也包含相应的方法。既然我们掌握了一种崭新的方法定义语言,我们一定要物尽其用。在类的所有实例中,我们只需要一种区分普通函数与特殊函数的方法,在C++或Java中,这种功能对应的关键字是static。这种方法看起来不错,让我们用起来!

我们还需要一个方法,可以在一堆方法中指定出唯一的构造函数。在C++或Java中,构造函数与类同名,并且没有返回类型。既然JS没有返回类型,我们无论如何都需要一个.constructor属性来支持向后兼容性,你可以称之为方法构造函数(method constructor)。

将所有的概念组合到一起后,我们可以重写Circle类并实现所有功能:

filehelper_1482698934169_11.png

哇嗷!我们不仅可以实现Circle所需的功能,还能使代码如此简洁,这比刚开始好多了!

虽然如此,有的人有可能会遇到问题或碰到边缘用例。我会尝试着预测你们将会遇到的问题并一一解答:

  • 分号是怎么回事?—— 在一次“打造传统类”的尝试中,我们决定编写一个更传统的分隔符。如果不喜欢可以不写,分隔符是可选的。

  • 如果我不想要一个构造函数,但是仍然想在创建的对象中放置方法呢?—— 好吧,constructor方法也是可选的,对象中会默认声明一个空的构造函数constructor() {}。

  • 可以用生成器作为构造函数么?—— 坚决不可以!构造器不是普通方法,随意添加将会触发类型错误(TypeError),这条规则同样适用于生成器和访问器。

  • 我可以用预计算属性名来定义构造函数么?—— 很不幸的是不可以!那将会变得很难预测,所以我们不去尝试。如果你用预计算属性名定义一个方法来命名构造函数,你将得到一个名为constructor的方法,它就不是类的构造函数了。

  • 如果我改变了Circle的值,会导致new Circle的行为异常么?—— 不会!类与函数表达式类似,会得到一个给定名称的内部绑定,这个绑定不会被外部力量改变,所以无论你在外围作用域给Circle变量设置什么值,构造器中的Circle.circlesMade++依然会像预期一样运行。

  • 好的,但是我可能直接给函数传一个对象字面量作为参数,类是不是就不能实例化了?—— 幸运的是,ES6中也支持类表达式!可以是命名或匿名表达式,且行为与上述一致,唯一的区别是它们不会在你声明它们的作用域中创建变量。

  • 上面提到的可枚举性、可配置性又如何解释呢?—— 人们希望在类中装载的方法是可配置、不可枚举的。一来你可以在对象中装载方法,二来当你枚举对象属性时,不会将装载的方法枚举出来,得到的只是附加的数据属性,这样做是有道理的。

  • 嗨,等等……什么……?我的实例变量在哪儿?静态和常量呢?—— 好吧,你问住我了。ES6目前的定义中不存在相关信息。但是有个好消息,在诸多的规范进程中,我强烈支持在类语法中加入可选的static和const关键字,该提案已经正式向规范会议递交并处于议程中,我认为我们可以期待在未来会产生更多的相关讨论。

  • 好的,即使这样,这些内容都很赞!我们现在可以使用这些技术么?—— 不完全可以。目前,你们可以借助polyfill(尤其是Babel)来熟悉特性的相关语法,等到所有主流浏览器原生支持还需要一段时间。我已经在Firefox的Nightly版本中实现了我们所讨论的所有特性;同样,这些特性在Edge和Chrome中也已实现,只是默认不启用;目前Safari尚未实现相关特性。

  • 在这里我们没有提及Java和C+++中的子类(subclassing)和super关键字,JS也有么?– 是的,它有!我们完全可以在另一篇文章中详细讨论,后续欢迎回来与我们一起探索子类,挖掘更多JavaScript类实现的强大之处。

感谢Jason OrendorffJeff Walden引导我设计这一功能并为我所有的实现做代码审查,正是有了他们我才能实现类的相关特性。

深入浅出ES6

本专栏文章来自Mozilla Web开发者博客(https://hacks.mozilla.org/category/es6-in-depth/),由作者授权翻译并发布,译者为Lenville。

点击标题即可跳转至相应文章。

  1. ES6是什么

  2. 迭代器和for-of循环

  3. 生成器 Generators

  4. 生成器 Generators,续篇

  5. 模板字符串

  6. 不定参数和默认参数

  7. 解构 Destructuring

  8. 箭头函数 Arrow Functions

  9. 学习Babel和Broccoli,马上就用ES6

  10. 集合

  11. 代理 Proxies

前端之巅

前端之巅是关注前端技术的垂直社群,欢迎各位前端工程师的加入!加群请关注“前端之巅”公众号并发送“加群”,投稿请请发邮件到editors@cn.infoq.com,注明“前端之巅投稿”。

长按二维码关注       前  端  之  巅

 紧跟前端发展  共享一线技  万名淀粉互助  共登前端之巅

原文来自:前端之巅

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
如何根据语言习惯简化对象构造函数的创建过程
发布:2016-12-26 04:34:31

本文转自前端之巅(ID: frontshow),作者是Eric Faust,前端之巅是一个坚持原创内容的前端技术社区媒体,推荐关注! 

ECMAScript 6已经正式发布后,作为它最重要的方言,JavaScript迎来了语法上的重大变革,前端之巅“深入浅出ES6”专栏将详细分析变革中的细节知识。文末附有“深入浅出ES6”专栏文章列表。

本文将与你一起讨论如何根据语言习惯简化对象构造函数的创建过程。

目前面临的问题

假如我们想要创建一个经典的面向对象设计示例:Circle类。想象一下我们正在为一个简单的Canvas库编写这个Circle类,在众多需要考虑的因素中,我们可能更想了解以下功能的实现方式:

  • 在给定的Canvas上绘制一个给定圆。

  • 跟踪记录生成圆的总数。

  • 跟踪记录给定圆的半径,以及如何使其值成为圆的不变条件

  • 计算给定圆的面积。

按照目前常见的JS编码风格,我们首先应该以函数的形式创建一个构造函数,然后给该函数添加任何我们可能想要的属性,然后用一个对象替换构造函数的prototype属性。这个prototype对象将包含构造函数创建的实例的所有初始化属性。下面是一个简单的示例,可以直接作为样板文件(boilerplate)重复使用:

1.png

这段代码非常繁琐且不符合人的直觉,要想读懂必须对函数的运行方式有着非凡的掌握,然后你才能理解各种已装载的属性与生成的实例对象进行绑定的方式。如果这种方法看起来很复杂,不要担心,这篇文章会为你展示一种更简单的方法来实现所有这些功能。

方法定义语法

ES6提供一种向对象添加特殊属性的新语法,可以帮助我们清理这些方法。给Circle.prototype添加area方法非常简单,但是给radius添加getter/setter方法对就很难。随着JS引入越来越多的面向对象方法,人们开始对简化给对象添加访问器的方法感兴趣。我们需要一种功能类似obj.prop = method的新方法来给对象添加“方法”,同时不借助Object.defineProperty的力量。人们想要能够简单地实现以下功能:

  • 给对象添加标准的函数属性。

  • 给对象添加生成器函数属性。

  • 给对象添加标准的访问器函数属性。

  • 给对象添加任意使用[]语法添加的函数属性,我们称其为预计算(computed)属性名。

其中一些功能在以前无法实现,例如:我们不能通过给obj.prop赋值来定义getter或setter。因此,我们亟需新语法来编写以下代码:

2.png

现在,我们可以用这种新语法重写上面的代码片段:

3.png

讲究地说,这段代码与上面的代码段并不完全相同,装载后的对象字面量中的方法定义是可配置(configurable)和可枚举(enumerable) 的,然而在第一段代码段中却不是这样。事实上,很少有人会注意到这个问题,我决定为了简洁起见暂时省略可枚举性和可配置性。

不过,这段代码依然变得更好了,不是么?不幸的是,即使有了新的方法定义语法,我们仍然不能武装到牙齿,所以仍然需要通过定义函数来定义Circle类。没有一种方法能够让你在定义函数时就获取它的属性。

类定义语法

尽管这比以前更好,但是它仍然不能满足人们对于简洁的JavaScript面向对象解决方案的渴望。在其它语言中,有一个句法结构可以用来处理面向对象设计的问题,经过一番讨论后他们将其命名为类(Class)。

好吧,让我们也来添加一些类。

我们需要这样一个系统:给命名构造函数添加方法的同时给函数的.prototype属性也添加相应方法,从而用这个类构造出的实例也包含相应的方法。既然我们掌握了一种崭新的方法定义语言,我们一定要物尽其用。在类的所有实例中,我们只需要一种区分普通函数与特殊函数的方法,在C++或Java中,这种功能对应的关键字是static。这种方法看起来不错,让我们用起来!

我们还需要一个方法,可以在一堆方法中指定出唯一的构造函数。在C++或Java中,构造函数与类同名,并且没有返回类型。既然JS没有返回类型,我们无论如何都需要一个.constructor属性来支持向后兼容性,你可以称之为方法构造函数(method constructor)。

将所有的概念组合到一起后,我们可以重写Circle类并实现所有功能:

filehelper_1482698934169_11.png

哇嗷!我们不仅可以实现Circle所需的功能,还能使代码如此简洁,这比刚开始好多了!

虽然如此,有的人有可能会遇到问题或碰到边缘用例。我会尝试着预测你们将会遇到的问题并一一解答:

  • 分号是怎么回事?—— 在一次“打造传统类”的尝试中,我们决定编写一个更传统的分隔符。如果不喜欢可以不写,分隔符是可选的。

  • 如果我不想要一个构造函数,但是仍然想在创建的对象中放置方法呢?—— 好吧,constructor方法也是可选的,对象中会默认声明一个空的构造函数constructor() {}。

  • 可以用生成器作为构造函数么?—— 坚决不可以!构造器不是普通方法,随意添加将会触发类型错误(TypeError),这条规则同样适用于生成器和访问器。

  • 我可以用预计算属性名来定义构造函数么?—— 很不幸的是不可以!那将会变得很难预测,所以我们不去尝试。如果你用预计算属性名定义一个方法来命名构造函数,你将得到一个名为constructor的方法,它就不是类的构造函数了。

  • 如果我改变了Circle的值,会导致new Circle的行为异常么?—— 不会!类与函数表达式类似,会得到一个给定名称的内部绑定,这个绑定不会被外部力量改变,所以无论你在外围作用域给Circle变量设置什么值,构造器中的Circle.circlesMade++依然会像预期一样运行。

  • 好的,但是我可能直接给函数传一个对象字面量作为参数,类是不是就不能实例化了?—— 幸运的是,ES6中也支持类表达式!可以是命名或匿名表达式,且行为与上述一致,唯一的区别是它们不会在你声明它们的作用域中创建变量。

  • 上面提到的可枚举性、可配置性又如何解释呢?—— 人们希望在类中装载的方法是可配置、不可枚举的。一来你可以在对象中装载方法,二来当你枚举对象属性时,不会将装载的方法枚举出来,得到的只是附加的数据属性,这样做是有道理的。

  • 嗨,等等……什么……?我的实例变量在哪儿?静态和常量呢?—— 好吧,你问住我了。ES6目前的定义中不存在相关信息。但是有个好消息,在诸多的规范进程中,我强烈支持在类语法中加入可选的static和const关键字,该提案已经正式向规范会议递交并处于议程中,我认为我们可以期待在未来会产生更多的相关讨论。

  • 好的,即使这样,这些内容都很赞!我们现在可以使用这些技术么?—— 不完全可以。目前,你们可以借助polyfill(尤其是Babel)来熟悉特性的相关语法,等到所有主流浏览器原生支持还需要一段时间。我已经在Firefox的Nightly版本中实现了我们所讨论的所有特性;同样,这些特性在Edge和Chrome中也已实现,只是默认不启用;目前Safari尚未实现相关特性。

  • 在这里我们没有提及Java和C+++中的子类(subclassing)和super关键字,JS也有么?– 是的,它有!我们完全可以在另一篇文章中详细讨论,后续欢迎回来与我们一起探索子类,挖掘更多JavaScript类实现的强大之处。

感谢Jason OrendorffJeff Walden引导我设计这一功能并为我所有的实现做代码审查,正是有了他们我才能实现类的相关特性。

深入浅出ES6

本专栏文章来自Mozilla Web开发者博客(https://hacks.mozilla.org/category/es6-in-depth/),由作者授权翻译并发布,译者为Lenville。

点击标题即可跳转至相应文章。

  1. ES6是什么

  2. 迭代器和for-of循环

  3. 生成器 Generators

  4. 生成器 Generators,续篇

  5. 模板字符串

  6. 不定参数和默认参数

  7. 解构 Destructuring

  8. 箭头函数 Arrow Functions

  9. 学习Babel和Broccoli,马上就用ES6

  10. 集合

  11. 代理 Proxies

前端之巅

前端之巅是关注前端技术的垂直社群,欢迎各位前端工程师的加入!加群请关注“前端之巅”公众号并发送“加群”,投稿请请发邮件到editors@cn.infoq.com,注明“前端之巅投稿”。

长按二维码关注       前  端  之  巅

 紧跟前端发展  共享一线技  万名淀粉互助  共登前端之巅

原文来自:前端之巅

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future