詳解Javascript中的Object對(duì)象

更新時(shí)間：2016年02月28日 19:59:13 投稿：mdxy-dxy

這篇文章主要介紹了詳解Javascript中的Object對(duì)象,需要的朋友可以參考下

Object是在javascript中一個(gè)被我們經(jīng)常使用的類型，而且JS中的所有對(duì)象都是繼承自O(shè)bject對(duì)象的。雖說我們平時(shí)只是簡(jiǎn)單地使用了Object對(duì)象來存儲(chǔ)數(shù)據(jù)，并沒有使用到太多其他功能，但是Object對(duì)象其實(shí)包含了很多很有用的屬性和方法，尤其是ES5增加的方法，因此，本文將從最基本的介紹開始，詳細(xì)說明了Object的常用方法和應(yīng)用。

基礎(chǔ)介紹

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

首先我們都知道，對(duì)象就是一組相似數(shù)據(jù)和功能的集合，我們就是用它來模擬我們現(xiàn)實(shí)世界中的對(duì)象的。那在Javascript中，創(chuàng)建對(duì)象的方式通常有兩種方式：構(gòu)造函數(shù)和對(duì)象字面量。

new構(gòu)造函數(shù)法

var person = new Object();
person.name = "狼狼的藍(lán)胖子";
person.age = 25;

這種方式使用new關(guān)鍵字，接著跟上Object構(gòu)造函數(shù)，再來給對(duì)象實(shí)例動(dòng)態(tài)添加上不同的屬性。這種方式相對(duì)來說比較繁瑣，一般推薦使用對(duì)象字面量來創(chuàng)建對(duì)象。

對(duì)象字面量

對(duì)象字面量很好理解，使用key/value的形式直接創(chuàng)建對(duì)象，簡(jiǎn)潔方便。

var person = {
  name: “狼狼的藍(lán)胖子”,
  age: 25
};

這種方式直接通過花括號(hào)將對(duì)象的屬性包起來，使用key/value的方式創(chuàng)建對(duì)象屬性，每個(gè)屬性之間用逗號(hào)隔開。
注意：如果是最后一個(gè)屬性，后面就不要加逗號(hào)，因?yàn)樵谝恍┡f的瀏覽器下會(huì)報(bào)錯(cuò)。

對(duì)象實(shí)例的屬性和方法

不管通過哪種方式創(chuàng)建了對(duì)象實(shí)例后，該實(shí)例都會(huì)擁有下面的屬性和方法，下面將會(huì)一一說明。

constructor屬性

constructor屬性是保存當(dāng)前對(duì)象的構(gòu)造函數(shù)，前面的例子中，constructor保存的就是Object方法。

var obj1 = new Object();
obj1.id = "obj1";
var obj2 = {
  "id": "obj2"
};
 
console.log(obj1.constructor);//function Object(){}
console.log(obj2.constructor);//function Object(){}

hasOwnProperty(propertyName)方法

hasOwnProperty方法接收一個(gè)字符串參數(shù)，該參數(shù)表示屬性名稱，用來判斷該屬性是否在當(dāng)前對(duì)象實(shí)例中，而不是在對(duì)象的原型鏈中。我們來看看下面這個(gè)例子：

var arr = [];    
console.log(arr.hasOwnProperty("length"));//true
console.log(arr.hasOwnProperty("hasOwnProperty"));//false

在這個(gè)例子中，首先通過定義了一個(gè)數(shù)組對(duì)象的實(shí)例arr，我們知道數(shù)組對(duì)象實(shí)際是通過原型鏈繼承了Object對(duì)象，然后擁有自己的一些屬性，我們通過hasOwnProperty方法判斷l(xiāng)ength是arr自己的屬性，而hasOwnProperty是在原型鏈上的屬性。
hasOwnProperty方法可以和for..in結(jié)合起來獲取對(duì)象自己的key。

isPrototypeOf(Object)方法

isPrototype方法接收一個(gè)對(duì)象，用來判斷當(dāng)前對(duì)象是否在傳入的參數(shù)對(duì)象的原型鏈上，說起來有點(diǎn)抽象，我們來看看代碼。

function MyObject() {}
var obj = new MyObject();
console.log(Object.prototype.isPrototypeOf(obj));

我們知道MyObject是繼承自O(shè)bject對(duì)象的，而在JS中，繼承是通過prototype來實(shí)現(xiàn)的，所以O(shè)bject的prototype必定在MyObject對(duì)象實(shí)例的原型鏈上。

propertyIsEnumerable(prototypeName)方法

prototypeIsEnumerable用來判斷給定的屬性是否可以被for..in語(yǔ)句給枚舉出來?？聪旅娲a：

var obj = {
name: "objName"
} 
for (var i in obj) {
console.log(i);
}

執(zhí)行這段代碼輸出字符串“name”，這就說明通過for…in語(yǔ)句可以得到obj的name這個(gè)屬性，但是我們知道，obj的屬性還有很多，比如constructor，比如hasOwnPrototype等等，但是它們沒有被輸出，說明這些屬性不能被for…in給枚舉出來，可以通過propertyIsEnumerable方法來得到。

復(fù)制代碼代碼如下:

console.log(obj.propertyIsEnumerable("constructor"));//false

判斷“constructor”是否可以被枚舉，輸出false說明無(wú)法被枚舉出來。

toLocaleString()方法

toLocalString方法返回對(duì)象的字符串表示，和代碼的執(zhí)行環(huán)境有關(guān)。

var obj = {};
console.log(obj.toLocaleString());//[object Object] 

var date = new Date();
console.log(date.toLocaleString());//2016/2/28 下午1:39:27

toString()方法

toString用來返回對(duì)象的字符串表示。

var obj = {};
console.log(obj.toString());//[object Object]
    
var date = new Date();
console.log(date.toString());//Sun Feb 28 2016 13:40:36 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

valueOf()方法

valueOf方法返回對(duì)象的原始值，可能是字符串、數(shù)值或bool值等，看具體的對(duì)象。

var obj = {
  name: "obj"
};
console.log(obj.valueOf());//Object {name: "obj"}

var arr = [1];
console.log(arr.valueOf());//[1]

var date = new Date();
console.log(date.valueOf());//1456638436303

如代碼所示，三個(gè)不同的對(duì)象實(shí)例調(diào)用valueOf返回不同的數(shù)據(jù)。

屬性的類型

在Javascript中，屬性有兩種類型，分別是數(shù)據(jù)屬性和訪問器屬性，我們來看看這兩種屬性具體是什么東西。

數(shù)據(jù)屬性

數(shù)據(jù)屬性我們可以理解為我們平時(shí)定義對(duì)象時(shí)賦予的屬性，它可以進(jìn)行讀和寫。但是，ES5中定義了一些特性，這些特性是用來描述屬性的各種特征，特性是內(nèi)部值，不能直接訪問到。特性通過用兩對(duì)方括號(hào)表示，比如[[Enumerable]]。屬性的特性會(huì)有一些默認(rèn)值，要修改特性的默認(rèn)值，必須使用ES5定義的新方法Object.defineProperty方法來修改。
數(shù)據(jù)屬性有4個(gè)描述其特征的特性，下面將依次說明每一個(gè)特性：
（1）[[Configurable]]：該特性表示是否可以通過delete操作符來刪除屬性，默認(rèn)值是true。

var obj = {};
obj.name = "myname";
    
delete obj.name;
console.log(obj.name);//undefined

這段代碼很明顯，通過delete刪除了obj的name屬性后，我們?cè)僭L問name屬性就訪問不到了。
我們通過Object.defineProperty方法來修改[[Configurable]]特性。

var obj = {};
obj.name = "myname";
Object.defineProperty(obj, "name", {
  configurable: false
})        

delete obj.name;
console.log(obj.name);//myname

通過將configurable特性設(shè)置成false之后，delete就無(wú)法刪除name屬性了，如果在嚴(yán)格模式下，使用delete去刪除就會(huì)報(bào)錯(cuò)。

（2）[[Enumerable]]：表示是否能夠通過for…in語(yǔ)句來枚舉出屬性，默認(rèn)是true
我們來看看前面的例子：

var obj = {
  name: "objName"
} 
for (var i in obj) {
  console.log(i);//name
}

這段代碼只輸出了name屬性，我們來將constructor屬性的[[Enumerable]]設(shè)置為true試試。

var obj = {
    name: "objName"
}
Object.defineProperty(obj, "constructor", {
  enumerable: true
})

for (var i in obj) {
  console.log(i);//name,constructor
}
console.log(obj.propertyIsEnumerable("constructor"));//true

這段代碼中，for…in循環(huán)得到了name和constructor兩個(gè)屬性，而通過propertyIsEnumerable方法來判斷constructor也返回了true。

（3）[[Writable]]：表示屬性值是否可以修改，默認(rèn)為true
如果[[Writable]]被設(shè)置成false，嘗試修改時(shí)將沒有效果，在嚴(yán)格模式下會(huì)報(bào)錯(cuò)

（4）[[Value]]：表示屬性的值，默認(rèn)為undefined

我們通過一個(gè)簡(jiǎn)單的例子來看看這兩個(gè)特性：

var obj = {
  name: "name"
};
console.log(obj.name);//name    

Object.defineProperty(obj, "name", {
  value: "newValue",
  writable: false
})
console.log(obj.name);//newValue

obj.name = "oldValue";
console.log(obj.name);//newValue

我們首先定義了obj對(duì)象的name屬性值為“name”，然后通過defineProperty方法來修改值，并且將其設(shè)置為不可修改的。接著我們?cè)傩薷膎ame屬性的值，可以發(fā)現(xiàn)修改無(wú)效。
如果我們通過defineProperty來修改name屬性的值，是否可以修改呢？答案是可以的：

Object.defineProperty(obj, "name", {
  value: "oldValue"
})
console.log(obj.name); //oldValue

訪問器屬性

訪問器屬性有點(diǎn)類似于C#中的屬性，和數(shù)據(jù)屬性的區(qū)別在于，它沒有數(shù)據(jù)屬性的[[Writable]]和[[Value]]兩個(gè)特性，而是擁有一對(duì)getter和setter函數(shù)。
[[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)，默認(rèn)是undefined
[[Set]]：設(shè)置屬性時(shí)調(diào)用的函數(shù)，默認(rèn)是undefined
getter和setter是一個(gè)很有用的東西，假設(shè)有兩個(gè)屬性，其中第二個(gè)屬性值會(huì)隨著第一個(gè)屬性值的變化而變化。這種場(chǎng)景在我們平時(shí)的編碼中起始是非常常見的。在之前的做法中，我們往往要去手動(dòng)修改第二個(gè)屬性的值，那現(xiàn)在我們就可以通過get和set函數(shù)來解決這個(gè)問題?？聪旅孢@個(gè)例子：

var person = {
  age: 10
}

Object.defineProperty(person, "type", {
  get: function () {
    if (person.age > 17) {
      return "成人";
    }
    return "小孩";
  }
})

console.log(person.type);//小孩

person.age = 18;
console.log(person.type);//成人

通過修改age的值，type的值也會(huì)相應(yīng)的修改，這樣我們就不用再手動(dòng)的去修改type的值了。
下面這種方式也是可以實(shí)現(xiàn)同樣的效果：

var person = {
  _age: 10,
  type: "小孩"
} 

Object.defineProperty(person, "age", {
  get: function () {
    return this._age;
  },
  set: function (newValue) {
    this._age = newValue;
    this.type = newValue > 17 ? "成人" : "小孩";
  }
})
console.log(person.type);

person.age = 18;
console.log(person.type);

關(guān)于訪問器屬性，有幾點(diǎn)要注意：
1、嚴(yán)格模式下，必須同時(shí)設(shè)置get和set
2、非嚴(yán)格模式下，可以只設(shè)置其中一個(gè)，如果只設(shè)置get，則屬性是只讀的，如果只設(shè)置set，屬性則無(wú)法讀取
3、Object.defineProperty是ES5中的新方法，IE9（IE8部分實(shí)現(xiàn)，只有dom對(duì)象才支持）以下瀏覽器不支持，一些舊的瀏覽器可以通過非標(biāo)準(zhǔn)方法defineGetter()和defineSetter()來設(shè)置，這里就不說明了，有興趣的同學(xué)可以查找相關(guān)資料。

特性操作的相關(guān)方法

ES5提供了一些讀取或操作屬性特性的方法，前面用到的Object.defineProperty就是其中之一。我總結(jié)了一些比較常用的方法如下：

（1）Object.defineProperty
定義一個(gè)對(duì)象的屬性，這個(gè)方法前面我們已經(jīng)用到多次，簡(jiǎn)單說說其用法。

復(fù)制代碼代碼如下:

Object.defineProperty(obj,propName,descriptor);

defineProperty有點(diǎn)類似于定于在Object上的靜態(tài)方法，通過Object直接調(diào)用，它接收3個(gè)參數(shù)：
obj：需要定義屬性的對(duì)象
propNane：需要被定義的屬性名稱
defineProperty：屬性描述符，包含一些屬性的特性定義
例子如下：

var obj = {};
Object.defineProperty(obj, "name", {
  value: "name",
  configurable: true,
  writable: true,
  enumerable: true
});

（2）Object.defineProperties
和defineProperty類似，是用來定義對(duì)象屬性的，不同的是它可以用來同時(shí)定義多個(gè)屬性，我們通過命名也可以看出來，用法如下：

var obj = {};
Object.defineProperty(obj, {
  "name": {
    value: "name",
    configurable: true,
    writable: true,
    enumerable: true
  },
  "age": {
    value: 20 
  }
});

（3）Object.getOwnPropertyDescriptor
ES5中還提供了一個(gè)讀取特性值的方法，該方法接收對(duì)象及其屬性名作為兩個(gè)參數(shù)，返回一個(gè)對(duì)象，根據(jù)屬性類型的不同，返回對(duì)象會(huì)包含不同的值。

var person = {
  _age: 10,
  type: "小孩"
}
Object.defineProperty(person, "age", {
  get: function () {
    return this._age;
  },
  set: function (newValue) {
    this._age = newValue;
    this.type = newValue > 17 ? "成人" : "小孩";
  }
})

console.log(Object.getOwnPropertyDescriptor(person, "type"));//Object {value: "成人", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(person, "age")); //Object {enumerable: false, configurable: false, get: function(),set: function ()}

Object的方法

在ES5中，Object對(duì)象上新增了一批方法，這些方法可以直接通過Object進(jìn)行訪問，前面用到的defineProperty就是新增的方法之一。除此之外還有很多方法，我將其總結(jié)歸納如下：

對(duì)象創(chuàng)建型方法

Object.create(proto, [propertiesObject])

在前面我們提到，創(chuàng)建一個(gè)對(duì)象有兩種方法：構(gòu)造函數(shù)和對(duì)象字面量。
這兩種方法有一個(gè)缺點(diǎn)就是：如果要?jiǎng)?chuàng)建多個(gè)對(duì)象，寫起來很繁瑣，所以后來就有了一種創(chuàng)建自定義構(gòu)造函數(shù)的方法來創(chuàng)建對(duì)象，如下所示：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var person = new Person("Jack", 15);

這種方式可以很方便的創(chuàng)建多個(gè)同樣的對(duì)象，也是目前比較常用的方法。

ES5提供的Object.create方法也是一個(gè)創(chuàng)建對(duì)象的方法，這個(gè)方法允許為創(chuàng)建的對(duì)象選擇原型對(duì)象，不需要定義一個(gè)構(gòu)造函數(shù)。用法如下：

var obj = Object.create(Object.prototype, { 
  name: {
    value: "Jack"
  }
})
console.log(obj.name);//Jack

這個(gè)方法接收的第一個(gè)參數(shù)作為被創(chuàng)建對(duì)象的原型，第二個(gè)參數(shù)是對(duì)象的屬性。注意：在這個(gè)例子中，name屬性是無(wú)法被修改的，因?yàn)樗鼪]有設(shè)置writable特性，默認(rèn)則為false。
個(gè)人看法：Object.create這種創(chuàng)建對(duì)象的方式略顯繁瑣，除非是需要修改屬性的特性，否則不建議使用這種方式創(chuàng)建對(duì)象。

屬性獲取型方法

Object.keys

Object.keys是用來獲取給定對(duì)象的所有可枚舉的自身屬性的屬性名，它返回一個(gè)數(shù)組。

function Parent() {
  this.lastName = "Black"
}
function Child(firstName) {
  this.firstName = firstName;
}
Child.prototype = new Parent();

var son = new Child("Jack");
console.log(Object.keys(son));//["firstName"]

代碼中返回了firstName，并沒有返回從prototype繼承而來的lastName和不可枚舉的相關(guān)屬性。
在一些舊的瀏覽器中，我們可以使用hasOwnProperty和for…in來達(dá)到類似的效果。

Object.keys = Object.keys ||
  function (obj) {
    var keys = [];
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        keys.push(key);
      }
    }
    return keys;
  }
Object.getOwnPropertyNames()

getOwnPropertyNames用來獲取對(duì)象自身的所有屬性，包括可枚舉和不可枚舉的所有屬性，如下所示：

function Parent() {
  this.lastName = "Black"
}
function Child(firstName) {
  this.firstName = firstName;
}
Child.prototype = new Parent();

var son = new Child("Jack");
Object.defineProperty(son, "age", {
  enumerable: false
})
console.log(Object.keys(son));//["firstName"] 
console.log(Object.getOwnPropertyNames(son));//["firstName", "age"]

我們定義給son對(duì)象定義了一個(gè)不可枚舉的屬性age，然后通過keys和getOwnPropertyNames兩個(gè)方法來獲取屬性列表，能明顯看出了兩者區(qū)別。

屬性特性型方法

這個(gè)主要是前面提到的三個(gè)方法：defineProperty，defineProperties和getOwnPropertyDescriptor三個(gè)方法

對(duì)象限制型方法

ES5中提供了一系列限制對(duì)象被修改的方法，用來防止被某些對(duì)象被無(wú)意間修改導(dǎo)致的錯(cuò)誤。每種限制類型包含一個(gè)判斷方法和一個(gè)設(shè)置方法。

阻止對(duì)象擴(kuò)展

Object.preventExtensions()用來限制對(duì)象的擴(kuò)展，設(shè)置之后，對(duì)象將無(wú)法添加新屬性，用法如下：

復(fù)制代碼代碼如下:

Object.preventExtensions(obj);

該方法接收一個(gè)要被設(shè)置成無(wú)法擴(kuò)展的對(duì)象作為參數(shù)，需要注意兩點(diǎn)：
1、對(duì)象的屬性不可用擴(kuò)展，但是已存在的屬性可以被刪除
2、無(wú)法添加新屬性指的是無(wú)法在自身上添加屬性，如果是在對(duì)象的原型上，還是可以添加屬性的。

function Person(name) {
  this.name = name;
}
var person = new Person("Jack");
Object.preventExtensions(person);

delete person.name;
console.log(person.name);//undefined

Person.prototype.age = 15;
console.log(person.age);//15

Object.isExtensible方法用來判斷一個(gè)對(duì)象是否可擴(kuò)展，默認(rèn)情況是true

將對(duì)象密封

Object.seal可以密封一個(gè)對(duì)象并返回被密封的對(duì)象。
密封對(duì)象無(wú)法添加或刪除已有屬性，也無(wú)法修改屬性的enumerable，writable，configurable，但是可以修改屬性值。

function Person(name) {
  this.name = name;
}
var person = new Person("Jack");
Object.seal(person);
delete person.name;
console.log(person.name);//Jack

將對(duì)象密封后，使用delete刪除對(duì)象屬性，還是可以訪問得到屬性。

通過Object.isSealed可以用來判斷一個(gè)對(duì)象是否被密封了。

凍結(jié)對(duì)象

Object.freeze方法用來凍結(jié)一個(gè)對(duì)象，被凍結(jié)的對(duì)象將無(wú)法添加，修改，刪除屬性值，也無(wú)法修改屬性的特性值，即這個(gè)對(duì)象無(wú)法被修改。

function Person(name) {
  this.name = name;
}
var person = new Person("Jack");
Object.freeze(person);

delete person.name;
console.log(person.name);//Jack

Person.prototype.age = 15;
console.log(person.age);//15

分析上面的代碼我們可以發(fā)現(xiàn)，被凍結(jié)的對(duì)象無(wú)法刪除自身的屬性，但是通過其原型對(duì)象還是可以新增屬性的。

通過Object.isFrozen可以用來判斷一個(gè)對(duì)象是否被凍結(jié)了。

可以發(fā)現(xiàn)：這三個(gè)限制對(duì)象的方法的限制程度是依次上升的。

總結(jié)

Object雖說是一個(gè)我們平時(shí)開發(fā)中最經(jīng)常用到的對(duì)象，但是它的很多功能還沒有被我們挖掘出來。本文首先介紹了Object的基本使用，接著介紹了一些比較少使用到的屬性特性，最后分析了一些比較常用的方法，尤其是ES5中提供的新方法。歡迎大家交流??！

本文地址：http://luopq.com/2016/02/28/Object-in-Javascript/，轉(zhuǎn)載請(qǐng)注明

您可能感興趣的文章: