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 绑定事件时传递参数的实现方法
Oct 13 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
解决layui表格的表头不滚动的问题
Sep 04 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
jquery中的事件处理详细介绍
2013/06/24 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
python获取文件扩展名的方法
2015/07/06 Python
pandas中的series数据类型详解
2019/07/06 Python
python3中rank函数的用法
2019/11/27 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python基于opencv 实现图像时钟
2021/01/04 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
求职信模板怎么做
2014/01/26 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
校园文明倡议书
2014/05/16 职场文书
平面设计专业求职信
2014/08/09 职场文书
2014年图书室工作总结
2014/12/09 职场文书
单位租车协议书
2015/01/29 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers