`
shizisongsong
  • 浏览: 39551 次
文章分类
社区版块
存档分类
最新评论

JavaScript需要类吗?

阅读更多

在我长达一年的工作生涯中,我遇到过有人把构造函数称做类,还有人把对象字面量称做类.这比把火狐扩展叫成插件都令我*疼.

无论你喜欢还是不喜欢,ECMAScript 6中将会包含类(class)这个新东西了[1].在JavaScript中,对类的需求一直都有两极分化的趋势.有些人特别喜欢JavaScript中没有类,因为这和其他语言不同.另一方面,还有一些人厌恶JavaScript没有类,因为这和其他语言不同.那些从C++或Java转到JavaScript的人们最需要克服的一个心理障碍就是"JavaScript中没有类",有些人和我说过,这就是他们为什么不喜欢Javascript或者不继续深入学习Javascript的原因之一.

 

JavaScript从发明的那天起就没有真正的类,这使得从一开始就造成了混乱.有不少JavaScript书籍或文章中都讲到了类,就好像JavaScript中真的存在类一样.但其实,他们所说的类只是一些自定义的构造函数,这些函数可以用来构造一些自定义的引用类型.在JavaScript中,引用类型已经是最接近于类的东西了.下面的代码你应该已经很熟悉了: 可以500%提高开发效率的前端UI框架!

function MyCustomType(value) { 
    this.property = value; 
} 
   
MyCustomType.prototype.method = function() { 
    return this.property; 
};

 

 

很多时候,这种代码被解释为是声明了一个MyCustomType类.但实际上,该代码做的所有事情仅仅是声明了一个MyCustomType函数,配合new运算符可以用它创建一个引用类型MyCustomType的实例.该函数和其他的函数并没有什么本质的不同.因为其他自定义的函数也可以作为构造函数来使用.

 

这样的代码从表面上看起来根本不像是在定义一个类,被定义的构造函数和其原型对象上的方法似乎没有什么联系.如果是JavaScript新手,很可能会认为这是两段完全无关的代码.但实际上,这两段代码有非常紧密的联系,只是和其他语言中的类的写法相差甚远罢了.

 

更令人困惑的是,一旦谈到继承,大部分人想到的术语是子类和超类等等,这样的概念只有在存在真正的类的前提下才有意义.在JavaScript中,实现继承的代码同样是冗长的: 可以500%提高开发效率的前端UI框架!

function Animal(name) { 
    this.name = name; 
} 
   
Animal.prototype.sayName = function() { 
    console.log(this.name); 
}; 
   
function Dog(name) { 
    Animal.call(this, name); 
} 
   
Dog.prototype = new Animal(null); 
Dog.prototype.bark = function() { 
    console.log("Woof!"); 
};

 

 

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

 

在第一版的《JavaScript高级程序设计》中,我使用过术语"类".但从我收到的反馈中看,这样写是很令人困惑的.所以在第二版中,我把所有的"类(class)"都替换成了"类型(type)".事实表明,使用"类型"这个术语可以减少很多的混乱.

 

可是,还有一个比较突出的问题:定义一个自定义类型的语法是冗长的,实现两个类型之间的继承会更加复杂.没有什么简单的方法可以调用一个属于超类型的方法.在目前看来,创建并管理一个自定义类型是件很痛苦的事,如果你不信,可以看看有下面有多少JavaScript框架使用了自己的定义自定义类型和继承的方法:

  • YUI– 用Y.extend()来实现继承.使用该方法会在子类型上添加一个"superclass"属性.[2]

  • Prototype– 用Class.create()和Object.extend()来处理对象和"类".[3]

  • Dojo– 使用dojo.declare()和dojo.extend().[4]

  • MooTools– 有一个自定义类型Class,可以用来定义和扩展"类".[5]

这么多的JavaScript框架都有自己的解决方案,这明显是非常混乱的.JavaScript开发者们需要一种更好的实现此功能的语法.可以500%提高开发效率的前端UI框架!

 

ECMAScript 6中的类其实并没有什么新东西,只是在你已经熟悉的模式上增加了一层语法糖.看看下面这个例子:

class MyCustomType { 
    constructor(value) { 
        this.property = value; 
    } 
   
    method() { 
        return this.property; 
    } 
}

 

 

这个ECMAScript 6中的类定义其实就是本文上面那个MyCustomType例子的另一种写法.使用这种类创建的对象实例完全和使用构造函数创建的对象实例一样.唯一的区别就是前者拥有更紧凑的语法.下面看看继承的写法:

class Animal { 
    constructor(name) { 
        this.name = name; 
    } 
   
    sayName() { 
        console.log(this.name); 
    } 
} 
   
class Dog extends Animal { 
    constructor(name) { 
        super(name); 
    } 
   
    bark() { 
        console.log("Woof!"); 
    } 
}

 

 

在实际效果上这个例子也同样等同于前面那种继承的写法.只是复杂的实现步骤被一个简单的extends关键字代替了.在类定义中你还可以直接使用super(),无需明确指出超类型的构造函数.

 

ECMAScript 6中的类是基于你已经熟知的JavaScript模式.实现继承的原理还和以前一样(基于原型链,调用超类型的构造函数),方法添加在原型上,属性在构造函数中声明.真正的区别只有一个:你可以打更少的字.

 

所以,如果你现在仍然不赞同ECMAScript 6引入类这么个东西,你可以这么想,要引入的这个类不是什么新东西,也并没有从根本上改变JavaScript的工作机制.不过我个人更推荐使用关键字type而不是class.可以500%提高开发效率的前端UI框架!

 

那么JavaScript真的需要类吗?答案是不需要,但JavaScript的确需要一个更简洁的方法来创建自定义类型.这恰巧就是ECMAScript 6中的"类"正要做的.如果这个"类"能帮助来自其他语言的开发者们更容易的转向JavaScript,那么它就是好东西.

0
0
分享到:
评论

相关推荐

    Angular和Javascript有什么关系?

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

    JavaScript 操作CSS类

    JavaScript是Web开发中不可或缺的一部分,尤其在操作页面样式方面,其强大的能力使得动态改变CSS类变得轻而易举。在本文中,我们将深入探讨如何利用JavaScript来操作CSS类,为网页添加交互性和动态效果。 首先,...

    JavaScript继承

    在Java或C++等语言中,继承通常只需要一个关键字,如`extends`,但在JavaScript中,实现继承需要采用一系列技术。 JavaScript使用的是原型式继承,这是它与其他语言的一大区别。原型(Prototype)是JavaScript实现...

    JavaScript语言案例.zip

    同时,随着ES6及后续版本的发布,JavaScript引入了许多新的特性和语法糖,如箭头函数、类、解构赋值、模板字符串等,大大提升了开发效率和代码可读性。 总的来说,这个压缩包提供了全面的JavaScript学习资源,涵盖...

    JavaScript广告类特效大全

    JavaScript广告类特效大全涵盖了一系列用于增强网页互动性和用户体验的广告展示技术。这些特效主要通过JavaScript编程语言实现,利用其强大的动态功能和丰富的DOM操作能力,为网页广告设计提供了无限可能。以下将...

    aspnet操作javascript类

    在ASP.NET操作JavaScript类的实践中,我们还需要注意跨域问题、浏览器兼容性、错误处理以及性能优化等。了解和掌握这些技巧,能够帮助我们在开发过程中更好地整合这两种技术,打造高效、用户友好的Web应用。 通过...

    javascript中的类理解

    JavaScript 中的类是一种重要的编程概念,它用于模拟现实世界中的对象和它们之间的关系。在 JavaScript 中,类的概念是在 ECMAScript 6(ES6)版本引入的,之前 JavaScript 使用构造函数和原型链来实现面向对象编程...

    asp.net中javascript通用类

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

    javascript写类方式之六

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

    javascript后台调用的工具类

    JavaScript 后台调用工具类是一种实用的编程资源,它为开发者提供了在后台环境中使用 JavaScript 进行操作的便利。这个工具类旨在简化JavaScript代码,让开发者能够更高效地进行项目开发,尤其对于不熟悉JavaScript...

    JavaScript语言精粹完整版

    自ES6开始,JavaScript引入了许多新特性,如let和const声明、箭头函数、模板字符串、类和模块等,这些特性极大地丰富了JavaScript的语法,使其更加现代化和高效。 ### 实战案例分析 《JavaScript语言精粹》还提供了...

    javascript 原生态js类继承实现的方式

    类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript...

    自定义javascript 工具类

    自定义javascript 工具类

    初学者学习Javascript的好资料,保证一学就会,不学要后悔,快点来下哟

    11. **ES6+新特性**:包括类(class)、解构赋值、模板字符串、let和const、箭头函数、默认参数、剩余参数、展开运算符等,这些都极大地丰富了JavaScript的语法。 12. **Node.js**:JavaScript还可以用于服务器端...

    javaScript

    - 原型继承:JavaScript使用基于原型的继承机制,与C++和Java的类继承不同,它更接近于Self语言。 3. JavaScript的历史 JavaScript的发展历史包括以下几个重要阶段: - 引子:早在1992年,Nombas公司开发了Cmm,一...

    javascript表单验证类

    基于jquery的form表单验证类,工程项目为.net项目,主要是做了详细的调用例子,如果不使用.net,可以直接formvaildator-1.0.js或formvaildator-1.0.min.js,里面也有详细的调用说明,不过项目说明因为有例子会直观...

    JavaScript 特效类汇总

    "JavaScript特效类汇总"这个主题涵盖了许多常见的特效实现,如按钮特效、音乐播放控制、文本图像切换以及导航菜单等。 1. **按钮特效**:JavaScript可以轻松改变按钮的外观和行为,例如悬停效果、点击动画或自定义...

    在JavaScript中实现类的方式探讨

    在JavaScript中实现类的方式主要有几种,包括对象字面量(Object Literal)、构造函数(Constructor)、原型链(Prototype Chain)以及ES6引入的类语法。每种方式都有其适用的场景和特点,理解它们有助于我们更好地...

Global site tag (gtag.js) - Google Analytics