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 相关文章推荐
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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读取XML值的代码(推荐)
2011/01/01 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Javascript中的数学函数
2007/04/04 Javascript
JS Array对象入门分析
2008/10/30 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
python简单程序读取串口信息的方法
2015/03/13 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
数据库笔试题
2013/05/09 面试题
小学英语教学反思
2014/01/30 职场文书
学前班学生评语
2014/12/29 职场文书
教师节主持词开场白
2015/05/29 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书