js创建对象方式总结

js创建对象方式总结

字面量方式

使用大括号 {} 创建一个新对象,这是最简单直接的方式。适用于创建单个对象,可以直接在大括号内定义属性和方法。

    let person = {name: 'John',age: 30,gender: 'male'};let preson2 = {name: 'John',age: 30,gender: 'male'};console.log(person === preson2) // false

这种创建方式对于创建大量相似对象的时候,会产生大量的重复代码

Object.create()

Object.create(proto[, propertiesObject]) 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。这个方法允许你选择一个原型对象作为新对象的原型。

    //3.Object.create()let personPrototype = {introduce: function () {console.log(`My name is ${this.name} and I'm ${this.age} years old.`);}};let person = Object.create(personPrototype);person.name = 'John';person.age = 30;console.log(person)// {name: 'John', age: 30}console.log(person.__proto__ === personPrototype) // trueconsole.log(person.__proto__ === personPrototype.prototype) // false  personPrototype.prototype是undefinedconsole.log(personPrototype.__proto__ === Object.prototype) // true

image-20240304151746691

在 JavaScript 中,只有函数对象(Function对象)才有 prototype 属性。函数对象的 prototype 属性是一个对象,用于存储构造函数实例化的对象所共享的属性和方法。

当你使用 new 关键字创建一个函数的实例时,实例的 __proto__ 属性会指向该函数的 prototype 属性。这种机制支持了原型继承,让多个实例能够共享同一个原型对象上的方法和属性。

类(ES6+)

在ES6中引入了类的概念,使用 class 关键字可以定义类,然后通过 new 关键字创建类的实例。类语法是一个语法糖,背后仍然使用原型和构造函数。

    class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log("Hello, " + this.name);}}const person = new Person("Dave", 32);console.log(person.__proto__ === Person.prototype) // true

工厂函数

工厂函数是一个普通函数,用来返回一个新的对象。工厂函数不使用 new 关键字,但可以接受参数并根据参数定制返回的对象。

    function createPerson(name, age) {var o = new Object();o.name = name;o.age = age;o.greet = function () {console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");};return o;}const person = createPerson("Eve", 27);console.log(person.__proto__ === createPerson.prototype) // falseconsole.log(person.__proto__ === Object.prototype) // true// 无法识别为特定类型console.log(person instanceof createPerson) // falseconsole.log(person instanceof Object) // true

工厂模式通过一个函数来封装创建对象的细节,从而实现对象创建代码的复用。但是,使用工厂模式创建的对象,无法识别为特定的类型

构造函数

使用 new 关键字和构造函数来创建对象。构造函数通常首字母大写,可以接受参数用于设置对象的初始属性。

   function Person(name, age, gender) {this.name = name;this.age = age;this.gender = gender;this.greet = function() {console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");};}let person = new Person('John', 30, 'male');let preson2 = new Person('John', 30, 'male');console.log(person === preson2) // false

构造函数模式可以通过new关键字调用,创建的对象与构造函数之间建立了联系,可以通过instanceof来识别对象类型。但每个实例都会创建新的函数实例。

构造函数模式相对于工厂模式的优点是,所创建的对象和构造函数建立起了联系,因此可以通过原型来识别对象的类型。但是构造函数存在一个缺点就是,造成了不必要的函数对象的创建,因为在 js 中函数也是一个对象,因此如果对象属性中如果包含函数的话,那么每次都会新建一个函数对象,浪费了不必要的内存空间,因为函数是所有的实例都可以通用的。

原型模式

原型模式通过构造函数的prototype属性定义共享的属性和方法,解决了构造函数模式中的函数重复创建问题。但所有实例共享属性和方法,对于引用类型的属性可能会导致意外的结果。

    function Person() { }Person.prototype.name = "John";Person.prototype.age = 30;Person.prototype.arr = [1,2,3]Person.prototype.greet = function () {console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");};var person1 = new Person();var person2 = new Person();console.log(person1 === person2) // falseconsole.log(person1.__proto__ === Person.prototype) // trueperson1.name = "person1"console.log(person1.name) // "person1"console.log(person2.name) // "John"// 存在一个引用类型如 Array 这样的值,那么所有的实例将共享一个对象,一个实例对引用类型值的改变会影响所有的实例。person1.arr.push(4) // console.log(person1.arr) // [1, 2, 3, 4]console.log(person2.arr) // [1, 2, 3, 4]

构造函数和原型模式的组合

这种模式结合了构造函数模式和原型模式的优点,通过构造函数初始化属性,通过原型共享方法。

    function Person(name, age) {this.name = name;this.age = age;}Person.prototype.greet = function () {console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");};var person1 = new Person("John", 30);var person2 = new Person("Jane", 25);

动态原型模式

动态原型模式在构造函数内部动态定义原型方法,只在第一次调用构造函数时执行,结合了构造函数和原型模式的优点,同时提高了封装性。

function Person(name, age) {this.name = name;this.age = age;if (typeof this.greet != "function") {Person.prototype.greet = function() {console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");};}
}var person1 = new Person("John", 30);
var person2 = new Person("Jane", 25);

寄生构造函数模式

寄生构造函数模式类似于工厂模式,但使用new关键字调用。它允许在不修改原构造函数的情况下,对创建的对象进行扩展。与工厂模式一样,创建的对象无法识别为特定的类型。

function Person(name, age) {var o = new Object();o.name = name;o.age = age;o.greet = function() {console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");};return o;
}var person1 = new Person("John", 30);
var person2 = new Person("Jane", 25);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/719903.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

光伏发电预测

XGB、LGB在datacamp(学习网站) data fountain与国家电投系列赛,光伏发电预测 题目:给一组特征,预测瞬时发电量,训练集9000个点,测试集8000个点,特征包含光伏板的属性和外部环境等。 数据字段:ID、光伏电池板背侧温度、光伏电站现场温度、计算得到的平均转换效率、数…

MySQL学习Day25——数据库其他调优策略

一、数据库调优的措施: 1.调优的目标: (1)尽可能节省系统资源,以便系统可以提供更大负荷的服务 (2)合理的结构设计和参数调整,以提高用户操作的响应速度 (3)减少系统的瓶颈,提高MySQL数据库整体的性能; 2.如何定位调优:用户的反馈、日志…

stm32f103zet6笔记1-led工程

1、选择串口调试 2、LED0连接到PB5,PB5设置为推挽输出。PE5同理。 3、生成成对的.c,.h文件。 4、debugger选择j-link。 5、connection选择SWD。 6、编写bsp_led.c,bsp_led.h文件。 7、下载调试,可以看到LED0 500ms闪烁一次,LED1 1000ms闪烁一…

浅谈一个CTF中xss小案例

一、案例代码 二、解释 X-XSS-Protection: 0:关闭XSS防护 之后get传参,替换过滤为空,通过过滤保护输出到img src里面 三、正常去做无法通过 因为这道题出的不严谨所以反引号也是可以绕过的 正常考察我们的点不在这里,正常考察…

Unity之街机捕鱼

目录 😪炮台系统 🎶炮口方向跟随鼠标 🎶切换炮台 😪战斗系统 🎮概述 🎮单例模式 🎮开炮 🎮子弹脚本 🎮渔网脚本 🎮鱼属性信息的脚本 &#x1f6…

怎样获得CNVD原创漏洞证书

1. 前言 因为工作变动,我最近把这一年多的工作挖漏洞的一些工作成果提交到了CNVD漏洞平台(https://www.cnvd.org.cn/),获得了多张CNVD原创漏洞证书。本篇博客讲下怎么获得CNVD原创漏洞证书,以供大家参考。 2. CNVD原创…

Canvas笔记03:Canvas元素功能、属性、获取、原理等一文讲透

hello,我是贝格前端工场,最近在学习canvas,分享一些canvas的一些知识点笔记,本期分享canvas元素的知识,欢迎老铁们一同学习,欢迎关注,如有前端项目可以私信贝格。 Canvas元素是HTML5中的一个重…

基于Intel x86的轨道交通/印度地铁自动售检票(AFC)系统

印度孟买地铁3号线 目前,印度孟买3号线正在全面建设中,这条全长33.5公里的线路将是孟买第一条地下地铁线路,设有27个地下车站和1个地面车站,此条线路的成功通车将连接其他地铁线路、单轨铁路、郊区铁路、城际铁路和孟买机场等&am…

解决prettier 报错 Delete `␍`

根目录(么有的话)新建 .prettierrc.js配置文件 module.exports {tabWidth: 2,semi: true,printWith: 80,singleQuote: true,quoteProps: consistent,htmlWhitespaceSensitivity: strict,vueIndentScriptAndStyle: true,// 主要是最后一行endOfLine:aut…

Ubuntu环境使用docker构建并运行SpringBoot镜像

今天Ubuntu环境使用docker构建并运行SpringBoot镜像,看文章之前建议先查看安装流程: Linux环境之Ubuntu安装Docker流程 一、镜像打包过程及执行 1、创建一个测试目录 mkdir javaDemo 2、springBoot的包复制到此目录下 cp demo1-0.0.1-SNAPSHOT.jar /data/app/…

计算机网络实验 基于ENSP的协议分析

实验二 基于eNSP的协议分析 一、实验目的: 1)熟悉VRP的基本操作命令 2)掌握ARP协议的基本工作原理 3)掌握IP协议的基本工作原理 4)掌握ICMP协议的基本工作原理 二、实验内容: 1、场景1:两台PC机…

React-子传父

1.概念 说明&#xff1a;React中子组件向父组件传递数据通常涉及回调函数和状态提升等方法。 2.代码实现 2.1绑定事件 说明&#xff1a;父组件绑定自定义事件 <Son onGetSonMsg{getMsg}></Son> 2.2接受事件 说明&#xff1a;子组件接受父组件的自定义事件名称…

前端食堂技术周刊第 114 期:Interop 2024、TS 5.4 RC、2 月登陆浏览器的新功能、JSR、AI SDK 3.0

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;凉拌鸡架 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…

机器学习模型总结

多元线性回归&#xff08;linear regression&#xff09; 自变量&#xff1a;连续型数据&#xff0c;因变量&#xff1a;连续型数据 选自&#xff1a;周志华老师《机器学习》P53-55 思想&#xff1a;残差平方和达到最小时的关系式子即为所求&#xff0c;残差平方和&#xff1a…

【学习心得】爬虫JS逆向通解思路

我希望能总结一个涵盖大部分爬虫逆向问题的固定思路&#xff0c;在这个思路框架下可以很高效的进行逆向爬虫开发。目前我仍在总结中&#xff0c;下面的通解思路尚不完善&#xff0c;还望各位读者见谅。 一、第一步&#xff1a;明确反爬手段 反爬手段可以分为几个大类 &#…

20240304-2-计算机网络

计算机网络 知识体系 Questions 1.计算机网络分层的优点和缺点 优点 各层之间是独立的&#xff1b;灵活性好&#xff1b;结构上可分割开&#xff1b;易于实现和维护&#xff1b;能促进标准化工作。 缺点&#xff1a; 降低效率&#xff1b;有些功能会在不同的层次中重复出现&…

微信小程序屏蔽控制台黄色提示信息

我们很多时候 一个小程序 啥都没有 终端就一直报一些黄色的警告 可以打开项目的 project.config.json 找一下setting 下面有没有 checkSiteMap 字段 如果没有加一个 如果有 直接将值改为 false 这样 再运行 就不会有这个黄色的提示信息了

第1章:绪论 1.1数据库系统概述

文章目录 1.1 数据库系统概述1.1.1 数据库的4个基本概念1.1.2 数据管理技术的产生和发展1.1.3 数据库系统的特点 1.1 数据库系统概述 1.1.1 数据库的4个基本概念 数据(Data) 是数据库中存储的基本对象 数据的定义&#xff1a;描述事物的符号记录 数据的种类&#xff1a;文本、…

Java多态性的作用及解析

多态性是 Java 面向对象编程的一个重要特性,它的主要作用包括以下几个方面: 提高代码的可扩展性:多态性使得我们可以在不修改现有代码的情况下,通过继承和重写方法来添加新的行为。这意味着我们可以在不影响现有功能的前提下,对代码进行扩展和修改。 增强代码的可读性:使…

JVM 基础知识学习笔记

JVM 基础知识学习笔记 1. JVM 介绍 什么是 JVM ? JVM 本质上是一个运行在计算机上的程序&#xff0c;它的职责是运行 Java 字节码文件。 JVM 的功能是什么 ? 解释和运行: 对字节码文件中的指令&#xff0c;实时的解释成机器码&#xff0c;让计算机执行。内存管理: 自动为…