JavaScript对象模式——组台模式_构造函数和原型模式

最新推荐文章于 2025-12-05 08:37:05 发布
原创 最新推荐文章于 2025-12-05 08:37:05 发布 · 222 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文探讨了构造函数与原型模式在创建对象时如何实现属性独立和方法共享，通过实例展示如何减少内存消耗，以及如何在构造函数中正确声明属性。

组合使用构造器+原型模式

一、作用：
1. 构造函数：定义实例属性
2. 原型：定义和共享属性

二、优点： 每一个实例都会有自己的一份实例属性，但又同时共享着方法
在这里插入图片描述
运行结果如下：
在这里插入图片描述

把obj1.userName改为“李四”，发现obj2. userName没有改变
在这里插入图片描述在这里插入图片描述
因为1-7行是不共享的，9-11行是共享的，这样最大限度的解决了内存问题。

#不管是构造函数还是上示的案例，都可以传入参数
注意构造函数里的一个属性写：声明.属性，而name是传入的参数，不用加this
在这里插入图片描述
运行结果如下：
在这里插入图片描述

Js面向对象程序设计——组合使用构造函数模式和原型模式
zhaostrong的博客
01-08 326
Js面向对象程序设计——组合使用构造函数模式和原型模式Js面向对象程序设计——组合使用构造函数模式和原型模式 Js面向对象程序设计——组合使用构造函数模式和原型模式 创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。另外，...
JS高级——对象的原型__proto__、函数的原型prototype、构造函数
zep
03-08 1446
一、认识构造函数 我们先理解什么是构造函数？ 构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数； 在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法； 但是JavaScript中的构造函数有点不太一样； JavaScript中的构造函数是怎么样的？ 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别； 那么如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数； 那么被new调用有
JavaScript设计模式——原型模式
前端御书房
10-06 602
JavaScript设计模式，原型模式——持续更新中
JavaScript设计模式（一）——构造器模式、原型模式、类模式
HuoZhiyan 的博客
08-27 1485
本篇文章我们初步认识设计模式，包括构造器模式、原型模式和类模式。用好设计模式，让我们的开发事半功倍...
Javascript 面向对象编程之二 —— 组合使用构造函数模式和原型模式
FCzhandu0的专栏
11-12 333
目录 1.1 示例 1.2 动态原型模式 1.3 寄生构造函数模式 1.1 示例 常见写法 一 function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; } Person.prototype = ...
详解JavaScript创建对象——构造函数模式
林木木的博客
07-26 2545
JavaScript面向对象篇——构造函数
原型(prototype) 和 原型链(__proto__) —— 别再为 JavaScript 的原型苦恼了
weixin_43822185的博客
10-14 1334
原型(prototype) 和 原型链(__proto__) —— 别再为 JavaScript 的原型苦恼了
JavaScript创建对象（四）——组合使用构造函数和原型模式
Bob2100
10-18 287
在JavaScript创建对象（三）——原型模式中，我们阐述了原型模式存在的两个问题：一是没办法通过构造函数初始化对象属性，二是共享引用类型的数据导致数据错乱。于是我们提出组合使用两种模式，摒弃它们的缺点，保留它们的优点。 为了解决构造函数模式相同功能的函数定义多次的问题，我们提出了原型模式。但是不要忘记，构造函数模式也具备原型模式所缺乏的优点，比如可以通过构造函数初始化对象的属性，同时也没有共享...
前端开发设计模式——原型模式
jxnd123456的博客
11-05 2579
可以定义一个构造函数，并在构造函数的原型上添加属性和方法，然后通过new关键字创建对象，这些对象将继承构造函数原型上的属性和方法。这里通过自定义构造函数创建了对象，同样实现了原型模式的功能。
深入理解JavaScript构造函数与原型模式
这一机制使得每个通过`new`创建的实例都能访问构造函数原型上定义的方法，从而实现继承。 **原型（Prototype）** 是JavaScript实现继承的基础。每个函数都有一个`prototype`属性，它是一个对象，包含可以被所有实例...
Javascript oop设计模式 面向对象编程简单实例介绍
10-20
JavaScript中的面向对象编程（OOP）是编程领域中一种重要的设计模式，它允许开发者通过类和对象的概念来组织代码，从而提高代码的可维护性和复用性。在JavaScript中，由于语言特性，OOP实现与传统面向对象语言略有...
JavaScript对象创建：字面量、构造函数与模式解析
"本文主要分析JavaScript中创建对象的常见方式及其原理，包括对象字面量形式、使用Object构造函数、工厂模式以及构造函数模式。通过这些方法，可以理解和掌握JavaScript对象创建的多样性，并解决不同场景下的需求。...
JS-创建对象模式-工厂模式、构造函数模式、原型模式、组合模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式
malechi的博客
04-24 636
原型模式 原型与原型链 我们创建的每个函数都有一个prototype属性，即原型属性。prototype属性是一个指针，指向一个包含可以由特定类型的所有实例共享的属性和方法的对象。 prototype就是通过调用构造函数而创建的那个对象实例的原型对象，使用原型对象的好处是可以让所有对象实例共享包含的属性和方法。 什么叫让所有对象实例共享包含的属性和方法 直接在对象实例上定义方法的缺点是，不同对象实...
深入理解面向对象编程中的原型与构造函数关系
然而，理解 JavaScript 中面向对象的本质，仍需深入其底层机制——原型（Prototype）、构造函数（Constructor）和实例（Instance）之间的关系。 从提供的压缩包文件名可以看出，该资料重点聚焦于 JavaScript 中面向...
Jeecg AI应用开发平台v1.0.0首版发布，快速搭建AI知识库或AI聊天助手
JEECG官方博客
12-04 763
Jeecg-AI是一款基于大型语言模型和RAG技术的全栈式AI开发平台，支持快速构建和部署个性化AI应用。该平台提供AI知识库管理、流程编排、模型配置、向量库对接等功能，支持ChatGPT、DeepSeek等多种大模型，并可与业务系统深度集成。采用Vue3+Spring Boot技术栈，具备智能问答、文档处理、API生成等能力，相比Dify平台更注重低代码与业务集成。开发者可通过Docker一键部署或源码构建，实现智能应用的快速开发。
推荐 | JoyAgent-JDGenie：开箱即用的端到端多智能体产品
最新发布
lpfasd123的博客
12-05 83
如果你在寻找一款真正可落地的多智能体产品，用来“搜索-分析-生成报告”、“数据问答与诊断”、“代码解释与图表生成”，同时希望易部署、易扩展、易二次开发——JoyAgent-JDGenie 是非常值得试用与推荐的选择。只需填好少量配置，即可获得端到端的流式体验与交付能力。
网络安全漏洞之React 框架分析
anquan2233的博客
12-04 884
昨日爆出的 CVE-2025-55182，CVSS 10.0 满分严重漏洞，影响 React 19 及所有 Next.js 15/16 项目。核心问题是 React Server Components 的 Flight 协议存在不安全反序列化，无需任何认证，攻击者只需向 Server Actions 端点发送一个精心构造的 multipart 请求，即可实现远程代码执行（RCE）。目前已确认多个完整 0day 利用链（包括 vm.runInThisContext 在内），未修补实例基本等于已失陷。
vue实现页面不断插入内容并且自动滚动功能
weixin_50606255的博客
12-04 189
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 630
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值