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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
ant-design-vue中tree增删改的操作方法
Nov 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
python队列Queue的详解
2019/05/10 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python爬虫请求头的使用
2020/12/01 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
会计工作决心书
2014/03/11 职场文书
婚礼主持词
2014/03/13 职场文书
安全生产标语
2014/06/06 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
mysqldump进行数据备份详解
2022/07/15 MySQL