js对象的创建对象模式和继承模式(上)---构建对象模式

简介: js对象的创建对象模式和继承模式(上)---构建对象模式

前言

      ECMAScript与其他面向对象语言不同的是,它没有类的概念,因此它的对象也和基于类的语言中的对象有所不同,深入理解js的对象是每个前端工程师的基本素养,本文将就创建对象模式的方面对对象进行介绍


正文

      我们可以通过Object构造函数或对象字面量构建对象,但是使用同一个接口创建很多对象时候,会产生大量重复代码,下面将介绍解决这个问题的各种模式


工厂模式

      其实就是用函数来封装创建对象的细节来实现复用,但这样不能直接获得对象的类型

640.png

构造函数模式

      自定义构造函数来定义一个类型的自定义对象类型的属性和方法来实现定义的复用

640.png

       构造函数模式和工厂模式还是有着很大的区别的:

  • 没有显式地创建对象
  • 直接将属性和方法赋值给了this对象,这个this对象对指向新创建的对象
  • 没有return实例

      构造函数与其他函数不同的是,它的调用需要用过new操作符,如果不使用New操作符,则this会指向window对象640.png


      构造函数虽然好用,但是有个比较大的缺点,会将每个方法都在实例上重复创建。事实上,创建多个完成同个任务的Function实例是没有必要的,所以我建议大家将函数的定义转移到函数外面来解决这个问题

640.png


原型模式

      我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法,原型是什么,这里我就不再复述了,不懂的同学可以Bing或者谷歌,或者查看我后面写的关于原型的博客章节

像之前的写法一样,通过原型把创建对象的操作封装在函数中就是原型模式

640.png

   特别的是,通过这种方法创建的新的对象,在修改属性的过程中,只会修改到实例的属性,而不会影响到原型

640.png

      当然,这种最初始的写法是不优雅的,在上面的例子中每为Person创建一个属性,就需要写一次Person.prototype,产生了大量的不必要输入,常见的写法可以用一个包含所有属性和方法的字面量去重写prototype

640.png

     这里要注意constructor属性,在默认情况下,所有原型对象都会自动获取一个constructor属性,这个属性是一个指向prototype属性所在函数的指针。如果在重写prototype的过程中忘记对constructor属性赋值,就没办法再通过constructor确认对象那个的类型

640.png

      可以看到在原型忘记赋值constructor以后,Person定义的对象与Person之间的连接就断开了,没办法再用instanceof获取到他们的关系

      同时由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能立刻从实例上反映出来–即使是先创建640.png了实例后修改原型也照样如此。


      可以看到即使在per创建之后再修改原型,仍然会影响到per,这就是原型的动态性,原型的获取是一次搜索,而不是静态的,会随时变化

      但是对原型的重写就不一样了,要注意的是,原型修改为另一个对象就等于切断了构造函数与最初原型的联系,实例中的指针只指向原型,不指向构造函数

640.png

      可以看到重写以后,Person指向的原型就不再是最初的原型,而per对象也不会再指向Person的原型,重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系,它们引用的仍然是最初的原型

      原型模式省略了构造函数传递初始化参数的环节,有一个致命的问题,引用对象的属性会被所有实例共享

640.png

      可以看到对per1的friends修改会共享给per2,因为数组的修改并不会修改它的别人对它的引用,所以在原型上修改,意味着所有的对象都会共享这个对象的修改


组合使用构造函数模式和原型模式

      之前介绍了工厂模式,构造函数模式和原型模式,都有它们的优势和缺陷,那么这里将介绍目前在ECMAScript使用最广泛,认同度最高的一种创建自定义类型的方法

      构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。这样一来,每个实例都会有自己的一份实例属性的副本,但是同时又共享着对方法的引用,最大限度地节省了内存。

640.png

       这样避免了构造函数方法需要创建多个重复Function实例的问题,又可以避免原型模式导致的非共享的引用属性共享给所有对象的问题


ES6 类

      ES6中引用了类的对象,后面我会在专门的章节介绍ES6中类的部分,所以这里卖个关子,感兴趣的同学可以看我后面关于ES6类的介绍


小结

      1、构造函数模式定义的类型的方法会因为this的关系导致不同的作用域链和标识符解析,所以即使是一样机制的同名函数却不相等

      2、原型模式定义的引用类型的属性会在所有的对象中共享

      3、构造函数适合定义实例属性,而原型模式适合定义方法和需要共享的属性,结合使用是认同度最高的写法

      小伙伴们今天的学习就到这里了,如果觉得本文对你有帮助的话,欢迎转发,评论,收藏,点赞!!!

目录
相关文章
|
5月前
|
JavaScript 前端开发 物联网
JavaScript:构建动态世界的引擎
JavaScript:构建动态世界的引擎
|
5月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态网络的引擎
JavaScript:构建动态网络的引擎
|
5月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
9月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
10月前
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
DIY.JS 是一款基于原生 Canvas 的业务级图形库,专注于商品定制的图形交互功能,帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能,无需从零构建,快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验,文档详细,易上手。
502 57
|
10月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
327 23
|
10月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
1268 44
|
11月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。

热门文章

最新文章