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创建对象的几种方式及优劣 的相关文章

  • JavaScript 对输入的循环创建一个对象数组

    我正在尝试循环 div 中的输入元素 以创建对象数组 div div
  • 缩小 ASP.NET 生成的 Javascript 的最佳方法是什么?

    在 ASP NET 3 5 运行时缩小 ASP NET 生成的 Javascript 例如由 webresource axd 提供的 Javascript 的最佳方法是什么 我尝试使用Mb压缩 http mbcompression code
  • 如何在 moment.js 中将日期格式化为 ISO 8601?

    这个文档提到moment ISO 8601作为格式化选项 从 2 7 0 http momentjs com docs parsing special formats http momentjs com docs parsing speci
  • 如果列表中的某个字符位于该字符之前,请选择该字符

    我有这个正则表达式 a z s gmi 该正则表达式选择 从我的文字中 sme a eliezovce 2015 Spolo ne pre Eur pu Osl vili aj 940 但我只想选择 没有 如果列表中的某些字符 a z 之前
  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • 在 Node.js 中实现服务器发送事件的简单方法?

    我环顾四周 似乎在 Node js 中实现 SSE 的所有方法都是通过更复杂的代码 但似乎应该有一种更简单的方法来发送和接收 SSE 是否有任何 API 或模块可以让这件事变得更简单 这是一个每秒发送一个服务器发送事件 SSE 的 Expr
  • Firebase 模拟器无法促进/运行新功能

    我有三个云功能 其中两个已部署到我的 firebase 项目中 其中一个是我刚刚添加的 我希望在部署之前在本地测试新的功能 但是当我尝试使用它时却无法使用 并且只有两个已部署的功能可用 Firebase 模拟器在端口上运行良好5001 像往
  • 如何设置黄瓜环境变量

    我有以下 package json name newcucumber version 1 0 0 main index js scripts test node modules bin cucumber js firefox node mo
  • 如何在 JavaScript 中检查未定义的变量

    我想检查变量是否已定义 例如 以下内容会引发未定义的错误 alert x 我怎样才能捕获这个错误 在 JavaScript 中 null是一个对象 不存在的事物还有另一种价值 undefined DOM 返回null对于几乎所有无法在文档中
  • 可拖动的非模态弹出窗口 Jquery Mobile

    我希望在 Jquery mobile 中有一个弹出窗口 它不会阻止用户与页面交互 并且 data dismissible false 即当页面的另一部分与页面的另一部分交互并保持可见时 弹出窗口不会消失 我已经尝试过这个 popupNew
  • Node.js 循环发送 http 请求

    我实际上遇到了使用 node js 执行的 javascript 代码的问题 我需要循环发送http请求到远程服务器 我在代码中设置了www google ca 这是我的代码 var http require http var option
  • 如何使用 Selenium webdriver 测试对 SVG 对象的点击?

    我正在尝试编写代码来检查单击 SVG 对象的功能 例如此 URL 上的美国州 http www amcharts com svg maps map usa 这可行 但是有更好的方法吗 不需要物理移动鼠标的东西 robert new Robo
  • 如何在正则表达式中区分数字和ip地址?

    例如 如果我们查看 5 56 和 183 55 0 144 基本上 当你做这样的事情时 d d 它匹配 5 56 189 55 和 0 144 有没有办法通过正则表达式仅匹配数字而不匹配 ip 地址的部分 我尝试使用前瞻 但我不知道它应该是
  • jQuery 和所有 .js 文件无法在本地运行,只能在外部运行

    我有一个奇怪的问题 我正在编写一个网站 包括 jQuery 和一些插件 它们存储在 js 文件夹中 当我尝试通过浏览器 jQuery 打开它时 插件和所有自定义脚本都不起作用 也许这与我的代码有关 但不这么认为 当然 当我在外部包含 jQu
  • 从数据库中给定时间起经过的时间

    我有一个 HTML 表 其中包含从数据库中提取的记录 我正在使用 PHP MySQL 我的表中名为 Timer 的列未从数据库中检索 我需要在此处显示经过的时间 从数据库中的特定时间开始 例如 假设现在的时间是2013年2月21日下午6点2
  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件?

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an
  • 通过ajax POST提交两次表单

    插入到mysql using php通过文件调用AJAX 前insert语句php代码执行select查询到查找重复记录并继续insert statement Issue 从ajax调用php文件时 它执行了两次并得到作为重复记录的响应 好
  • 如何使用 Ajax 对 Oracle APEX 表格表单执行逐行验证?

    使用我执行的相同验证 处理 基于此线程 在 Oracle APEX v4 2 2 中通过 Ajax 调用 Oracle 函数进行现场验证 https stackoverflow com questions 21474303 calling
  • 为什么 JavaScript 默认导出不可用?

    为什么默认导出不像命名导出那样实时 lib js export let counter 0 export function incCounter counter export default counter main1 js import
  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding

随机推荐

  • 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