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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
解决vue项目router切换太慢问题
Jul 19 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
php文件下载处理方法分析
2015/04/22 PHP
分享3个php获取日历的函数
2015/09/25 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
神路信息Java面试题目
2013/03/31 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
初中地理教学反思
2016/02/19 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
浅谈Python数学建模之整数规划
2021/06/23 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏