`
liuhd2010
  • 浏览: 148062 次
  • 性别: 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

    在JavaScript中,对象转换成JSON(JavaScript Object Notation)是一种常见的数据交换格式,它轻量级、易读、易写,被广泛应用于Web应用程序之间传递数据。JSON格式是基于JavaScript的一个子集,但它并不是...

    JavaScript资源大全中文版

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域更是发挥着核心作用。"JavaScript资源大全中文版"是一个集合了各种JavaScript工具、库、框架和资源的综合指南,旨在帮助开发者更高效地进行JavaScript开发。...

    JavaScript中的类继承

    JavaScript中的类继承是一种模拟传统面向对象编程中类概念的方式,因为JavaScript本身是一种基于原型的面向对象语言。在JavaScript中,对象可以直接从其他对象继承属性和方法,而不是通过类的实例化。这种继承机制...

    使用JavaScript+CSS实现翻转魔方.rar

    在本项目中,“使用JavaScript+CSS实现翻转魔方.rar”是一个编程教程,教你如何使用JavaScript和CSS这两种前端技术来创建一个可交互的翻转魔方。这个项目旨在帮助开发者提升网页动态效果的制作能力,同时也是一种...

    javascript后台调用的工具类

    1. **数据类型转换**:JavaScript的数据类型灵活多变,工具类可能提供将JavaScript值转化为C#可理解的类型的功能,如字符串转数字、JSON解析等。 2. **网络请求**:封装了AJAX或者fetch API,方便进行HTTP请求,...

    JS(javascript)-md5加密工具类

    JavaScript中的MD5加密工具类是用于对数据进行安全哈希的一种方法,广泛应用于密码存储、数据完整性校验等场景。MD5(Message-Digest Algorithm 5)是一种广泛使用的哈希函数,它能将任意长度的输入转化为固定长度的...

    Angular和Javascript有什么关系?

    Angular 和 JavaScript 之间存在着紧密的关系,这主要体现在Angular作为一个前端框架的设计和...无论是JavaScript开发者还是TypeScript新手,学习Angular都需要对这两者有深入的理解,以便充分利用这个框架带来的优势。

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

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

    JavaScript图片特效类

    JavaScript图片特效是网页动态设计中的一个重要组成部分,它可以让网页中的图片更具吸引力,提升用户体验。JavaScript是一种广泛用于浏览器端的脚本语言,通过它可以实现各种各样的图片处理和动画效果。在网页开发中...

    javascript写类方式之六

    尽管没有具体的代码,但可以想象它可能包含了一个使用上述类方式实现的JavaScript类。通过分析这个文件,我们可以学习到实际编程中类的运用,以及如何将理论知识应用到实践中。 总结起来,JavaScript的类方式多种...

    asp.net中javascript通用类

    通过这样的通用JavaScript类,开发者可以创建出更健壮、可维护的ASP.NET应用,同时提高开发效率。不过,随着技术的发展,现代Web开发中更多地倾向于使用库和框架(如jQuery、React、Vue等),它们提供了更高级别的...

    javaScript经典实例

    11. **ES6+特性**:包括箭头函数、解构赋值、模板字符串、类和模块等,这些新特性使JavaScript更现代化,提高了开发效率。 这个包含272个超酷经典推荐JavaScript代码的压缩包,无疑是学习和查阅JavaScript实用技巧...

    JavaScript讲义完整版.docx

    学习JavaScript,你需要掌握其语法特性、面向对象编程、DOM操作、AJAX异步通信、框架如jQuery、React或Vue等,以及ES6及以上版本的新特性,如箭头函数、Promise、模块系统等。通过不断实践和深入学习,才能真正掌握...

    一种JavaScript矢量类型带有GLSL启发式转换

    JavaScript矢量类型是一种在Web开发中用于处理图形和计算的工具,特别是在3D图形渲染和游戏开发中。GLSL(OpenGL Shading Language)是编写着色器的语言,它允许我们直接在GPU上运行代码,以实现高效的图形处理。将...

    什么是javascript,学习javascript

    此外,JavaScript还支持面向对象编程,包括构造函数、原型链、类(ES6新增)等。 开发JavaScript时,可以使用各种工具,如集成开发环境(IDEs,如Visual Studio Code、WebStorm)、文本编辑器、包管理器(npm)、...

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

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

    pinyin4js是一个汉字转拼音的Javascript开源库

    “JavaScript开发-其它杂项”标签表明这个库属于JavaScript开发工具的范畴,但可能不是专门用于某一特定领域,而是适用于各种杂项任务,如汉字拼音转换这类通用功能。 **文件名称列表分析:** 虽然未提供具体的...

    JavaScript手册 JavaScript手册

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在客户端脚本方面扮演着核心角色。JavaScript手册是学习和掌握这门语言的重要参考资料。手册通常包含了语言的基础语法、数据类型、控制结构、函数、对象、...

    JavaScript+CSS的移动端3D翻转刷新

    当用户触发刷新或加载事件时,JavaScript可以添加或改变CSS类,从而应用翻转动画。例如,使用`classList.add()`或`classList.remove()`方法来切换“flip”或“back”类,这些类定义了翻转前后的样式。此外,...

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

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

Global site tag (gtag.js) - Google Analytics