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

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

目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js:从零开始构建后端服务
【10月更文挑战第42天】在数字时代的浪潮中,掌握一门后端技术对于开发者来说至关重要。Node.js,作为一种基于Chrome V8引擎的JavaScript运行环境,允许开发者使用JavaScript编写服务器端代码,极大地拓宽了前端开发者的技能边界。本文将从Node.js的基础概念讲起,逐步引导读者理解其事件驱动、非阻塞I/O模型的核心原理,并指导如何在实战中应用这些知识构建高效、可扩展的后端服务。通过深入浅出的方式,我们将一起探索Node.js的魅力和潜力,解锁更多可能。
|
1月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
21 1
JavaScript中对象的数据拷贝
|
24天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
40 12
|
17天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
1月前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
48 5
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第40天】在JavaScript的世界里,异步编程是一道不可或缺的风景线。它允许我们在等待慢速操作(如网络请求)完成时继续执行其他任务,极大地提高了程序的性能和用户体验。本文将深入浅出地探讨Promise、async/await等异步编程技术,通过生动的比喻和实际代码示例,带你领略JavaScript异步编程的魅力所在。
30 1