前奏

对象是js的基本数据类型,准确来说除了字符串,数字,boolean值,null与undifine之外,js中的值都是对象。js中的对象是一种复合值,他将很多值(原始值或其他对象)聚合在一起,可以通过名字来访问这些值,其实看上去就像是一个属性的无序集合,每个属性都是一个名/值对。属性名是字符串,可以把对象看成是从字符串到值得映射。这种现象就像我们平时知道的“关联数组”,“数据字典”等等(只是叫法不同而已)。除了这种映射关系外,最主要的核心就是js的对象可以通过“原型继承”来继承属性与方法。另外由于对象时可变的,我们是通过引用而非值来操作对象。

首先我们先来说一下对象的属性,对象的属性包括属性名与属性值。其中属性名是一个包含空字符在内的任意字符串(关于属性名加不加双引号的问题,规范是要加的,但是在没有特殊字符,或是按照的json的数据格式来就需要加了,这样避免特殊字符或是数据传输出错)。属性值可以使js的任意值。除了名字以外每个属性还有一些和他相关的性质,被叫做“属性特性”:
可写:是否可以设置该属性的值
可枚举:表明是否可以使用for/in循环遍历属性的值。
可配置:是否可以删除或修改该属性。
其次除了包含属性之外,每个对象还包含三个相关的对象特质:
1、对象的原型(prototype)指向另外一个对象,本对象的属性继承自这个原型对象。
2、对象的类(class)是一个标示对象类型的字符串
3、对象的扩展标记(extensible flag)指明了(在ECMAScript 5中)是否可以向该对象添加新的属性
最后我们使用下面的术语来对我们常用的三类js对象与两类属性做区分:
1、内置对象(native object)使用ECMAScript 规范的对象或类,例如数组,函数,日期和正则表达式都是内置对象
2、宿主对象(host object)是由js解释器所嵌入的宿主环境定义的。客户端js中标示网页结构的HTMLElement对象均是宿主对象,在这种环境下宿主对象相当于是内置对象
3、自定义对象(user defined object)是又运行中的js代码创建的对象
4、自由属性(own property)是直接在对象中定义的属性
5、继承属性(inherited property)是在对象的原型上定义的属性
 
对象的创建
     说了这么多我们还没有聊到怎么创建最简单的对象。接下来就是怎么创建对象了。
创建对象的方式有三中:通过对象直接量(对象字面量),通过关键字new和(ECMAScript 5中)通过Object.create()来创建对象。
1、创建对象最简单的方式就是在js中使用对象直接量。
对象直接量是由若干的名/值对组成的映射表,名/值之间使用冒号分隔,名/值对之间使用逗号分隔,整个映射表用花括号扩起来。关于属性名前面已经说起。
var empty = {};   //  定义一个空对象
var ob1 = {x:1,y:2}; // 定义两个属性的对象
var ob2 = { // 定义复杂的对象
"main title" : "three object",
"main-t" : 123, // 特殊字符要加引号
"for" : {x:"123",y:123}, // for是保留字必须用引号
};
对象直接量是一个表达式,这个表达式的每次运算都会创建并初始化一个新的对象。如果在循环表达式里使用对象直接量,他将会创建很多对象的。
2、通过new来创建对象.
用new关键字来创建一个对象,new后跟一个函数调用,这里的函数称为构造函数(constructor),构造函数用以初始化一个新创建的对象,js语言核心中的原始类型都包含内置的构造函数。除了这些内置的构造函数外,我们最常用的就是我们自定义的构造函数了。例如:
var arr = new Array();      //   使用内置构造函数创建一个新的数组对象,相当于var arr = [];
var obg = new Object(); // 使用内置构造函数创建一个新的数组对象,相当于var arr = {};
function UserDefineObj (x,y) { // 自定义的构造函数
this.x = x;
this.y = y;
}
var user = new UserDefineObj(1,2); // 使用自定义的构造函数创建一个对象
3、使用Object.create()方法
ECMAScript  5定义了一个名为Object.create()方法来创建一个新对象,这个方法的第一个参数是这个对象的原型,Object.create()提供的第二个可选参数是用来对对象的属性作进一步的描述。
Object.create()是一个静态函数,而不是提供给某一个对象的方法,使用他的方法很简单只需要传入一个原型对象即可:例如
var ob1 = Object.create ( {x : 1, y : 2 } );     //  使用后面的参数(对象直接量)作为ob1对象的原型。

如果想创建一个空对象(比如通过{ }或newObject()创建的对象)可以使用Object.prototype作为这个方法的参数。例如:

var ob2 = Object.create ( { } ) ;     //  创建一个空对象

如果传入参数为null,将会创建一个没有任何原型的空对象,但这个对象没有任何继承的方法,甚至不包括基础的方法,如toString()等。

var ob3 = Object.create (null);      //  ob3不继承任何属性和方法
 
对象的继承
说到js的继承我们不得不提的就是js的核心特点:基于原型(prototype)继承。
 
原型:
       首先来看一下原型。每一个js对象(除了null)都有一个对象与其相关联,这个相关联的对象就是我们所说的原型对象。每一个对象都从原型继承属性。
所有通过对象直接量创建的对象都具有同一个原型,并通过js代码Object.prototype获得对原型对象的引用。也就是说通过直接量创建的对象的原型就是Object.prototype引用的一个对象。
通过new关键字与构造函数创建的对象的原型就是构造函数的prototype的属性的值。因此,无论是用对象直接量创建的对象,还是通过new Object()创建的对象同时都继承自Object.prototype。同时new Array()创建的对象的原型就是Array.Prototype,使用new Date()创建的对象的原型就是Date.prototype.
没有原型的对象为数不多,其中Object.prototype就是其中一个,他不继承任何属性。其他的对象的原型对象都是普通的对象。另外所有的内置函数以及大部分自定义的函数(上面说过一个ob3对象没有原型)都有一个继承自Object.prototype的原型。因此new Date()既继承自Date.prototy同时也继承自Object.prototype。这一系列相互关联的原型对象也就构成了所谓的原型链(prototyp chain)。
例如:
function UserDefineObj (x,y) {        //  自定义的构造函数
this.x = x;
this.y = y;
}
var user = new UserDefineObj(1,2); // 使用自定义的构造函数创建一个对象
console.log(user.toString()); // toString这个方法就是继承自Object.prototype

关于原型与原型链推荐博客:http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html

继承:
js对象具有自定义的属性,也有一些事继承自原型对象的属性。下面我们将用实例来讨论js的继承关系。
function UserDefineObj (x,y) {        //  自定义的构造函数
this.x = x; // 声明自定义属性x,也成为自有属性
this.y = y; // 声明自定义属性y
}
UserDefineObj.prototype.allx = 123; // 给构造函数的原型对象添加属性allx
var user = new UserDefineObj(1,2); // 使用自定义的构造函数创建一个对象
console.log(user.x); // 输出:1
console.log(user.allx); // 输出:123

由于js是一种弱类型的语言,在不声明变量的情况下,解析器会自动的再运行的时候创建这个变量(全局变量)。

  function UserDefineObj (x,y) {        //  自定义的构造函数
this.x = x; // 声明自定义属性x,也成为自有属性
this.y = y; // 声明自定义属性y
}
UserDefineObj.prototype.allx = 123; // 给构造函数的原型对象添加属性allx
var user = new UserDefineObj(1,2); // 使用自定义的构造函数创建一个对象
var ob = new UserDefineObj(4,5);
console.log(user.x); // 输出:1
console.log(ob.x); // 输出:4
console.log(user.allx); // 输出:123
console.log(ob.allx); // 输出:123
user.allx = 110; // 更改user对象的属性,对ob对象没有影响
console.log(user.allx); // 输出:110
console.log(ob.allx); // 输出:123

从上面程序的输出可以看出user对象和ob对象创建了两个不同的对象,这两个对象同时共同继承自原型对象UserDefineObj.prototype。由于是不同的对象,所以对属性的值得改变,对其他的对象没有影响。

js对象小结的更多相关文章

  1. 在这个看脸的世界,该如何优雅的创建JS对象

    Javascript是一门解释型的语言,是基于对象的,严格来说并不怎么符合的面向对象的标准,显著的特点就是函数就是“一等对象”,与传统的面向对象语言不同的时,Javascript有“一千种”方法来创建 ...

  2. js 对象深复制,创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  3. [置顶] js对象

    js中,一切事物都是对象.对象是一切的基础. 而具体到某一个对象时. 对象则是包含一组变量和函数的集合实例 我们先来中体会下je对象的全局. 接下来就具体揭开这个对象的面纱吧 ja对象分类 Funct ...

  4. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  5. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  6. [js]js设计模式小结

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  7. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  8. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. 7-81 js课程小结

    7-81 js课程小结 学习要点 理解全局对象 变量的作用范围 理解全局对象Global 全局属性和函数可用于所有内建的 JavaScript 对象.全局对象是所有全局方法的拥有者,用来统一管理全局方 ...

随机推荐

  1. sql语句查询经纬度范围

    指定一个经纬度,给定一个范围值(单位:千米),查出在经纬度周围这个范围内的数据. 经度:113.914619 纬度:22.50128 范围:2km longitude为数据表经度字段 latitude ...

  2. 什么是O/R Mapping(ORM)

    ORM,即Object-Relationl Mapping,它的作用是在关系型数据库和对象之间作一个映射,这样,我们在具体的操作数据库的时候,就不需要再去和复杂的SQL语句打交道,只要像平时操作对象一 ...

  3. azure 云服务证书下载方式

    打开地址自动下载证书,vs中项目-右键-发布-导入证书. https://manage.windowsazure.cn/publishsettings/index 在 Visual Studio 中打 ...

  4. Block 块

    代码块本质上是和其他变量类似.不同的是,代码块存储的数据是一个函数体.使用代码块是,你可以像调用其他标准函数一样,传入参数数,并得到返回值. 脱字符(^)是块的语法标记.按照我们熟悉的参数语法规约所定 ...

  5. 获取 UIWebView中用户所点击的图片URL

    在使用 UIWebView 的时候 (通常是阅读类的 App),会有点击图片放大的需求,那么可以通过设置 UIWebViewDelegate 来过滤请求,取出图片的 URL 这个方法的前提是 img ...

  6. HttpModule在Web.config的配置和动态配置

    学习笔记 ASP.Net处理Http Request时,使用Pipeline(管道)方式,由各个HttpModule对请求进行处理,然后到达 HttpHandler,HttpHandler处理完之后, ...

  7. Python实现kMeans(k均值聚类)

    Python实现kMeans(k均值聚类) 运行环境 Pyhton3 numpy(科学计算包) matplotlib(画图所需,不画图可不必) 计算过程 st=>start: 开始 e=> ...

  8. 结队开发项目——基于Android的无线点餐系统——NABC模型

    特点:通过提前订餐,可以节约学生大量的排队时间. N(need):生活中可以发现许多同学都喜欢出去买饭,而且在有的摊位需要排很长时间的队,这样他们就会很晚吃到饭,下午有课的学生都不能睡午觉,所以通过我 ...

  9. DWR推送技术

    “服务器推送技术”(ServerPushing)是最近Web技术中最热门的一个流行术语.它是继“Ajax”之后又一个倍受追捧的Web技术.“服务器推送技术”最近的流行跟“Ajax ”有着密切的关系. ...

  10. web开发--文档下载

    GOOGLE在线文档下载地址分享(GOOGLE的文档地址暂不能用了,会放在其它位置..) GOOGLE的在线文档功能好象挂掉了...等找个其它存放的位置把这些文档再上传上去... 存在GOOGLE里面 ...