文档章节

js动态添加、修改、删除对象的属性与方法

文文1
 文文1
发布于 2015/04/02 15:03
字数 868
阅读 93
收藏 0
点赞 0
评论 0

如何为一个对象添加、修改或者删除属性和方法。在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译。JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性和方法。例如首先使用类Object来创建一个空对象user:

var user=new Object();


1.添加属性
这时user 对象没有任何属性和方法,显然没有任何用途。但可以为它动态的添加属性和方法,例如:
 

代码示例:

user.name=”jack”;
user.age=21;
user.sex=”male”;

 

通过上述语句,user 对象便具有了三个属性:name、age和sex。下面输出这三个语句:
 

代码示例:

alert(user.name);
alert(user.age);
alert(user.sex);

 

由代码运行效果可知,三个属性已经完全属于user 对象了。

2.添加方法
添加方法的过程和属性类似:
 

代码示例:

user.alert=function(){
alert(“my name is:”+this.name);
}

 

这就为user 对象添加了一个方法“alert”,通过执行它,可以弹出一个对话框显示自己的名字介绍:
 

代码示例:

user.alert();

3.修改属性
修改一个属性的过程就是用新的属性替换旧的属性,例如:
 

代码示例:

user.name=”tom”;
user.alert=function(){
alert(“hello,”+this.name);
}

 

这样就修改了user 对象name属性的值和alert方法,它从显示“my name is”变为了显示“hello”。

4.删除属性
删除一个属性的过程也很简单,就是将其置为undefined:
 

代码示例:

user.name=undefined;
user.alert=undefined;

 

这样就删除了name属性和alert方法。在之后的代码中,这些属性变的不可用。
在添加、修改或者删除属性时,和引用属性相同,也可以采用方括号([])语法:
 

代码示例:

user[“name”]=”tom”;


 

使用这种方式还有一个额外的特点,就是可以使用非标识符字符串作为属性名称,例如
标识符中不允许以数字开头或者出现空格,但在方括号([])语法中却可以使用:
 

user[“my name”]=”tom”;

注意,在使用这种非标识符作为名称的属性时,仍然要用方括号语法来引用:
 

alert(user[“my name”]);


而不能写为:

alert(user.my name);


利用对象的这种性质,甚至可以很容易实现一个简单的哈希表,在本书的后面将会看到其应用。

由此可见,JavaScript中的每个对象都是动态可变的,这给编程带来了很大的灵活性,也和其他语言产生了很大的区别,读者可以体会这种性质。

如何动态的给对象object循环加上value1,value2,value3的属性:

可以利用for循环:

for(var i=0;i<3;i++){
   //    object.valuei = ...;//这么写不行,会直接给object加了一个属性valuei,而不是value1...
   //    object.value+""+i+"" =...//这么写也不行,编译报错
   //    object[value+""+i+""] =...//也不行,或报错,value未定义
         object["value"+i] =...//正确,注意object在增加属性的时候,object.a和object["a"]是一样的
}



© 著作权归作者所有

共有 人打赏支持
文文1
粉丝 19
博文 328
码字总数 113821
作品 0
长沙
程序员
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo ⋅ 04/23 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

JS 底蕴之 变量、作用域和垃圾回收

基本类型和引用类型 在 JavaScript 中,数据类型可分为基本类型和引用类型, 基本类型有六种:Null,Undefined,String,Boolean,Number,Symbol; 而引用类型就是传说中的 Object 了。 其中...

Fly_001 ⋅ 05/23 ⋅ 0

JavaScript由浅及深敲开原型链(一)

一.什么是js对象 1.简单理解js对象 在了解原型链之前,我们先要弄清楚什么是JavaScript的对象,JavaScript对象又由哪些组成。有人说一个程序就是一个世界,那么我们可以把对象称之为这个世界...

bb7bb ⋅ 05/15 ⋅ 0

JavaScript当中的this究竟是个啥?

对于JS的初学者而言,JS当中的this指向很难让人摸准其脉络,经常会给你一种模糊美、朦胧美的感脚!因为this并不是固定不变的,它会根据自身所执行的环境的不同而不同。而且在开发的过程中,经...

张培跃 ⋅ 今天 ⋅ 0

code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_ ⋅ 06/07 ⋅ 0

V8引擎中的Hidden Class

原作者:江凌 原文链接 Hidden Class 是为了实现对象属性的快速存取。 JavaScript是一种动态编程语言:属性可进行动态的添加和删除,这意味着一个对象的属性是可变的,大多数的JavaScript引擎...

_朴灵_ ⋅ 05/14 ⋅ 0

JavaScript 编程精解 中文第三版 十四、文档对象模型

十四、文档对象模型 原文:The Document Object Model 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 Too bad! Same old story! Onc...

ApacheCN_飞龙 ⋅ 05/11 ⋅ 0

JavaScript 编程精解 中文第三版 四、数据结构:对象和数组

四、数据结构:对象和数组 原文:Data Structures: Objects and Arrays 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 On two occas...

ApacheCN_飞龙 ⋅ 05/01 ⋅ 0

js笔记十七之DOM操作-增删改

DOM的赠删改 增 真是项目中, 我们会在js中动态创建一些html标签, 然后把其增加到页面中 document.createElement 在js中动态创建一个html标签 appendChild 容器.appendChild(新元素) 把当前创...

uplyw ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 23分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 35分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部