Javascript 面向对象 对象(Object)


Posted in Javascript onMay 13, 2010

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 相关文章推荐
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
面包屑导航详解
Dec 07 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
Javascript实现简易天数计算器
May 18 Javascript
Javascript 面向对象 命名空间
May 13 #Javascript
javascript 面向对象 function类
May 13 #Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 #Javascript
Javascript 面向对象 继承
May 13 #Javascript
Javascript 面向对象 重载
May 13 #Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 #Javascript
限制文本框输入N个字符的js代码
May 13 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP SQLite类
2009/05/07 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
零基础php编程好学吗
2019/10/11 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python缩进和冒号详解
2016/06/01 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
行政文员岗位职责
2013/11/08 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
安全生产投入制度
2014/01/29 职场文书
银行贷款委托书范本
2014/10/11 职场文书
流动人口婚育证明
2014/10/19 职场文书
北京导游词
2015/02/12 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL