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 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
js计算文本框输入的字符数
2015/10/23 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
基于pandas中expand的作用详解
2019/12/17 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
视光学毕业生自荐书范文
2014/02/13 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
蓬莱阁导游词
2015/02/04 职场文书
工商局个人工作总结
2015/03/03 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2019销售早会主持词
2019/06/27 职场文书