JavaScript对象创建、原型链、属性管理与序列化完整指南

JavaScript对象概述

本文对JavaScript中的对象体系进行系统性总结。

在JavaScript中，对象本质上是属性的无序集合，每个属性由键值对构成，支持动态增删操作。

JavaScript中的一切事物均可视为对象，包括字符串、数字、数组和日期等类型。

JavaScript对象不仅拥有自有属性，还能通过“原型”机制从关联对象继承属性，其中方法通常由原型继承而来。这种“原型式继承”构成了JavaScript语言的核心特征。

对象的创建方式

1.创建对象

第一种方式：使用对象直接量（Literal）创建对象。

这是最基础的创建方式，由若干key:value键值对组成，属性间以逗号分隔，整体包裹在花括号内。


var empty = {}; //不包含任何属性的对象
var point = { x: 3, y: 5 }; //包含两个属性的对象
var point2 = { x: point.x + 1, y: point.y + 1 }; //属性值可以是表达式
var book = {
  "main title": "JavaScript", //属性名有空格，必须用字符串表示
  "sub-title": "The Defintive Guide", //属性名有连字符，必须用字符串表示
  "for": "all audiences", //属性名是保留字，必须用字符串表示
  author: { //这个属性的值是一个对象
    firstname: "David",
    surname: "Flanagan"
  }

在ECMAScript 5标准中，保留字作为属性名时无需使用引号包裹。此外，对象直接量最后一个属性后的逗号会被自动忽略。

第二种方式：通过关键字创建对象。

使用关键字new配合构造函数来创建并初始化对象。JavaScript核心内置类型均包含内置构造函数，以下是内置对象的创建示例。


var o = new Object(); //创建一个空对象，等价于 0={}
var a = new Array(); //创建一个空数组
var d = new Date(); //创建一个代表当前时间的Date对象
var r = new RegExp("js"); //创建一个正则表达式对象

除了内置构造函数，使用自定义构造函数来初始化新对象也是常见做法。

在介绍第三种方法前，需先理解“原型”概念。除null外，每个JavaScript对象都关联一个对象，并可从中继承属性，该关联对象即为“原型”，类似于C#中的基类概念。

通过对象直接量和构造函数创建的所有对象，均可通过Object.prototype获取其原型引用。Object.prototype本身是没有原型的对象之一。

普通对象均拥有原型，例如Array数组对象的原型为Array.prototype。内置构造函数均继承自Object.prototype。因此，通过new Array()创建的数组对象同时继承自Array.prototype和Object.prototype。当对象存在多继承关系时，这一系列链接的原型对象被称为“原型链”。

第三种方式：使用Object.create()函数创建对象。

Object.create(Object[,Properties])是ECMAScript 5引入的静态函数，用于创建对象。它接收两个参数：第一个指定新对象的原型；第二个为可选参数，用于描述对象属性。

使用该函数创建对象时，只需传入所需的原型对象即可：


var a = Object.create({ 'isLock': true }); //为对象a指定一个原型
console.log(a.isLock); //=> true o继承原型对象属性isLock
console.log(a.hasOwnProperty('isLock')); //=> false 验证isLock并非o的自有属性

若需创建一个普通空对象，需传入参数Object.prototype：

var b = Object.create(Object.prototype);

通过传入参数null可创建没有原型的对象，此类对象不会继承任何属性：

var b = Object.create(null); //该对象不包括任何对象的基础方法

通过原型创建对象使得任意对象可继承，这是一个强大特性。例如，它可以防止程序无意修改不受控制的对象。程序不直接操作对象，而是操作通过Object.create()创建的继承对象。

属性的查询与设置

2.查询和设置属性

对象属性值可通过点运算符(.)和方括号运算符([])进行查询或设置。


var book = { 'author': 'Tom', 'main title': 'Hello JavaScript' };
var author = book.author; //1.获取book的“author”属性值
var title = book["main title"]; //2.获取book的“main title”属性值
book.edition = 6; //3.给book创建一个“edition”属性
book["main title"] = "ECMAScript"; //4.修改"main title"属性值

在ES3版本中，若属性名为关键字，必须通过方括号形式访问。ES5版本放宽了限制，允许在点运算符后直接使用保留字。

关联数组对象

前文提到可通过object["property"]操作对象属性，这种语法类似数组，但元素通过字符串索引而非数字索引，这类数组被称为关联数组。JavaScript对象均为关联数组，通过[]访问属性时，可在运行时动态创建或修改，具有更高灵活性。

原型与继承机制

继承

JavaScript对象的属性分为两类：一类是用户定义的“自有属性”，另一类是从原型对象继承的属性。对象属性的多继承关系构成了原型链。

对象属性在赋值前会先检查原型链，以判断是否允许赋值。例如，若对象o继承自一个只读属性x，则对x属性赋值是不允许的。若允许赋值，操作仅在当前对象上创建或修改已有属性，不会修改原型链。在JavaScript中，继承主要体现在属性查询时，而设置属性与继承无关。利用此特性，可以有选择地覆盖继承的属性。

属性访问错误

查询不存在的属性不会报错。若在对象自身属性和继承属性中均未找到指定属性，则返回undefined。通过以下代码可验证：


var a = { name: 'admin' }; //定义一个原型对象a
var b = Object.create(a); //定义一个对象b继承至对象a
console.log(b.name); //=> admin b继承a的name属性，正常输出
console.log(b.age); //=>undefined b本身和继承对象都没有age属性，故输出undefined

但有一种特殊情况：若对象本身不存在，试图访问其属性时会抛出异常。例如：


console.log(c.name); //Uncaught ReferenceError: c is not defined
var d = null;
console.log(d.name); //Uncaught TypeError: Cannot read property 'name' of null

因此，在访问不确定对象的属性时，需先进行验证。


var book = { "length": 21 };
var len = book && book.length; //这里用&&的第三种用法代替if。
console.log(len); //=>21

属性的删除与检测

3.删除属性

delete运算符用于删除对象属性，删除成功返回true。但delete无法删除configurable特性为false的属性，且只能删除自身属性，不能删除继承属性。


delete book.author // 返回true

删除全局属性时，可直接省略全局对象，delete后跟随要删除的属性名即可。


this.x=1; //创建一个全局属性
console.log(delete x); //=>true

4.检测属性

检测属性旨在判断某属性是否存在于对象中，通常通过in运算符、hasOwnProperty()和propertyIsEnumerable()方法完成验证。

in运算符用于判断对象自有属性或继承属性是否包含该属性，若包含则返回true。


var o = { "x": 5 };
console.log("x" in o); //=>true 对象o有属性x
console.log("y" in o); //=>false 对象o没有属性x
console.log("toString" in o); //=>true 对象o继承属性toString

hasOwnProperty()方法用于检测给定属性是否为对象的自有属性，对于继承属性返回false。


var o = { "x": 5 };
console.log(o.hasOwnProperty("x")); //=>true
console.log(o.hasOwnProperty("toString")); //=>false

propertyIsEnumerable()方法是hasOwnProperty()的增强版。仅当检测到属性为对象的自有属性且该属性可枚举时，才返回true。


var o = Object.create({ "y": 5 });
o.x = 6;
console.log(o.propertyIsEnumerable("x")); //=>true x为自有属性
console.log(o.propertyIsEnumerable("y")); //=>false y是继承属性
console.log(Object.prototype.propertyIsEnumerable("toString")); //=>false toString不可枚举

存取器与属性特性

5.属性存取器

在ECMAScript 5中，对象可使用get和set关键字定义类似C#、Java等高级语言的保护属性。此类属性被称为“存取器属性”，且支持继承。


var obj = {
  //数据属性（可看成字段）
  data: null,
  //存取器属性（保护属性）
  get Data() { return this.data; },
  set Data(value) { this.data = value; }
};
obj.Data = "admin";
console.log(obj.data); //=>admin

这种写法与Java中的保护属性相似，体现了JavaScript面向对象的特性。若对象属性同时具备get和set方法，则为可读/写属性；若仅有get方法，则为只读属性；若仅有set方法，则为只写属性，读取只写属性始终返回undefined。

6.属性的特性

在ECMAScript 3中，对象属性是否可写、可配置和可枚举并无明确标识，但在ECMAScript 5中，可通过API标识这些特性。这些API即为属性特性。普通数据属性的4个特性包括：value(值)、writable(可写性)、enumerable(可枚举性)、configurable(可配置性)。存储器属性的4个特性包括：get(读取)、set(写入)、enumerable(可枚举性)、configurable(可配置性)。 ECMAScript 5定义了Object.getOwnPropertyDescriptor()方法，用于查询对象特定属性的特性，返回一个代表4个特性的“属性描述符”对象。


var descriptor = Object.getOwnPropertyDescriptor({ length: 50 }, "length");
console.log(descriptor); 
//=> descriptor = { value: 50, writable: true, enumerable: true, configurable: true }
//------------------------------------------------------------------
var random = {
  //只读属性：返回一个0-255之间的随机数
  get octet() { return Math.floor(Math.random() * 256); }
};
var descriptor1= Object.getOwnPropertyDescriptor(random,"octet");
console.log(descriptor1); 
//=> descriptor1 = Object {set: undefined, enumerable: true, configurable: true}

从方法名可知，该函数仅能获取对象自有属性的描述符。对于继承属性和不存在的属性，返回undefined。若要获取继承属性的特性，需遍历原型链。

若要设置属性或使新创建属性具备特定特性，需调用Object.defineProperty()方法。第一个参数为要修改的对象；第二个参数为要修改的属性；第三个为属性描述符对象。该方法返回修改后的对象副本。


var o = {};       //创建一个空对象
Object.defineProperty(o, "x", {
  value: 1,      //定义一个x属性,赋值为1
  writable: true,   //可写
  enumerable: false, //不可枚举
  configurable: true //可配置
});
if (o.x) console.log(Object.keys(o)); //=> props = [] 属性存在，但是不能枚举
Object.defineProperty(o, "x", { writable: false }); //让属性x变为只读
o.x = 2; //试图修改属性x的值失败，但不报错
console.log(o.x); //=>1 
Object.defineProperty(o, "x", { value: 2 }); //但属性x依然为可配置，可以直接修改value值特性。
console.log(o.x); //=>2
Object.defineProperty(o, "x", { //将数据属性修改为存取器属性
  get: function () {
    return 0;
  }
});
console.log(o.x); //=>0

该方法同样无法设置继承属性的特性。若需同时修改多个自有属性的特性，可使用Object.defineProperties()方法。第一个参数为要修改的对象；第二参数为包含属性名称及对应描述符对象的映射表。


var p = Object.defineProperties({}, {
  x: { value: 3, writable: true, enumerable: true, configurable: true },
  y: { value: 4, writable: true, enumerable: true, configurable: true },
  r: {
    get: function () {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    },
    enumerable: true,
    configurable: true
  }
});
console.log(p.r); //=>5

对象的关键属性

7.对象的三个属性

原型属性

对象的原型用于继承属性，该属性至关重要，常将“o的原型属性”简称为“o的原型”。原型属性在对象创建时即已设定。前文已介绍原型，此处补充说明。

通过对象直接量创建的对象，使用Object.prototype作为原型；
通过new关键字创建的对象，使用构造函数的prototype作为原型；
通过Object.create()创建的对象，使用第一个参数作为原型。

在ES5版本中，将对象传入Object.getPrototypeOf()方法可查询其原型对象。要检测一个对象是否是另一个对象的原型，可使用isPrototypeOf()方法。


var a = { x: 2 };
var b = Object.create(a);
console.log(a.isPrototypeOf(b)); //=> true
console.log(Object.prototype.isPrototypeOf(b));//=> true

类属性

对象的类属性是一个字符串，用于表示对象的类型信息。JavaScript未提供直接查询方法，需通过间接方式查询：调用对象的toString()方法，然后提取返回字符串第8个字符至倒数第二个位置之间的字符。若对象继承的toString()方法被重写，则需通过Function.call()方法间接调用。


function classof(o) {
  if (o === null) return "Null";
  if (o === undefined) return "Undefined";
  return Object.prototype.toString.call(o).slice(8,-1);
}

classof()函数可接收任何类型参数，并包含对null和undefined的特殊处理。


console.log(classof(null));  //=> "Null"
console.log(classof(1));   //=> "Number"
console.log(classof(""));   //=> "String"
console.log(classof(false)); //=> "Boolen"
console.log(classof({}));   //=> "Object"
console.log(classof(/./));  //=> "Regexp"
console.log(classof(window)); //=> "Window"(浏览器宿主对象类)

可扩展性

对象的可扩展性表示是否可向对象添加新属性。在ECMAScript 5中，所有自定义对象、内置对象和宿主对象默认支持可扩展性。下文介绍检测和设置对象可扩展性的方法及其区别。

Object.preventExtensions()方法可将传入对象设置为不可扩展。需注意两点：1.对象一旦转为不可扩展，便无法再恢复为可扩展；2.若向不可扩展对象的原型添加属性，该不可扩展对象同样会继承这些新属性。

Object.isExtensible()方法用于检测传入对象的可扩展性。

Object.seal()方法可将传入对象设置为不可扩展，并将对象所有自有属性设置为不可配置。这意味着不能向该对象添加新属性，也不能删除或配置已有属性。对于已密封的对象无法解封，可使用Object.isSealed()方法检测对象是否封闭。

Object.freeze()方法更为严格，它直接冻结对象。除了将对象设置为不可扩展及其属性设置为不可配置外，还将对象自有属性的所有数据属性设置为只读。可使用Object.isFrozen()方法检测对象是否被冻结。 Object.preventExtensions()、Object.seal()和Object.freeze()三个方法均返回传入的对象。

对象的序列化

8.序列化对象

JSON大家并不陌生，本节介绍JSON序列化。序列化即JS对象与字符串之间的互相转换，JSON作为数据交换格式。ECMAScript 5提供了两个内置函数JSON.stringify()和JSON.parse()，分别用于序列化和还原JS对象。


var obj = { x: 3, y: 5 };   //定义一个测试对象
var str = JSON.stringify(obj); //str = "{"x":3,"y":5}"
obj = JSON.parse(str);     //obj = Object {x: 3, y: 5}

JSON全称“JavaScript Object Notation”（JavaScript对象表示法）。JSON语法无法表示JavaScript中的所有值。支持序列化和还原的包括对象、NaN、数组、字符串、无穷大数字、true\false和null。函数、RegExp、Error对象和undefined值不能序列化和还原。JSON.stringify()函数仅序列化对象可枚举的自有属性。日期对象序列化的结果为ISO格式的日期字符串。

9..参考与扩展

本篇内容源自我对《JavaScript权威指南》第6章-对象章节的阅读总结和代码实践。总结较为粗糙，读者也可通过原著或MDN更深入地了解对象。

[1] David Flanagan，JavaScript权威指南(第6版) [2] MDN，JavaScript 参考文档 - Array - JavaScript | MDN

感谢阅读此文，希望能帮助到大家，谢谢大家对本站的支持！

JavaScript 对象核心机制与操作详解