前奏

对象是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. iOS学习之C语言数据类型

    1.进制 0 1 2 3 4 5 6 7 8 9 A B C D E F 0X123(十六进制) 0123(八进制) 位权:单位数字的基本数值 2.数据类型 关键字    说明  字节大小 char  ...

  2. 六大Nagios常见问题解决办法

    Nagios常见问题1: It appears as though you do not have permission to view information for any of the host ...

  3. 自学asp.net mvc(一)

    之前一直做asp.net的webform,现在想学习一下mvc,把自学中遇到的问题记录到博客. 一.codeplex上托管代码 1. 2. 3. 4. 5. 6. 7. 8. 9.

  4. maven属性

    Maven内置了三大特性:属性.Profile和资源过滤来支持构建的灵活性. 内置属性:主要有两个常用内置属性 ${basedir}表示项目根目录,即包含pom.xml文件的目录 ${version} ...

  5. [shell基础]——join命令

    测试文本内容 # cat -n name1.txt 1 name1 alvin1 2 name2 alvin2 3 name3 alvin3 4 name4 alvin4 # cat -n name2 ...

  6. android 图片缩放抗锯齿

    之前用的时候只设置了antialias属性,其实要设置两个flag才行 paint.setFlags(Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG); ...

  7. 【Integer To Roman】cpp

    题目: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from ...

  8. 学习Linux第五天

    1.VIM编辑器 3种模式: Command Model , Insert Model , Last line Model 安装vim: sudo apt-get install vim 如果提示出错 ...

  9. 删除vlan的方法

    方法一: 删除VLAN     先删接口     switch(config)#int ra f0/1 - 5     switch(config-if)#no switchport access v ...

  10. WebServices中使用Session

    默认情况下,Asp.net使用cookie来管理会话状态.因此,Asp.net假设客户端存储了会话cookie并将它与每一个请求一并发回给客户端. /// <summary> /// Su ...