创建对象:

  1. var o = new Objct(); //创建一个空对象
  2. var o = {};
  3.  
  4. var a = new Array(); //创建一个空数组
  5. var a = [];
  6.  
  7. var d = new Date(); //创建一个表示当前时间的日期对象

对象属性的设置:

  1. book.edition = 6 //给book创建一个edition的属性
  2. book[ "mainTile" ] = "ECMASript" //给mainTile属性赋值
    book[i] = param; //如果有多个属性与值,可以使用这种方法,只要将i与param传回来,就可以给book这个数组设置多个属性与值

如果一个对象的属性我是保留字,必须使用 [] 的形式访问他们: o["class"] / o["for"],使用方括号时,方括号内的表达式必须返回为字符串。

作为关联数组的对象:

  1. Object["property"] //方括号和一个数组,数组元素通过字符串索引。
  • 通过 . 访问对象时,属性名是一个标识符,这个标识符必须直接出现在js的代码中,比如接口的属性,因此程序无法修改它们
  • 通过 []  访问对象时,属性名是一个字符串,字符串是js的一个数据类型,可以通过程序修改和创建它们

场景:由于在写程序时无法知道属性名称,因此无法通过 . 来访问对象的属性。但可以使用 [] ,因为它使用字符串值(字符串是可以更改的)而不是标识符(标识符是静态的,不可以更改的)作为索引对属性进行访问的。

下面两个JS的表达式的值相同:

  1. Obj.property
  2. Obj["property"]

当通过 [] 来访问对象的属性时,属性名通过字符串来表示。如果无法得知属性名称是什么的时候,可以使用  Obj ["属性名称"] = value,这个属性名称是动态的,可以在运行时更改

场景:如果访问对象的属性时,而没有这个属性,会报错,那么怎么避免这种没有属性的错误呢?

  1. var len = book && book.sub && book.sub.length;

属性的操作:

删除:  delete

  1. delete book.str; //删除book的str属性
  2. delete book["srt"]; //删除book的str属性

判断某个属性是否存在于某个对象中,使用 in 运算符:左侧为属性(字符串),右侧为对象,in 可以区分不存在的属性存在但值为undefined的属性

var o = {x:1,w}

"x" in o; //true,存在的属性

"y" in o; //false,不存在的属性

"w" in o //false,  存在的属性,但值为undefined

如何遍历对象的属性,使用 for / in  ,它可以遍历所有的属性,包括自有属性和继承属性。

用来枚举属性的对象工具类函数

  1. function extend(o,p){ //两个对象参数
  2. for(str in p){ //遍历p中的所有属性
  3. o[str] = p[str]; //将属性添加到o中
  4. }
  5. return o; // 返回 o 对象
  6. }

增强版的枚举属性的对象工具类函数:

  1. /*将p中可枚举的属性复制至o中,并返回o
  2. * 如果 o与p 中有同名的属性,o 中的属性不受影响
  3. * 这个函数并不处理getter 和 setter 以及复制属性
  4. */
  5.  
  6. function extend(o,p){ //两个对象参数
  7. for (prop in p){ //遍历p中的所有属性
  8. if(o.hasOwnProperty[prop]) continue; //过滤已经在o中存在的属性
  9. o[prop] = p[prop]; //将属性添加至o中
  10. }
  11. return o; //返回o
  12. }

检测属性是否为undefined:使用 !== 进行判断,    “!==”可以区分undefined 和 null

  1. var o = {x : 1}
  2.  
  3. o.x !== undefined; //true, o中有x这个属性
  4. o.y !== undefined; //false,o中没有y这个属性

返回一个数组,这个数组包含 o 中可枚举的自有属性的名称

  1. function keys(o){
  2. if( typeof o !== "object") throw TypeError(); //参数必须是对象
  3. var result = []; //将要返回的数组
  4. for(var prop in o){ //遍历可枚举的属性
  5. if (o.hasOwnProperty(prop)) //判断是否是自有属性
  6. result.push(prop); //将属性名添加至数组中
  7. }
  8. return result; //返回这个数组
  9. }

如何删除属性? delete ,只能删除自有属性,不能删除继承属性

delete book.name;

delete book['name'];

  • 以下是一些实用的枚举属性的方法:
  1. for(p in o){
  2. if( !o.hasOwnProperty(p) ) continue; //跳过继承的属性
  3. }
  4.  
  5. for( p in o){
  6. if(typeof o[p] === 'function') continue; //跳过方法
  7. }
  1. function extend(o,p){ //把p中可枚举的属性复制到o中
  2. for(prop in p){ //遍历p中所有属性
  3. o[prop] = p[prop]; //将属性添加至o 中
  4. }
  5. return o; //返回 o
  6. }
  1.  

判断某个属性是否为该对象的自有属性,对于继承属性则返回 false.

hasOwnProperty()     这个方法用来检测给定的名字是否是对象的自有属性

  1.  
  2. function merge(o, p){
  3. for (prop in p){ //遍历p中所有属性
  4. if (o.hasOwnProperty [prop]) continue; //过滤掉已经存在o中的属性
  5. o [prop] = p [prop]; //将属性添加到 o 中
  6. }
  7. return o; //返回 o
  8. }
  1. function delp(o, p){
  2. for (prop in o) { //遍历o中所有的属性
  3. if (! (prop in p) delete o[prop]); //如果p不存在,则删除p
  4. }
  5. return o; //返回o
  6. }
  1. function subtrac (o, p){
  2. for(prop in p) { //遍历p中的属性
  3. delete o[prop] //从o中删除这个属性
  4. }
  5. retrun o;
  6. }
  1. function oobj (o, p){
  2. return newObj (extend (extend ( {},o),p); //返回一个新的对象,这个对象拥有 o 和 p的属性
  3. }
  1. hasOwnProperty()     这个方法用来检测给定的名字是否是对象的自有属性
    function keys(o){
  2. if (typeof o !== 'object') throw TypeError(); //参数必须是对象
  3. var result = []; //将要返回的数组
  4. for( var prop in o ){ //遍历所有可枚举的属性
  5. if (o.hasOwnProperty (prop)); //判断是否有自有属性
  6. result.push(prop); //将属性名添加至数组中
  7. }
  8. return result;
  9. }

对象的三个属性:

  • 原型属性
  • 类属性
  • 可扩展性

原型属性是在实例对象创建之初就设置好的,对象的原型属性是用来继承属性的,要想检测一个对象是否是另一个对象的原型,请使用 isPrototypeOf() = instanceof()  ,这两个方法的功能非常类似

  1. var p {x:1}; //定义一个原型对象
  2. var o = Object.create(p); //使用这个原型创建一个对象
  3. p.isPrototypeOf(o); //true时,继承自p
  4. Object. prototypeOf(o); //true时,p继承自 Object.prototype

对象的类属性是一个字符串,用以表示对象的类型信息。现在还没有提供这样的属性方法,只有一种间接的方式可以查询它:toString(),因此,要想获得对象的类,可以调用对象的toString方法,然后返回一个字符串,如何正确的使用类属性的toString方法:

  1. //一个公共的classOf函数,可以返回传递给它的任意对象的类,这个函数可以传入任意类型的参数,数字、字符串和布尔值都可以直接调用toString方法,就和对象调用toString方法一样
  2.  
  3. function classof(o){
  4. if(o === null) return "Null";
  5. if(o === undefined) return "Undefined";
  6. return Object.prototype.toString.call(o).slice(8,-1);
  7. }

对象的可扩展性用以表示是否可以给对象添加新属性。所有的内置对象和自定义对象都是可扩展的。

***********对象的序列化***********是指将对象的状态转换为字符串,也可将字符串还原为对象,这些数据都使用JSON作为数据交换格式,提供了如下方法进行转换:

  1. JSON.stringify(o); //将一个对象解析为JSON字符串
  2. JSON.parse(str); //从字符串中解析出JSON对象
  1. var str = '{"name":"huangxiaojian","age":"23"}'
  2.  
  3. JSON.parse(str);
  4.  
  5. //结果为:
  6. //注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
  7.  
  8. {
  9. age: "23"
  10. name: "huangxiaojian"
  11. }
  12.  
  13. var a = {x:1,y:10}
  14.  
  15. JSON.stringify(a)
  16.  
  17. //结果为:
  18.  
  19. "{"a":1,"y":10}"

avascript 中可以动态添加 对象属性

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var obj = new Object();
  5. alert (obj.username);
  6. obj.username = "allen";
  7. alert (obj.username);
  8. </script>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

结果:
依次打印出 undefined, allen

也可用类似 EL (Expression Language)那样用“[]”表示。写成 obj["username"] = "allen";

如何删除属性? 使用 delete

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var obj = new Object();
  5. obj["username"] = "allen";
  6. alert (obj.username);
  7. delete obj.username;
  8. alert (obj.username);
  9. </script>
  10. </head>
  11. <body>
  12. </body>
  13. </html>

结果:依次打印 allen, undefined. 说明 username 属性已经删除。

另外还有一种定义属性的方法,而且是我们必须掌握的:

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var obj = {username:"allen", password:"123"};
  5. alert(obj.username);
  6. alert(obj.password);
  7. </script>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

javascript 对象实例的更多相关文章

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习:JavaScript 对象 实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 如何理解javaScript对象?

    在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...

  3. JavaScript 对象JavaScript 对象

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. 所有事物都是对象 JavaScript 提供多个内建对象,比如 String. ...

  4. 创建 JavaScript 对象

    http://www.w3school.com.cn/js/js_objects.asp 创建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象. 创建新对象有两种不 ...

  5. javascript 对象简单介绍(一)

    JavaScript 对象JavaScript 中的所有事物都是对象:字符串.数值.数组.函数...此外,JavaScript 允许自定义对象.所有事物都是对象JavaScript 提供多个内建对象, ...

  6. javascript对象如何使用

    javascript对象如何使用 一.总结 一句话总结:JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 因为函数是对象,所以自定义对象的创建中有种方法就是函数 1.js中的 ...

  7. JavaScript Browser 对象 实例

    使用JavaScript来访问和控制浏览器对象实例. Window 对象 弹出一个警告框 弹出一个带折行的警告框 弹出一个确认框,并提醒访客点击的内容 弹出一个提示框 点击一个按钮时,打开一个新窗口 ...

  8. JavaScript教程——实例对象与 new 命令

    典型的面向对象编程语言(比如 C++ 和 Java),都有“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,JavaScript 语言的对象体系,不是基于“类”的,而 ...

  9. Javascript进阶:对象实例属性和方法

    Ecmascript中,Object类型是所有它的实例的基础.换句话说,Object类型所具有的任何属性和方法也同样存在于更具体的对象中. Object的每个实例都具有以下属性和方法,这些都能方便于我 ...

随机推荐

  1. Git/Github + TortoiseGit 使用教程

    前言 Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理. 在github上有很多优秀的项目,一个伟大的学习宝库.本文分享使用tortoisegit对github/ ...

  2. 南邮oj[1401] 乘车费用

    Description lqp家离学校十分十分远,同时他又没有钱乘taxi.于是他不得不每天早早起床,匆匆赶到公交车站乘车到学校.众所周知CZ是个公交车十分发达的地方,但是CZ的公交车十分的奇怪,lq ...

  3. PAT 1023. 组个最小数 (20)

    给定数字0-9各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意0不能做首位).例如:给定两个0,两个1,三个5,一个8,我们得到的最小的数就是1001555 ...

  4. [转]使用URLDecoder和URLEncoder对中文进行处理

    一 URLEncoder HTML 格式编码的实用工具类.该类包含了将 String 转换为 application/x-www-form-urlencoded MIME 格式的静态方法.有关 HTM ...

  5. zabbix_proxy安装[yum mysql5.6]

      安装mysql rpm -ivh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm   修改mysql配置: [m ...

  6. Android动画学习笔记-Android Animation

    Android动画学习笔记-Android Animation   3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...

  7. Number of Digit One

    Given an integer n, count the total number of digit 1 appearing in all non-negative integers less th ...

  8. 开发备忘:AngularJS Syntax error, unrecognized expression in template file

    在写基于Angular的项目过程中,运行 grunt test的时候,一直给我蹦出这个错误,导致我的test一直跑不过,怎么试都是失败,经过重复排查,发现是因为template file中的html元 ...

  9. MySQL for mac使用记录

    一.登录 打开终端,输入/usr/local/mysql/bin/mysql -u root -p 初次进入mysql,密码为空.当出现mysql>提示符时,表示你已经进入mysql中.键入ex ...

  10. jQuery经典学习笔记

    1.层次选择器: $("div> span") 获取div下的span元素 $(".one + div") 获取class为one的下一个div 2)过滤 ...