学习JavaScript之——第6章 对象(上)

学习JavaScript之——第6章 对象(上)

学习内容：

6.1 创建对象
6.2 属性的查询和设置
6.3删除属性
6.4 检测属性
6.5枚举属性

---

• 对象是JavaScript的基本数据类型。对象是一种复合值：它将很多值(原始值或其他对象)聚合在一起，可通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值 对。
• 除了字符串、数字、true、false、null、undefined之外，JavaScript中的值都是对象。
• 属性名可以是包含空字符串在内的任意字符串，但对象不能存在两个同名的属性，值可以是任意JavaScript值，或者getter和setter函数。
• 属性特性：1.可写(是否可以设置该属性的值)、2.可枚举(是否可以通过for/in循环返回该属性)、3.可配置(是否可以删除或修改该属性)
• 对象特性：1.对象的原型指向另外一个对象，本对象的属性继承自它的原型对象。2.对象的类是一个标识对象类型的字符串。3.对象的扩展标记指明了是否可以向该对象添加新属性。

三类对象和两类属性术语：

• 内置对象：是由ECMAScript规范定义的对象或类。例：数组、函数、日期、正则表达式都是内置对象。
• 宿主对象：是由JavaScript解释器(如Web浏览器)所嵌入的宿主环境定义的。宿主对象也可以当成内置对象。
• 自定义对象：是由运行中的JavaScript代码创建的对象。
• 自有属性：直接在对象中定义的属性。
• 继承属性：在对象的原型对象中定义的属性。

6.1 创建对象
可以通过对象直接量、关键字new、Object.create()函数来创建对象。
6.1.1 对象直接量
对象直接量是由若干名/值对组成的映射表，名/值对中间用冒号分隔，名/值对之间用逗号分隔(最后一个属性的逗号省略)，整个映射表用花括号括起来。

var empty ={};
var point = {x:0,y:0};
var point2 = {x:point.x, y:point.y+1};
var book = {
  "main title":"JavaScript",
  'sub-title':"The Definitive Guide",
  "for":"all audiencr",
  author:{//这个属性的值是一个对象
    firstname:"David",
    surname:"Flanagan"
  }
};

6.1.2 通过new创建对象
new运算符创建并初始化一个新对象。new跟随一个函数调用。这里的函数称作构造函数，构造函数用以初始化一个新创建的对象。

var o = new Object();//创建一个空对象，{}
var a = new Array();//创建一个空数组，[]
var d = new Date();//创建一个表示当前时间的Date对象
var r = new RegExp();//创建一个可以进行模式匹配的RegExp对象

6.1.3 原型

• 每一个对象都从原型继承属性，可以通过JavaScript代码Object.prototype获得对原型对象的引用。通过关键字new和构造函数创建的对象的原型就是构造函数prototype属性的值。因此，同使用{}创建对象一样，通过new Object()创建的对象继承自Object.prototype，通过new Array()创建的对象继承自Array.prototype，通过new Date()创建的Date对象原型就是Date.prototype。
• 没有原型的对象为数不多，Object.prototype就是其中之一，它不继承任何属性。

6.1.4 Object.create()

• Object.create(),它创建一个新对象，其中第一个参数是这个对象的原型，第二个参数(可选)用以对对象的属性进行进一步描述。
• Object.create()是一个静态函数，而不是提供给某个对象调用的方法。使用只需传入所需的原型对象：

var o1 = Object.create({x:1,y:2});//o1继承了属性x和y

• 可以通过传入参数null来创建一个没有原型的新对象，但通过这种方式创建的对象不会继承任何东西，甚至不包括基础方法，比如toString()，也就是说，它将不能和"+"运算符一起正常工作：

var o2 = Object.create(null);//o2不继承任何属性和方法

• 如果想创建一个普通的空对象(比如通过{}或new Object()创建的对象),需要传入Object.prototype：

var o3 = Object.create(Object.prototype);//o3和{}和new Object 一样

• 可以通过任意原型创建新对象(换句话说，可以使任意对象可继承)
• 通过原型继承创建一个新对象

function inherit(p){
  if(p==null) throw TypeError(); //p是一个对象，但不能是null
  if(Object.create) 
    return Object.create(p); //如果Object.create()存在，则直接使用它
  var t = typeof p;//否则进一步检测
  if(t !== "object" && t!=="function") throw TypeError();
  function f(){};//定义一个空构造函数
  f.prototype = p;//将其原型属性设置为p
  return new f();//使用f()创建p的继承对象
}

6.2 属性的查询和设置

• 可以通过".“或”[]“运算符来获取属性的值。运算符左侧应当是一个表达式，它返回一个对象。对于”."来说右侧必须是一个以属性名称命名的简单标识符；对于[]来说，方括号内必须是一个计算结果为字符串的表达式，这个字符串就是属性的名字：

var author = book.author;
var name = author.surname;
var title = book["main title"];

• 创建属性或给属性赋值

book.edition = 6;//给book创建一个名为edition的属性
book["main title"] = "ECMAScript";//赋值

• 点"."运算符后的标识符不能是保留字，比如o.for或o.class是非法的。如果一个对象的属性名是保留字则必须使用[]的形式访问它们，比如o[“for”]或o[“class”]

6.2.1 作为关联数组的对象

• 数组元素是通过字符串索引而不是数字索引，这种数组就是关联数组，也称作散列、映射或字典。JavaScript对象都是关联数组。JavaScript是弱类型语言，在任何对象中程序都可以创建任意数量的属性。
• 当通过"."访问对象的属性时，属性名用一个标识符来表示。标识符必须直接出现在JavaScript程序中，它们不是数据类型，因此程序无法修改它们。
• 当通过"[]"来访问对象的属性时，属性名用字符串来表示，字符串是JavaScript的数据类型，在程序运行时可以修改和创建它们。

var addr = "";
for (i = 0;i<4;i++){
  addr += customer["address" + i] + '\n';
}

6.2.2 继承

• 假设要查询对象o的属性x,如果o中不存在x，那么将继续在o的原型对象中查询属性x。
• 如果原型对象中也没有x，但是这个原型对象也有原型，那么继续在这个原型对象的原型上执行查询，直到找到x或者找到一个原型是null的对象为止。
• 可以看到对象的属性构成了一个"链"，通过这个链可以实现属性的继承。

function inherit(p){
  if(p==null)
    throw TypeError();
  if(Object.create)
    return Object.create(p);
  var t = typeof p;
  if(t !== "object" && t!=="function")
    throw TypeError();
  function f(){};
  f.prototype = p;
  return new f();
}

var o = {};
o.x = 1;
var p = inherit(o);
p.y = 2;
var q = inherit(p);
q.z = 3;
var s = q.toString();
q.x + q.y;//3 : 1+2,x和y分别继承自o和p

• 假设给对象o的属性x赋值，如果o中已有属性x(这个属性不是继承来的)，那么这个赋值操作只改变这个已有的属性x的值；如果o中不存在属性x，那么赋值操作是不允许的。如果允许属性赋值操作，它也总是在原始对象上创建属性或对已有的属性赋值，而不会去修改原型链。设置属性与继承无关，这个属性可以有选择地覆盖继承的属性。

function inherit(p){
  if(p==null)
    throw TypeError();
  if(Object.create)
    return Object.create(p);
  var t = typeof p;
  if(t !== "object" && t!=="function")
    throw TypeError();
  function f(){};
  f.prototype = p;
  return new f();
}

var unitcircle = {r:1};//一个用来继承的属性
var c = inherit(unitcircle);//c继承属性r
c.x = 1;//c定义属性x
c.y = 1;//c定义属性y
c.r = 2;//c覆盖继承来的属性
unitcircle.r;//1，原型对象没有改变

• 属性赋值要么失败，要么创建一个属性，要么在原始对象中设置属性，但有一个例外，如果o继承自属性x，而这个属性是一个具有setter方法的accessor属性，这时将调用setter方法而不是给o创建一个属性x。需要注意的是setter方法是由对象o调用的，而不是定义这个属性的原型对象调用的。因此如果setter方法定义任意属性，这个操作只是针对o本身，并不会修改原型链。

6.2.3 属性访问错误

• 查询一个对象存在，但属性不存在的属性返回undefined；如果对象不存在，则会报错给undefined和null设置属性也会报类型错误

6.3删除属性

• delete运算符可以删除对象的属性，delete只是断开属性和宿主对象之间的联系，而不会去操作属性中的属性，(所以在销毁对象的时候，要遍历属性中的属性，依次删除)
• 当delete表达式删除成功或没有任何副作用(比如删除不存在的属性)时，它返回true。
• 如果delete后不是一个属性访问表达式，delete同样返回true

var o = {x:1};
delete o.x;//删除x，true
delete o.x;//(x已经不存在了，什么也没做)，返回true
delete o.toString;//(toString是继承来的，什么也没做)，返回true
delete 1;//无意义，返回true

• delete不能删除那些可配置性为false的属性，在严格模式下，删除一个不可配置属性会报一个类型错误。在非严格模式中会返回false

delete Object.prototype;//false,属性是不可配置的
var x = 1;//全局变量
delete this.x;//不能删除这个属性，false
function f(){}//全局函数
delete this.f;//不能删除全局函数，false

6.4 检测属性

• JavaScript对象可以看作属性的集合，我们经常会检测集合中 成员的所属关系——判断某个属性是否存在于某个对象中。
• in 运算符的左侧是属性名(字符串)，右侧是对象。如果对象的自有属性或继承属性中包含这个属性，则返回true。

var o = {x:1};
"x" in o;//true
"y" in o;//false
"toString" in o;//true,o继承toString的属性

• 对象的hasOwnProperty()方法用来检测给定的名字是否是对象的自有属性。对于继承属性它将返回false。

var o = {x:1};
o.hasOwnProperty("x");//true,o有一个自有属性x
o.hasOwnProperty("y");//false
o.hasOwnProperty("toString");//false

• propertyIsEnumerable()是hasOwnProperty()的增强版，只有检测到这个属性是自有属性且这个属性的可枚举性为true时才返回true。某些内置属性是不可枚举的。通常由JavaScript代码创建的属性都是可枚举的。

function inherit(p){
  if(p==null)
    throw TypeError();
  if(Object.create)
    return Object.create(p);
  var t = typeof p;
  if(t !== "object" && t!=="function")
    throw TypeError();
  function f(){};
  f.prototype = p;
  return new f();
}

var o = inherit({y:2});
o.x = 1;
o.propertyIsEnumerable("x");//true
o.propertyIsEnumerable("y");//false,y是继承来的
Object.prototype.propertyIsEnumerable("toString");//false,不可枚举

• 除in运算符之外，还可以使用"!=="判断一个属性是否是undefined

var o ={x:1};
o.x !== undefined;//true
o.y !== undefined;//false
o.toString !== undefined;//true,o继承了toString属性

• 然而有一种场景只能使用in运算符而不能使用上述属性访问方式。in可以区分不存在的属性和存在但值为undefined的属性。

var o = { x : undefined};
o.x !== undefined;//false,属性存在值为undefined
o.y !== undefined;//false，属性不存在
"x" in o;//true
"y" in o;//false
delete o.x;//true,删除属性
x in o;//false，属性不存在

• 注意，上述代码使用的是"!== “运算符，而不是” != “。” !== "可以区分undefined和null，有时不必做这种区分：

if(o.x != null)
  o.x *= 2;
if(o.x)
  o.x *=2;

6.5枚举属性

• 除了检测对象的属性是否存在，我们还会经常遍历对象的属性。通常使用for/in循环遍历，for/in循环可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性)，把属性名称赋值给循环变量。对象继承的内置方法是不可枚举的，但在代码中给对象添加的属性都是可枚举的。

var o = {x:1,y:2,z:3};
o.propertyIsEnumerable("toString");//false,不可枚举
for (p in o)
console.log(p);//输出x,y,z,不会输出toString

• 有许多实用工具库给Object.prototype添加了新的方法或属性，这些方法和属性可以被对象继承并使用。为避免不能枚举，需要过滤for/in循环返回的属性，下面两种方式最常见：

for (p in o){
  if(!o.hasOwnProperty(p))
    continue;//跳过继承的属性
}

for (p in o){
  if(typeof o[p] === "function")
    continue;//跳过方法
}

• 例6.2定义了一些有用的工具函数来操控对象的属性，这些函数用到了for/in循环。
• 例6-2：用来枚举属性的对象工具函数
• 把p中的可枚举属性复制到o中，并返回o；如果o和p中含有同名属性，则覆盖o中的属性；这个函数并不处理getter和setter以及复制属性

function extend(o,p){
  for(prop in p){//遍历p中的所有属性
    o[prop] = p[prop];//将属性添加至o中
  }
  return o;
}

• 将p中的可枚举属性复制至o中，并返回o；如果o和p中有同名的属性，o中的属性将不受影响；这个函数并不处理getter和setter以及复制属性

function merge(o,p){
  for(prop in p){//遍历p中的所有属性
    if(o.hasOwnProperty[prop])//过滤掉已经在o中存在的属性
      continue;
    o[prop] = p[prop];//将属性添加至o中
  }
  return o;
}

• 如果o中的属性在p中没有同名属性，则从o中删除这个属性，返回o

function restrict(o,p){
  for(prop in o){//遍历o中的所有属性
    if(!(prop in p))
      delete o[prop];//如果p中不存在，则删除之
  }
  return o;
}

• 如果o中的属性在p中存在同名属性，则从o中删除这个属性，返回o

function subtract(o,p){
  for(prop in p){//遍历p中的所有属性
    delete o[prop];//从o中删除(删除一个不存在的属性不会报错)
  }
  return o;
}

• 返回一个新对象，这个对象同时拥有o的属性和p的属性；如果o和p中有重名的属性，使用p中的属性值

function  union(o,p){
  return extend(extend({},o),p);
}

• 返回一个新对象，这个对象拥有同时在o和p中出现的属性；很像求o和p的交集，但p中的属性值被忽略

function intersection(o,p){
  return restrict(extend({},o),p);
}

• 返回一个数组，这个数组包含的是o中可枚举的自有属性的名字

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

• 除for/in循环之外，ECMAScript5还定义了两个用以枚举属性名称的函数。
• 第一个是Object.keys(),它返回一个数组，这个数组由对象中可枚举的自有属性的名称组成。
• 第二个是Object.getOwnPropertyNames()，它和Object.keys()类似，只是它返回对象的所有自然属性的名称，而不仅仅是可枚举的属性。