javascript中的对象创建 实例附注释


Posted in Javascript onFebruary 08, 2011

javascript中的对象创建声明:
var obj = {}; 或者 var obj = new Object(); 
为对象加入属性,方法:
//=====第一种写法====================================

obj.name = '小明'; //为对象加属性
obj.updateName = function(name){//为对象定义updateName方法
this.name = name;
}
alert(obj.name);
obj.updateName("小强"); //调用updateName修改obj对象的name属性值
alert(obj['name']);
第一次显示结果为:小明
第二次显示结果为:小强
//=====第二种写法====================================
obj['name'] = '张三'; //为对象加属性
obj['updateName'] = function(name){//为对象定义updateName方法
obj['name'] =name;
}; 
alert(obj.name);
obj.updateName('李四'); //调用updateName修改obj对象的name属性值
alert(obj['name']);
第一次显示结果为:张三
第二次显示结果为:李四
//=====第三种写法====================================
var obj = {
name: '王五', //为对象加属性
updateName: function(name){//为对象定义updateName方法
this.name = name;


}
};
alert(obj .name);
obj.updateName("赵六"); //调用updateName修改obj对象的name属性值
alert(obj .name);
第一次显示结果为:王五
第二次显示结果为:赵六
//=====分析=====================================
第一种写法是最普通的对象写法,因为javascript是动态语言,与Java和.Net不同,
在程序运行并创建对象后,还可以对该对象的内部结构进行修改,
比如添加属性和方法(java和.net中的反射机制做不到这点)。
(a): var obj = {} || new Object();
(b):obj.name = "张三";
(c):obj.updateName = function(name){ this.name = name};

当程序执行(a) 后,便创建了一个空对象(不包含任何方法和属性)obj,
当程序执行(b) 后,改变了obj的内部结构,加了一个属性name,
当程序执行(c) 后,改变了obj的内部结构,加了一个方法updateName ,
而这都是在运行的时候完成的动作

第二种写法像数组,但绝不是数组,区分是不是数组可以如此判断:
if(typeof(obj.length) == "undefined") {
alert("obj不是数组,数组都有length属性!");
}else{
alert("obj是数组!");
}
第二种写法更像一种数据结构:map ,如:obj[key] = value;
key是字符串,value可以是任何类型,变量,对象,函数等。
可以通过这种方式遍历对象内部结构:
for(var key in obj)
{
alert(key);
var value = obj[key];
alert(value);
}
通过alert可以显示出你所定义的内容。
第三种写法一看就是map的内部结构了,一个对象,内部完全用key : value键值对方式表示
JSON对象也是这种结构,只要对map或者JSON对象有所熟悉的就很容易理解了。

Javascript 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
kmock javascript 单元测试代码
Feb 06 #Javascript
一次失败的jQuery优化尝试小结
Feb 06 #Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 #Javascript
基于jQuery的自动完成插件
Feb 03 #Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 #Javascript
javascript event 事件解析
Jan 31 #Javascript
javascript getElementsByTagName
Jan 31 #Javascript
You might like
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
jquery提示 "object expected"的解决方法
2009/12/13 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
javascript中的面向对象
2017/03/30 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
vue如何截取字符串
2019/05/06 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
python 8种必备的gui库
2020/08/27 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2014年中秋寄语
2014/08/11 职场文书
学习礼仪心得体会
2014/09/01 职场文书
交通违章检讨书
2014/09/21 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2015年调度员工作总结
2015/04/30 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
详解Redis实现限流的三种方式
2021/04/27 Redis
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL