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操作cookie类实例
Mar 31 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php 什么是PEAR?(第二篇)
2009/03/19 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python实现简单多线程任务队列
2016/02/27 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python的几种主动结束程序方式
2019/11/22 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
django rest framework使用django-filter用法
2020/07/15 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
致全体运动员广播稿
2014/02/01 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
争先创优演讲稿
2014/09/15 职场文书
升学宴家长致辞
2015/07/27 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB