Javascript创建对象的几种方式及优劣

2023-11-14

1、字面量方式

 var obj = {
    name : 'tom',
    age : 20,
    career : 'network',
    getName : function (){
           return this.name;
		}
 }
  
  alert(obj.getName());

这种方式适合创建单个对象。

2、创建Object对象方式

 var obj = new Ojbect();
 obj.name='tom';
 obj.age=20;
 obj.getName=function(){
	 return obj.name;
	 }
 }

alert(obj.getName());

跟第一种方式差不多,只能创建单个对象。

3、工厂模式

function createPerson(){
	var per = new Object();
	per.name='tom';
	per.age=25;
	per.getName = function(){
		return this.age;
		};
	return per;
}

var person = createPerson();
var person1 = createPerson();
alert(person.getName()); //tom


无法识别对象类型,因为所有对象都是通过Object()创建的,类型均为Object。而且创建多个对象时会重复创建对象方法:
alert(person.getName == person1.getName) // false

4、构造方法

function Person(name,age){
		var nametemp = 'tom';
		var agetemp = 10;
		this.name = name || nametemp;
		this.age = age || agetemp;
		this.getName = function(){
					return this.name;
		}
}

var p1 = new Person();
var p2 = new Person('Mike',13);
p1.getName(); //tom
p2.getName();  //Mike

优点:可以通过传入参数初始化对象。而且这样创建的对象有一个constructor属性,指向创建它的构造函数。

alert(p1.constructor == Person);    // true;

也可以用instanceof 运算符来验证这种关系

alert(p1 instanceof Person); //true

缺点:重复创建对象方法,每次创建一个对象时,都会重复创建它的getName方法,造成一定的内存浪费。

alert(p1.getName==p2.getName);  //false

5、原型模式

function person(){}
person.prototype.name='tom';
person.prototype.age=10;
person.prototype.family = ['father','mother'];
person.prototype.getName=function(){
	return this.name;
}

var p1 = new person();
p1.family.push('brother');
var p2 = new person();
alert(p1.family);
alert(p2.family);

优点:属性是方法时可以被多个对象共享,不需要重复创建方法

	alert(p1.getName==p2.getName);  //true

缺点:当属性是一个对象时,因为共享容易出现问题。例如上例中,p1中给family属性添加了brother成员,但因为对象共享,p2中的family成员也被添加了brother。

6、混合模式(推荐使用)

function Person(name,age){
	var nametemp = 'tom';
	var agetemp = 10;
	this.name = name || nametemp;
	this.age = age || agetemp;
}
Person.prototype.getName=function(){
	return this.name;
}

var p1 = new Person();
var p2 = new Person('Jack',20);

这种方式综合了构造函数方式和原型模式两种创建方法的优点。既可以保持各个对象非函数属性的独立性,又可以共享函数属性。而且可以通过构造函数参数初始化对象成员。

prototype模式的验证方法:

1、 isPrototypeOf方法验证某个原型对象是否存在于另一个对象的原型链中

 alert(Person.prototype.isPrototypeOf(p1));  //true
 alert(Person.prototype.isPrototypeOf(p2));  //true

2、 hasOwnProperty()判断属性是否为对象自有属性,而不是通过prototype设置的可共享属性。

alert(p1.hasOwnProperty("getName"));  //false
alert(p1.hasOwnProperty("age"));      //true

3、in 可用于遍历对象的所有属性,不论是通过this还是通过 prototype设置的属性

 alert("name" in p1); //true
 alert("getName" in p1);  //true
 for(var prop in p1){  //这里prop是一个字符串,代表属性名
	alert(p1[prop]);   
}

注意:不能直接用p1.prop来访问,prop是一个字符串,就像
可以用p1.name访问而不能用p1."name"来访问一样。
不过可以用eval(“p1.”+prop);
和p1[prop]来访问属性。这也是访问对象属性时容易出错的一点。

7、动态原型方式

function Person(name,age){
	var nametemp = 'tom';
	var agetemp = 10;
	this.name = name || nametemp;
	this.age = age || agetemp;
}
if(typeof Person.getName == "undefined"){
	Person.prototype.getName=function(){
		return this.name;
	}
}

这样避免重复创建方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript创建对象的几种方式及优劣 的相关文章

  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

随机推荐

  • Linux 用户、用户组 ( 添加、删除、修改 )

    Linux 使用者管理 http cn linux vbird org linux basic linux basic php part4 鸟哥官网 简体中文 http cn linux vbird org linux basic linu
  • STL实现动态维护有序数组

    使用 容器 vector 函数 v empty v lower bound v insert 代码实现
  • python + pandas读取含有不同空格的txt , csv,excel文件,以及跳过指定错误行数据

    使用pandas读取含有不同空格的txt csv excel文件 若txt文件全为float或者int时候 txt np loadtxt file 此仅适用于全数据类型的txt 文件 且文件内无空数据 txtDF pd DataFrame
  • CCIE理论-第十六篇-IPV6-GRE隧道+IPV6 OVER IPV4 隧道

    CCIE理论 第十六篇 IPV6 GRE隧道 IPV6 OVER IPV4 隧道 IPV6也写了好多篇章 后面还有两篇 一个IPV6的NAT 一个综合实验 那么就结束IPV6到MPLS了 其实还挺多的哈 差不多应该有10篇章都是在讲IPV6
  • 用C语言编写Windows服务程序的五个步骤

    翻译文档 本文适合初级读者 已阅读20305次 文档 代码 工具 用 C 语言编写 Windows 服务程序的五个步骤 原文 Yevgeny Menaker 翻译 Northtibet 下载源代码原文出处 Five Steps to Wri
  • Linux的命令

    Linux的命令分为四个类型 文件操作命令 系统操作命令 文本处理命令和网络操作命令 下面简单介绍一下常用的Linux命令 文件操作命令 ls 列出目录下的所有文件和目录 cd 切换当前目录 mkdir 创建一个新目录 touch 创建新文
  • (下)苹果有开源,但又怎样呢?

    一开始 因为 MacOS X 苹果与 FreeBSD 过往从密 不仅挖来 FreeBSD 创始人 Jordan Hubbard 更是在此基础上开源了 Darwin 但是 苹果并没有给予 Darwin 太多关注 作为苹果的首个开源项目 它算不
  • OpenCV---膨胀与腐蚀

    膨胀 腐蚀 一 膨胀实现dilate import cv2 as cv import numpy as np def dilate demo image 膨胀 print image shape gray cv cvtColor image
  • 【计算机网络系列】物理层①:物理层的基本概念以及数据通信的基础知识

    本文主要介绍物理层的基本概念以及数据通信的基础知识 同时简单谈谈物理层下面的传输媒体 一 物理层基本概念 首先要强调指出 物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流 而不是指具体的传输媒体 大家知道 现有的计算机网络中
  • AI,正在疯狂进化,金融大模型来了

    大家好 现在开源社区 更新速度最快的就是 AI 相关的项目了 几天不看 就又多了一些非常优秀的项目 一 FinGPT 之前我就发过各个领域的大语言模型 比如医学领域的 Huatuo LLaMA 也发过法律领域的大语言模型 LaWGPT 现在
  • 解决Windows丢失msvcp120.dll问题

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或者损坏了 这时你只需下载这个msvcp120 dll文件进行安装 前提是找到
  • 软件结构化设计-架构真题(二十七)

    2019年 进程P有8个页面 页号分别为0 7 状态位等于1和0分别表示在内存和不在内部才能 假设系统给P分配4个存储块 如果进程P要访问页面6不在内存 那么应该淘汰号是多少 答案 页号2 解析 页号1 2 5 7在内部内存里 而2的被访问
  • Mmdetection训练笔记

    1 imgs per gpu表示一块gpu训练的图片数量 imgs per gpu的值会影响终端输出的显示 比如 如果你有一块GPU 训练集有4000张 imgs per gpu设为2的话 终端的输出可能是Epoch 1 50 2000 另
  • 从Vue2到Vue3【五】——新的组件(Fragment、Teleport、Suspense)

    系列文章目录 内容 链接 从Vue2到Vue3 零 Vue3简介 从Vue2到Vue3 一 Composition API 第一章 从Vue2到Vue3 二 Composition API 第二章 从Vue2到Vue3 三 Composit
  • 前端缓存区别记录 SessionStorage和LocalStorage详解

    LocalStorage和SessionStorage之间的主要区别在于浏览器窗口和选项卡之间的数据共享方式不同 LocalStorage可跨浏览器窗口和选项卡间共享 就是说如果在多个选项卡和窗口中打开了一个应用程序 而一旦在其中一个选项卡
  • spi个人笔记

    spi是全双工通讯 收发同时进行 这句话怎么理解 如上图所示 主机产生一组时钟信号 并通过mosi输出8位数据 这个时候 虽然从机没有返回数据 持续低电平 但是因为是 收发同步 所以此时主机已经采集了此次的miso数据 就是说 无论你的目的
  • 【upload-labs 第四关通关攻略】

    一 类型 无法上传php等多种类型 选择 htaccess配置文件 二 htaccess内容 注意 不能命名 就叫 htaccess
  • Java手写数组和案例拓展

    Java手写数组和案例拓展 1 Mermanid代码绘制的思维导图解释实现思路原理 mermaid svg HoH3kyfEhPDhcUh4 font family trebuchet ms verdana arial sans serif
  • js发布——订阅模式的通用实现及取消订阅

    h1 发布 订阅模式的通用实现 h1 p javaScript作为一门解释执行的语言 给对象添加动态职责是理所当然的 所以我们将发布 订阅的功能提取出来 放在一个单独的对象内 p
  • Javascript创建对象的几种方式及优劣

    1 字面量方式 var obj name tom age 20 career network getName function return this name alert obj getName 这种方式适合创建单个对象 2 创建Obje