JS 面向对象

JavaScript026

JS 面向对象,第1张

为了能够清楚的解释这一切,我先从对象讲起。从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的。

实际上在JS里并不是如你所想(我开始是这么想的)那样,对象或直接称为object,实际上只是一些映射对的集合,像Map,字典等概念。JS里有大概7种类型(加上Symbol),数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型,就是说它们比较单纯,包含的东西比较少,基本上就是字面量所表示的那些(像C语言中的一些类型,就是占那么多空间,没有其他的东西)。object基本上是一些键值对的集合,属于引用类型,即是有一个名字去指向它来供别人使用的,就好像比较重的东西你拿不动,而只是拿了张记录东西所在地的纸条。所以当A对象里嵌套了B对象,仅表示A里面有一个引用指向了B,并不是真正把B包含在A里面,虽然看起来是这样(尤其是从对象的字面量上来看),所以才会有所谓的深拷贝与浅拷贝。

有句话叫“JavaScript里一切皆对象”,是因为在很多情况下原始类型会被自动的转为对象,而函数实际上也是对象,这样这句话看起来就很有道理了。

说明对象的本质是为了正确地认识对象,因为这关系到后面的理解。

对象的字面量 var obj = {}

创建实例对象 var obj = new Object()

原型模式:function clock(hour){} fn.prototype.hour = 0new clock()首先,每个函数都有一个prototype(原型)属性,这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor,指向clock,这个属性可读可写。而当我们在实例化一个对象的时候,实例newClock除了具有构造函数定义的属性和方法外(注意,只是构造函数中的),还有一个指向构造函数的原型的指针,ECMAScript管叫[prototype]],这样实例化对象的时候,原型对象的方法并没有在某个具体的实例中,因为原型没有被实例。

构造函数模式 function fn(){} , new fn()

工厂模式:用一个函数,通过传递参数返回对象。function fn(params){var obj =new Object()obj.params = paramsreturn obj},fn(params)

这是一个真实的例子,展示了三种最常见的编程范式的差异。我将用三种不同的方式解决一个问题。

每个示例将处理表单提交、验证用户输入并将创建的用户打印到控制台。我还添加了保存错误记录器。

案例表单

简单的 HTML 登录表单,它将包含三个js不同范式的有效文件。

过程化编程

过程式编程只是一步一步地解决问题。这是完全有效的编码方式,但是当您希望应用程序扩展时它有许多缺点。

简单一步一步解决问题。但它根本不可重用和可扩展。尽管它对于解决此类问题完全有效,并且您将看到它比其他问题要短得多。

面向对象编程

面向对象编程 ( OOP ) 是最接近现实世界的,因此很容易让您思考。我们查看将其划分为Object的代码,其中每个都只完成它的工作。在OOP 中学习的有用概念是SOLID。

现在你可以明白我将问题划分为Objects 的意思了:

正如你所看到的,有更多的代码,看起来更复杂……那么为什么有人会喜欢这个?

酷的是,现在我们可以将它用于任何类似的形式,只需调用:

因此,它可以在包含此脚本的每个文件中重复使用。而且它很容易扩展,因为一切都被分成只做一件事的块(单一责任原则)。

函数式编程

非常流行,而且非常简单。请注意,这并不意味着它无论如何都更好。尽管某些范例可能对某些问题更好,但使用哪个完全取决于您。

正如您在 函数式编程 中看到的,我们希望使用小的(理想情况下是纯函数)函数来解决问题。这种方法也非常具有可 扩展性 ,并且函数可以重用。

纯函数是一种没有难以追踪的副作用的函数。纯函数应该只依赖于给定的参数。

结论

没有更好和更坏的范式。有经验的开发人员可以看到每个的优点,并为给定的问题选择最好的。

过程式编程并不是说你不能使用函数,函数式编程也不会阻止你使用“类”。这些范式只是帮助以一种随着代码增长而有益的方式来解决问题。

函数式编程 vs 面向对象编程 vs 过程式编程的JS演示比较 - DEV