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,一经查实,立即删除!

相关文章

高级优化理论与方法(一)

高级优化理论与方法(一) 前言基本概念优化的概念定义优化的写法邻域局部最优Terms(术语):可行方向定义内部点极限点边界 导数一阶导二阶导例子 方向导数例子 Unconstrained Optimization(无约束优化)FONC证…

光伏发电预测

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

C++的成员初始化列表

C的成员构造函数初始化列表:构造函数中初始化类成员的一种方式,当我们编写一个类并向该类添加成员时,通常需要某种方式对这些成员变量进行初始化。 建议应该在所有地方使用成员初始化列表进行初始化 成员初始化的方法 方法一: …

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

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

【JavaWeb】Jwt令牌简单使用及代码示例

Jwt令牌介绍 Jwt令牌主要用于登录操作中,常用来进行身份认证 jwt令牌分为三个部分(不同部分之间用点分割): 由base64编码的头部信息,其中储存着Jwt所使用的摘要算法由base64编码的中间部分用户自定义信息&#xff0c…

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里面 三、正常去做无法通过 因为这道题出的不严谨所以反引号也是可以绕过的 正常考察我们的点不在这里,正常考察…

Java编程之方法的重写1

继承并不只是扩展父类的功能,还可以重写父类的成员方法。重写(还可以称为覆盖)就是在子类中将父类的成员方法名称保留,重新编写父类成员方法的实现内容,更改成员方法的存储权限,或是修改成员方法的返回值类…

Unity之街机捕鱼

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

华为OD机试真题-求幸存数之和【题解分享】

原题内容 给一个正整数列nums,一个跳数jump,及幸存数量left。运算过程为:从索引为0的位置开始向后跳,中间跳过 J 个数字,命中索引为 J1 的数字,该数被敲出,并从该点起跳,以此类推,直…

叠罗汉游戏

题目描述 农场的N头奶牛喜欢玩叠罗汉游戏,就是几头奶牛1头奶牛接着1头奶牛的站成一柱子形状。不过奶牛的力量不一样,用数值Ci表示第i头奶牛它的上面最多可以站多少头奶牛,问这些奶牛最少可以站成几个柱子形状。 输入格式 输入文件名&#…

怎样获得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…