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 相关文章推荐
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP If Else(elsefi) 语句
2013/04/07 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
php curl发送请求实例方法
2019/08/01 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python Scrapy框架原理解析
2021/01/04 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
计算机操作自荐信
2013/12/07 职场文书
工伤事故证明
2014/10/20 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
推广普通话主题班会
2015/08/17 职场文书
协议书格式模板
2016/03/24 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis