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中获取Radio元素值的方法
Jul 02 Javascript
AngularJS中的模块详解
Jan 29 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
javascript填充默认头像方法
2018/02/22 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
vue强制刷新组件的方法示例
2019/02/28 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python语言快速上手学习方法
2018/12/14 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
市场部专员岗位职责
2013/11/30 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
业务员自荐信范文
2014/04/20 职场文书
团队队名口号大全
2014/06/06 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS