`
liuhd2010
  • 浏览: 146112 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

[转]JavaScript真的需要类吗?

 
阅读更多

      无论你喜欢与否,ECMScript 6中将会包含类(class)的概念。在JavaScript中,类的概念一直是两级分化的。由于JavaScript与其他语言的不同,有些人喜欢 JavaScript的无类特征;另一方面,也有一些人讨厌JavaScript的无类特征。那些从C++或者Java转到JavaScript的人,需要克服的最大心理障碍就是接受JavaScript的“无类特征”,这或许也是许多人不喜欢JavaScript或者不学习JavaScript的原因之一。

      在JavaScript中并没有正式的类定义,也有一些JavaScript书籍和文章讨论过如何在JavaScript中定义类,其实那些只是自定义的构造函数。在JavaScript中,引用类型是最接近类的东西。下面的这些代码,你是不是已经很熟悉:

  1. function MyCustomType(value) {  
  2.     this.property = value;  
  3. }  
  4.  
  5. MyCustomType.prototype.method = function() {  
  6.     return this.property;  
  7. }; 

      许多时候,大家会把上面代码理解成是在声明一个MyCustomType类,事实上,这仅仅是一个名称为MyCustomType的方法,用来创建一个引用类型实例。和其他方法并无不同之处,它只是使该函数当做构造函数使用罢了。

      这段代码根本看不出像是在定义类,事实上,构造函数的定义和其原型对象上的方法有很少的联系。对于JavaScript新手来说,这是完全独立的两部分代码,但其实它们有非常紧密的联系,只是和其他语言定义类不一样而已。

更令人困惑的是,一旦人们提到继承,首先想到的都是父类和子类这些概念,而这些概念只有在真正存在“类”的前提下,才会真正明白其含义。同样,在JavaScript中,继承的语法也是混杂冗长的:

  1. function Animal(name) {  
  2.     this.name = name;  
  3. }  
  4.  
  5. Animal.prototype.sayName = function() {  
  6.     console.log(this.name);  
  7. };  
  8.  
  9. function Dog(name) {  
  10.     Animal.call(this, name);  
  11. }  
  12.  
  13. Dog.prototype = new Animal(null);  
  14. Dog.prototype.bark = function() {  
  15.     console.log("Woof!");  
  16. }; 

      实现继承需要两个步骤,创建构造函数和重写原型对象,这样的代码是非常混乱的。

      在第一版的《Professional JavaScript for Web Developers》中,我直接使用“class”这个专有名词。在后来我收到的反馈中发现,用户对这个名称是存在困惑和异议的,于是,在第二版里面我把所有的“class”换成了“type”。这样就消除了很多困惑。

      然而,这仍然还是个比较突出的问题,自定义类型定义还是令人困惑、语法混乱的。两个类型之间实现继承更加复杂。没有什么简单的方法可以直接调用超类方法。如果你认为这不是个问题,那么请看看下面的这些JavaScript框架,它们已经推出了自己的自定义类型、继承:

  • YUI——Y.extend()方法来实现继承。当使用这个方法的时候,会添加一个“superclass”属性。
  • Prototype——Class.create()方法和Object.extend()方法来处理对象和“类”。
  • Dojo——使用dojo.declare()方法和dojo.extend()方法。
  • MooTools——有一个“Class”的自定义类型,用于定义和扩展类。

      显而易见,这么多JavaScript框架自定义解决方案明显是不行的,这样反而会更加混乱。JavaScript开发人员需要比当前语法更好更简洁的解决方案。

ECMAScript 6只不过是在你熟知的模式上添加了一层语法糖。例如下面这个例子:

  1. class MyCustomType {  
  2.     constructor(value) {  
  3.         this.property = value;  
  4.     }  
  5.  
  6.     method() {  
  7.         return this.property;  
  8.     }  

      其实这个来创建类和之前提到的使用构造函数来创建对象实例是一样的。唯一的不同点是这个语法更加简洁紧凑。那么该如何实现继承呢:

  1. class Animal {  
  2.     constructor(name) {  
  3.         this.name = name;  
  4.     }  
  5.  
  6.     sayName() {  
  7.         console.log(this.name);  
  8.     }  
  9. }  
  10.  
  11. class Dog extends Animal {  
  12.     constructor(name) {  
  13.         super(name);  
  14.     }  
  15.  
  16.     bark() {  
  17.         console.log("Woof!");  
  18.     }  

      与之前那个继承例子相比,这段代码明显清晰明了。使用extends关键字来代替复杂笨重的多步骤继承模式。同时,直接在子类中使用super()方法,无需去声明超类构造函数。

      当前,所有的ECMAScript 6类都是基于你已熟知的JavaScript模式。继承的工作模式也一样(原型链接加上调用超类的构造函数),把方法添加到原型上,在构造函数中声明属性。唯一的不同点是你可以输入更少的代码。

      因此,当有人讨论ECMAScript 6引入“类”这个概念是否合适时,请注意,这个概念还是很抽象的。它并没有从根本上改变JavaScript的工作原理。它也没引入一个新的东西,它就是简单的在你已使用过的模式上定义一层语法糖。其实这也解决了JavaScript长期存在的一个问题——冗长和混乱的自定义类型语法。但我个人推荐使用 type来代替class。

      所以,JavaScript真的需要定义类吗?答案当然是不,JavaScript需要一个简洁的方法来定义自定义类型。刚好,ECMAScript 6里面的“class”提供了这样的方法,并且如果这个“class”能够帮助开发人员轻松地把其他语言转换成JavaScript,那么,这绝对是个好东西!

分享到:
评论

相关推荐

    javascript对象转换成json

    支持将自身转换成json字符串输出

    Web前端开发技术-认识JavaScript的数据类型.pptx

    认识JavaScript的数据类???;基本数据类型-null类型;可以给一个变量赋一个null值,下面通过代码演示null值的使用。; 数据类型检测;认识JavaScript的数据类型;认识JavaScript的数据类型; 数据类型转换;认识JavaScript...

    javascript将当前的毫秒数转成当期日期

    javascript将当前的毫秒数转成当期日期,很有用的工具类。里面讲的是对Date的扩展,将 Date 转化为指定格式的String , 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符, ...

    JavaScript工具类,小驼峰转大写下划线与大写下划线转小驼峰

    JavaScript工具类,可以实现小驼峰命名转大写下划线命名与大写下划线命名转小驼峰命名

    JavaScript精彩网页特效实例精粹(JavaScript常用代码)

    第一章.文本特效类 第二章.图片特效类 第三章.鼠标键盘类 第四章.按钮特效类 第五章.日期时间类 第六章.计数转换类 第七章.系统检测类 第八章.页面特效类 第九章....第十六章.JavaScript连接数据库实例

    javascript实例应用---计数转换类.rar

    javascript实例应用---计数转换类.rarjavascript实例应用---计数转换类.rarjavascript实例应用---计数转换类.rarjavascript实例应用---计数转换类.rar

    玩转JavaScript OOP – 类的实现详解

    JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类。 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现”类”。 对象和类的概念 对象 “对象”是面向对象...

    实际项目中绝对实用的JavaScript公共类 - JavaScriptClass

    实战项目中后台cs文件弹出提示或者转向,或者模态窗口弹出,模态窗口弹出提示后刷新父页面或者跳转新页面等等,总结了10来个常用的方法,可以直接加载到您的项目中调用。简化您每次都要Respose.write(大一堆打印脚本...

    JavaScript精彩网页特效实例精粹

    Ajax与XMLHttpRequest JavaScript连接数据库实例 按钮特效类 菜单特效类 计数转换类 流行特效类 密码校验类 日期时间类 鼠标键盘类 图片特效类 文本特效类 系统检测类 页面特效类 游戏类 在线测试类 综合类

    JavaScript详解(第2版)

    第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 ...

    JavaScript权威指南(第6版)

    《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...

    JSON对象转换工具类(JavaScript端)

    挺好用的一个JSON转换工具包,含Java端与JavaScript端的JSON对象转换工具类,使用时直接导入至项目源文件中并调用相关类及方法即可。此文件为JavaScript端使用,如需Java端的请移步我的另一上传资源“JSON对象转换...

    JavaScript权威指南(第6版)中文版pdf+源代码

     9.3 JavaScript中Java式的类继承207  9.4 类的扩充210  9.5 类和类型212  9.6 JavaScript中的面向对象技术217  9.7 子类230  9.8 ECMAScript 5 中的类239  9.9 模块248  第10章 正则表达式的模式匹配253  ...

    JavaScript权威指南(第6版)(附源码)

    9.3 JavaScript中Java式的类继承 9.4 类的扩充 9.5 类和类型 9.6 JavaScript中的面向对象技术 9.7 子类 9.8 ECMAScript 5 中的类 9.9 模块 第10章 正则表达式的模式匹配 10.1 正则表达式的定义 10.2 用于模式匹配的...

    C#实现JavaScript帮助类

    C#帮助类(Helper class)是一种用于封装常用功能的类。它通常包含一组静态方法,这些方法能够执行特定的任务或提供通用的功能。帮助类的目的是为了提高代码的可重用性和可维护性,避免重复编写相似的功能代码。 ...

    javascript高级教程.pdf

    第1 章 JavaScript 基 础 1.1 关 于JavaScript 1.2 了 解JavaScript 1.3 World Wide Web 1.4 Web 应用程序结构 1.5 JavaScript 与VBScript 第2 章 JavaScript 与HTML 2.6 HTML 基 础 2.7 在HTML 文档中嵌入...

    JavaScript权威指南(第6版)中文文字版

    9.3 javascript中java式的类继承 207 9.4 类的扩充 210 9.5 类和类型 212 9.6 javascript中的面向对象技术 217 9.7 子类 230 9.8 ecmascript 5 中的类 239 9.9 模块 248 第10章 正则表达式的模式匹配 253 10.1 正则...

    javascript学习笔记.docx

    1 JavaScript基本语法 1) 读未声明的变量会产生错误。写未声明的变量会是JavaScript环境自动产生一个全局变量。 2) 对于完全等同“===”,两个null或者两个undefined是等同的;但null与undefined是不等同的。 3) ...

    程序天下:JavaScript实例自学手册

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    JavaScript模式中文[pdf] 百度云

     JavaScript:基本概念  ECMAScript 5  JSLint  Console  第2章 基本技巧  编写可维护的代码  尽量少用全局变量  for循环  for-in循环  不要增加内置的原型  SWitch模式  避免使用隐式类型转换  使用...

Global site tag (gtag.js) - Google Analytics