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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
微信小程序实现多选功能
Nov 04 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 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公用函数列表[正则]
2007/02/22 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
use jscript List Installed Software
2007/06/11 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
如何解决vue在ios微信"复制链接"功能问题
2020/03/26 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python的Django框架安装全攻略
2015/07/15 Python
python实现简易数码时钟
2021/02/19 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Django通过json格式收集主机信息
2020/05/29 Python
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
个人近期表现材料
2014/02/11 职场文书
体育教师个人工作总结
2015/02/09 职场文书
物业工程部岗位职责
2015/02/11 职场文书
辩护词格式
2015/05/22 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技