Javascript 對(duì)象總結(jié)：

JavaScript對(duì)象可以看作是屬性的無序集合，每個(gè)屬性就是一個(gè)鍵值對(duì)，可增可刪。

JavaScript中的所有事物都是對(duì)象：字符串、數(shù)字、數(shù)組、日期，等等。

JavaScript對(duì)象除了可以保持自有的屬性外，還可以從一個(gè)稱為原型的對(duì)象繼承屬性。對(duì)象的方法通常是繼承的屬性。這種“原型式集成”是JavaScript的的核心特征。

1.創(chuàng)建對(duì)象

第一種：對(duì)象直接量表示法創(chuàng)建對(duì)象。

這是最簡單的對(duì)象創(chuàng)建方式，對(duì)象直接量由若干key:value鍵值對(duì)屬性組成，屬性之間用逗號(hào)分隔，整個(gè)對(duì)象用花括號(hào)括起來。

var empty = {}; //不包含任何屬性的對(duì)象
var point = { x: 3, y: 5 }; //包含兩個(gè)屬性的對(duì)象
var point2 = { x: point.x + 1, y: point.y + 1 }; //屬性值可以是表達(dá)式
var book = {
  "main title": "JavaScript", //屬性名有空格，必須用字符串表示
  "sub-title": "The Defintive Guide", //屬性名有連字符，必須用字符串表示
  "for": "all audiences", //屬性名是保留字，必須用字符串表示
  author: { //這個(gè)屬性的值是一個(gè)對(duì)象
    firstname: "David",
    surname: "Flanagan"
  }

ECMAScript 5版本中，使用保留字屬性名可以不用引號(hào)引起來。對(duì)象直接量最后一個(gè)屬性后的逗號(hào)自動(dòng)忽略。

第二種：通過關(guān)鍵字創(chuàng)建對(duì)象。

關(guān)鍵字new用來創(chuàng)建并初始化對(duì)象，后面跟一個(gè)構(gòu)造函數(shù)。JavaScript語言核心中原始類型都包含內(nèi)置構(gòu)造函數(shù)，下面是內(nèi)置對(duì)象創(chuàng)建演示。

var o = new Object(); //創(chuàng)建一個(gè)空對(duì)象，等價(jià)于 0={}
var a = new Array(); //創(chuàng)建一個(gè)空數(shù)組
var d = new Date(); //創(chuàng)建一個(gè)代表當(dāng)前時(shí)間的Date對(duì)象
var r = new RegExp("js"); //創(chuàng)建一個(gè)正則表達(dá)式對(duì)象

除了這些內(nèi)置構(gòu)造函數(shù)，使用自定義構(gòu)造函數(shù)來初始化新對(duì)象也很常見。

介紹第三種方法之前需要先簡單了解“原型”的概念。每一個(gè)JavaScript對(duì)象（null除外）都有一個(gè)關(guān)聯(lián)對(duì)象，并且可以從關(guān)聯(lián)對(duì)象繼承屬性。這個(gè)關(guān)聯(lián)對(duì)象就是所謂的“原型”，類似于C#中的基類。

所有通過對(duì)象直接量和構(gòu)造函數(shù)創(chuàng)建的對(duì)象都可以通過Object.prototype獲得原型對(duì)象的引用。沒有原型的對(duì)象為數(shù)不多，Object.prototype就是其中之一。

普通對(duì)象都有原型，比如Array數(shù)組對(duì)象的原型是Array.prototype。同時(shí)，內(nèi)置構(gòu)造函數(shù)都具有一個(gè)繼承Object.prototype的原型。因此，通過new Array()創(chuàng)建的數(shù)組對(duì)象的屬性同時(shí)繼承至Array.prototype和Object.prototype，當(dāng)對(duì)象出現(xiàn)多繼承關(guān)系時(shí)，那么這一系列鏈接的原型對(duì)象就被稱作“原型鏈”。

第三種：使用Object.create()函數(shù)創(chuàng)建對(duì)象。

Object.create(Object[,Properties])是ECMAScript 5版本出現(xiàn)的一個(gè)靜態(tài)函數(shù)，用來創(chuàng)建對(duì)象。它接收兩個(gè)參數(shù)：第一個(gè)是要?jiǎng)?chuàng)建對(duì)象的原型；第二個(gè)是可選參數(shù)，用來描述對(duì)象屬性。

使用它創(chuàng)建對(duì)象，只需傳入所需原型對(duì)象即可：

var a = Object.create({ 'isLock': true }); //為對(duì)象a指定一個(gè)原型
console.log(a.isLock); //=> true o繼承原型對(duì)象屬性isLock
console.log(a.hasOwnProperty('isLock')); //=> false 驗(yàn)證isLock并非o的自有屬性

創(chuàng)建一個(gè)普通的空對(duì)象，需要傳入?yún)?shù)Object.prototype：

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

可以通過傳入?yún)?shù)null來創(chuàng)建沒有原型的對(duì)象，該類對(duì)象不會(huì)繼承任何東西：

var b = Object.create(null); //該對(duì)象不包括任何對(duì)象的基礎(chǔ)方法

通過原型創(chuàng)建對(duì)象，可以使任意對(duì)象可繼承，這是一個(gè)強(qiáng)大的特性。比如可以防止程序無意修改不受控制的對(duì)象。程序不直接操作對(duì)象，而是操作通過Object.create()創(chuàng)建的繼承對(duì)象。

2.查詢和設(shè)置屬性

對(duì)象屬性值可以通過點(diǎn).和方括號(hào)[]運(yùn)算符來查詢或設(shè)置。

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創(chuàng)建一個(gè)“edition”屬性
book["main title"] = "ECMAScript"; //4.修改"main title"屬性值

ES3版本中，如果屬性名是關(guān)鍵字必須通過方括號(hào)的形式訪問。ES5版本放寬了要求，可以直接在點(diǎn)運(yùn)算符后面直接使用保留字。

關(guān)聯(lián)數(shù)組對(duì)象

上面提到可以通過object["property"]操作對(duì)象屬性，這種語法看起來更像數(shù)組，只是這個(gè)數(shù)組元素是通過字符串索引而不是數(shù)字索引，這類數(shù)組被稱為關(guān)聯(lián)數(shù)組。JavaScript對(duì)象都是關(guān)聯(lián)數(shù)組，通過[]訪問對(duì)象屬性時(shí)，在程序運(yùn)行時(shí)可以創(chuàng)建或修改它們，更有靈活性。

繼承

JavaScript對(duì)象的屬性分兩種，一種是自己定義的，被稱為“自有屬性”。也有一些屬性是從原型對(duì)象繼承過來的。對(duì)象屬性的多繼承關(guān)系構(gòu)成了原型鏈。

對(duì)象屬性在賦值前會(huì)先檢查原型鏈，以此判斷是否允許賦值操作。例如，如果對(duì)象o繼承自一個(gè)只讀屬性x，那么對(duì)x屬性賦值是不允許的。如果允許屬性賦值，也只是在原始對(duì)象上創(chuàng)建或?qū)σ延械膶傩再x值，而不會(huì)修改原型鏈。
JavaScript中，一般只有在查詢屬性的時(shí)候才能體會(huì)到繼承的存在，而設(shè)置屬性和繼承無關(guān)。通過這個(gè)特性可以有選擇的覆蓋繼承的屬性。

屬性訪問錯(cuò)誤

查詢一個(gè)不存在的屬性不會(huì)報(bào)錯(cuò)。如果在對(duì)象自身屬性和繼承的屬性中沒有找到指定屬性，則返回undefined。通過下面一小段代碼驗(yàn)證下：

var a = { name: 'admin' }; //定義一個(gè)原型對(duì)象a
var b = Object.create(a); //定義一個(gè)對(duì)象b繼承至對(duì)象a
console.log(b.name); //=> admin b繼承a的name屬性，正常輸出
console.log(b.age); //=>undefined b本身和繼承對(duì)象都沒有age屬性，故輸出undefined

但有一種情況：假如對(duì)象不存在，試圖訪問這個(gè)不存在對(duì)象的屬性時(shí)則會(huì)拋異常。例如：

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

所以，這就要求我們?cè)谠L問不確定對(duì)象屬性時(shí)需要驗(yàn)證一下。

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

3.刪除屬性

delete運(yùn)算符可以刪除對(duì)象的屬性，刪除成功返回true。但是delete不能刪除那些可配置型為false的屬性。只能刪除自身屬性，不能刪除繼承屬性。

delete book.author // 返回true

刪除全局屬性時(shí)，可以直接省略全局對(duì)象，delete后面跟上要?jiǎng)h除的屬性即可。

this.x=1; //創(chuàng)建一個(gè)全局屬性
console.log(delete x); //=>true

4.檢測屬性

所謂檢測屬性就是判斷某個(gè)屬性時(shí)候存在與某個(gè)對(duì)象中。一般可以通過in運(yùn)算符、hasOwnProperty()和propertyIsEnumerable()方法來完成驗(yàn)證工作。

in運(yùn)算符判斷，如果對(duì)象自有屬性或繼承屬性包含這個(gè)屬性則返回true。

var o = { "x": 5 };
console.log("x" in o); //=>true 對(duì)象o有屬性x
console.log("y" in o); //=>false 對(duì)象o沒有屬性x
console.log("toString" in o); //=>true 對(duì)象o繼承屬性toString

hasOwnProperty()方法用來檢測給定屬性是否為對(duì)象的自有屬性，對(duì)于繼承屬性返回false。

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

propertyIsEnumerable()方法是hasOwnProperty()的增強(qiáng)版。只有檢測到屬性為對(duì)象的自有屬性并且這個(gè)屬性可枚舉性時(shí)才返回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版本中，對(duì)象可以用get和set關(guān)鍵字定義像C#、Java等高級(jí)語言一樣的保護(hù)屬性。這種屬性被稱為“存取器屬性”，它是可以繼承的。

var obj = {
  //數(shù)據(jù)屬性（可看成字段）
  data: null,
  //存取器屬性（保護(hù)屬性）
  get Data() { return this.data; },
  set Data(value) { this.data = value; }
};
obj.Data = "admin";
console.log(obj.data); //=>admin

怎么樣，有沒有感覺和JAVA中的保護(hù)屬性寫法很像。因?yàn)镴avaScript本身就是一種面向?qū)ο蟮木幊陶Z言。
如果對(duì)象屬性同時(shí)具有g(shù)et和set方法，那么它是一個(gè)可讀/寫的屬性。如果屬性只有一個(gè)get方法，那么它是一個(gè)只讀屬性。如果屬性只有一個(gè)set方法，那么它是一個(gè)只寫屬性，讀取只寫屬性總是返回undefined。

6.屬性的特性

ECMAScript 3版本下對(duì)象的屬性都是否可寫、可配置和可枚舉的，但是到ECMAScript 5版本下是屬性是可以通過一些API來標(biāo)識(shí)是否為可寫、可配置和可枚舉的。這API也就是所謂的屬性的特性。
普通數(shù)據(jù)屬性的4個(gè)特性：value(值)、writable(可寫性)、enumerable(可枚舉性)、configurable(可配置性)。
存儲(chǔ)器屬性的4個(gè)特性：get(讀取)、set(寫入)、enumerable(可枚舉性)、configurable(可配置性)。
ECMAScript 5中定義了一個(gè)Object.getOwnPropertyDescriptor()方法用來查詢對(duì)象特定屬性的特性，返回一個(gè)“屬性描述符”對(duì)象，該對(duì)象就代表對(duì)象屬性的4個(gè)特性。

var descriptor = Object.getOwnPropertyDescriptor({ length: 50 }, "length");
console.log(descriptor); 
//=> descriptor = { value: 50, writable: true, enumerable: true, configurable: true }
//------------------------------------------------------------------
var random = {
  //只讀屬性：返回一個(gè)0-255之間的隨機(jī)數(shù)
  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}

從名字可以看出該方法只能得到對(duì)象自有屬性的描述符，所以對(duì)于繼承屬性和不存在的屬性，返回undefined。要獲得繼承屬性的特性，需要遍歷原型鏈。

要想設(shè)置屬性或讓新創(chuàng)建屬性具有某種特性，則需要調(diào)用Object.defineProperty()方法，第一個(gè)參數(shù)是要修改的對(duì)象；第二個(gè)參數(shù)是要修改的屬性；第三個(gè)是屬性描述符對(duì)象。返回值為修改后的對(duì)象副本。

var o = {};       //創(chuàng)建一個(gè)空對(duì)象
Object.defineProperty(o, "x", {
  value: 1,      //定義一個(gè)x屬性,賦值為1
  writable: true,   //可寫
  enumerable: false, //不可枚舉
  configurable: true //可配置
});
if (o.x) console.log(Object.keys(o)); //=> props = [] 屬性存在，但是不能枚舉
Object.defineProperty(o, "x", { writable: false }); //讓屬性x變?yōu)橹蛔x
o.x = 2; //試圖修改屬性x的值失敗，但不報(bào)錯(cuò)
console.log(o.x); //=>1 
Object.defineProperty(o, "x", { value: 2 }); //但屬性x依然為可配置，可以直接修改value值特性。
console.log(o.x); //=>2
Object.defineProperty(o, "x", { //將數(shù)據(jù)屬性修改為存取器屬性
  get: function () {
    return 0;
  }
});
console.log(o.x); //=>0

該方法同樣不能設(shè)置繼承屬性的特性。如果需要同時(shí)修改多個(gè)自有屬性的特性可以使用Object.defineProperties()方法。第一個(gè)參數(shù)是要修改的對(duì)象；第二參數(shù)是一個(gè)映射表對(duì)象，它包含屬性名稱和對(duì)應(yīng)屬性的描述符對(duì)象。

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.對(duì)象的三個(gè)屬性

原型屬性

對(duì)象的原型是用來繼承屬性的，這個(gè)屬性非常重要，以至于經(jīng)常把“o的原型屬性”直接叫做“o的原型”。
原型屬性是在對(duì)象創(chuàng)建之初就設(shè)置好的。前面已對(duì)原型做過介紹，但這里還是要補(bǔ)充補(bǔ)充。

1. 通過對(duì)象直接量創(chuàng)建的對(duì)象使用Object.prototype作為原型；
2. 通過new關(guān)鍵字創(chuàng)建的對(duì)象使用構(gòu)造函數(shù)的prototype作為原型；
3. 通過Object.create()創(chuàng)建的對(duì)象使用第一個(gè)參數(shù)作為原型。
   

在ES5版本中，將對(duì)象傳入Object.getPrototypeOf()方法可以查詢它的原型對(duì)象。
想要檢測一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型可以使用isPrototypeOf()方法。

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

類屬性

對(duì)象的類屬性是一個(gè)字符串，用來表示對(duì)象的類型信息。但是JS中沒有提供直接查詢方法，只能用一種間接的方法查詢，可以調(diào)用對(duì)象的toString()方法，然后提取返回字符串的第8個(gè)字符至倒數(shù)第二個(gè)位置之間的字符。如果對(duì)象繼承的toString()方法重寫了，這時(shí)必須間接通過Function.call()方法調(diào)用。

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

classof()可以接收任何類型的參數(shù)，并且該函數(shù)包含了對(duì)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"(瀏覽器宿主對(duì)象類)

可擴(kuò)展性

對(duì)象的可擴(kuò)展行用來表示是否可以給對(duì)象添加新屬性。ECMAScript 5版本中，所有自定義對(duì)象、內(nèi)置對(duì)象和宿主對(duì)象默認(rèn)支持可擴(kuò)展性。下面介紹幾個(gè)檢測和設(shè)置對(duì)象可擴(kuò)展性的方法以及它們之間的區(qū)別。

Object.preventExtensions()方法能將傳入對(duì)象設(shè)置為不可擴(kuò)展的。需要注意的兩點(diǎn)是：1.一旦對(duì)象轉(zhuǎn)為不可擴(kuò)展的，就無法再將其轉(zhuǎn)換成可擴(kuò)展的；2.如果給一個(gè)不可擴(kuò)展的對(duì)象的原型添加屬性，這個(gè)不可擴(kuò)展的對(duì)象同樣會(huì)繼承這些新屬性。

Object.isExtensible()方法可以檢測傳入對(duì)象的可擴(kuò)展性。

Object.seal()方法能將傳入對(duì)象設(shè)置為不可擴(kuò)展的，并且將對(duì)象所有自有屬性都設(shè)置為不可配置的。也就是說不能給這個(gè)對(duì)象添加新屬性，而且也不能刪除或配置已有屬性。對(duì)于已經(jīng)密封的對(duì)象同樣不能解封，可以使用Object.isSealed()方法檢測對(duì)象是否封閉。

Object.freeze()方法更“狠”，它會(huì)直接將對(duì)象凍結(jié)。除了將對(duì)象設(shè)置為不可擴(kuò)展和其屬性設(shè)置為不可配置之外，還將對(duì)象自有屬性的所有數(shù)據(jù)屬性設(shè)置為只讀屬性。可以使用Object.isFrozen()方法檢測對(duì)象是否被凍結(jié)。
Object.preventExtensions()、Object.seal()和Object.freeze()三個(gè)方法都返回傳入的對(duì)象。

8.序列化對(duì)象

相信大家對(duì)JSON都不陌生，其實(shí)該小節(jié)就是介紹JSON序列化。所謂序列化就是JS對(duì)象和字符串之間的互相轉(zhuǎn)換，JSON作為數(shù)據(jù)交換格式。ECMAScript 5 中提供兩個(gè)內(nèi)置函數(shù)JSON.stringify()和JSON.parse()用來序列化和還原JS對(duì)象。

var obj = { x: 3, y: 5 };   //定義一個(gè)測試對(duì)象
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對(duì)象表示法。JSON的語法并不能表示JavaScript里所有的所有值。支持序列化和還原的有對(duì)象、NaN、數(shù)組、字符串、無窮大數(shù)字、true\false和null。函數(shù)、RegExp、Error對(duì)象和undefined值不能序列化和還原。JSON.stringify()函數(shù)只能序列化對(duì)象可枚舉的自有屬性。日期對(duì)象序列化的結(jié)果是ISO格式的日期字符串。

9..參考與擴(kuò)展

本篇內(nèi)容源自我對(duì)《JavaScript權(quán)威指南》第6章-對(duì)象 章節(jié)的閱讀總結(jié)和代碼實(shí)踐?？偨Y(jié)的比較粗糙，你也可通過原著或MDN更深入了解對(duì)象。

[1] David Flanagan，JavaScript權(quán)威指南(第6版)
[2] MDN，JavaScript 參考文檔 - Array - JavaScript | MDN

感謝閱讀此文，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論