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 相关文章推荐
自动更新作用
Oct 08 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
javascript实现图片轮换动作方法
Aug 07 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
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
深入PHP curl参数的详解
2013/06/17 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
jQuery 技巧小结
2010/04/02 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
Python写的一个简单监控系统
2015/06/19 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
nohup的用法
2012/11/26 面试题
挂职自我鉴定
2014/02/26 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android