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


Posted in Javascript onJanuary 27, 2014

现在介绍如何为一个对象添加、修改或者删除属性和方法。在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译。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中的每个对象都是动态可变的,这给编程带来了很大的灵活性,也和其他语言产生了很大的区别,读者可以体会这种性质。

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
vue实现树形菜单效果
Mar 19 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
vue页面跳转实现页面缓存操作
Jul 22 Javascript
javascript中定义私有方法说明(private method)
Jan 27 #Javascript
用javascript替换URL中的参数值示例代码
Jan 27 #Javascript
jquery选择器之基本过滤选择器详解
Jan 27 #Javascript
jquery选择器之层级过滤选择器详解
Jan 27 #Javascript
jquery选择器之内容过滤选择器详解
Jan 27 #Javascript
jquery选择器之属性过滤选择器详解
Jan 27 #Javascript
jQuery自定义事件的简单实现代码
Jan 27 #Javascript
You might like
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
用Python编写web API的教程
2015/04/30 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python调用接口的4种方式代码实例
2019/11/19 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
房屋维修协议书范本
2014/09/25 职场文书
践行三严三实心得体会
2014/10/13 职场文书
财务会计求职信范文
2015/03/20 职场文书
大学生团日活动总结
2015/05/06 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python