Object是在javascript中一個被我們經常使用的類型,而且JS中的所有對象都是繼承自Object對象的。雖說我們平時只是簡單地使用了Object對象來存儲數據,並沒有使用到太多其他功能,但是Object對象其實包含了很多很有用的屬性和方法,尤其是ES5增加的方法,因此,本文將從最基本的介紹開始,詳細說明了Object的常用方法和應用。
首先我們都知道,對象就是一組相似數據和功能的集合,我們就是用它來模擬我們現實世界中的對象的。那在Javascript中,創建對象的方式通常有兩種方式:構造函數和對象字面量。
var person = new Object(); person.name = "狼狼的藍胖子"; person.age = 25;
這種方式使用new關鍵字,接著跟上Object構造函數,再來給對象實例動態添加上不同的屬性。這種方式相對來說比較繁瑣,一般推薦使用對象字面量來創建對象。
對象字面量很好理解,使用key/value的形式直接創建對象,簡潔方便。
var person = { name: “狼狼的藍胖子”, age: 25 };
這種方式直接通過花括號將對象的屬性包起來,使用key/value的方式創建對象屬性,每個屬性之間用逗號隔開。
注意:如果是最後一個屬性,後面就不要加逗號,因為在一些舊的浏覽器下會報錯。
不管通過哪種方式創建了對象實例後,該實例都會擁有下面的屬性和方法,下面將會一一說明。
constructor屬性是保存當前對象的構造函數,前面的例子中,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方法接收一個字符串參數,該參數表示屬性名稱,用來判斷該屬性是否在當前對象實例中,而不是在對象的原型鏈中。我們來看看下面這個例子:
var arr = []; console.log(arr.hasOwnProperty("length"));//true console.log(arr.hasOwnProperty("hasOwnProperty"));//false
在這個例子中,首先通過定義了一個數組對象的實例arr,我們知道數組對象實際是通過原型鏈繼承了Object對象,然後擁有自己的一些屬性,我們通過hasOwnProperty方法判斷length是arr自己的屬性,而hasOwnProperty是在原型鏈上的屬性。
hasOwnProperty方法可以和for..in結合起來獲取對象自己的key。
isPrototype方法接收一個對象,用來判斷當前對象是否在傳入的參數對象的原型鏈上,說起來有點抽象,我們來看看代碼。
function MyObject() {} var obj = new MyObject(); console.log(Object.prototype.isPrototypeOf(obj));
我們知道MyObject是繼承自Object對象的,而在JS中,繼承是通過prototype來實現的,所以Object的prototype必定在MyObject對象實例的原型鏈上。
prototypeIsEnumerable用來判斷給定的屬性是否可以被for..in語句給枚舉出來。看下面代碼:
var obj = { name: "objName" } for (var i in obj) { console.log(i); }
執行這段代碼輸出字符串“name”,這就說明通過for…in語句可以得到obj的name這個屬性,但是我們知道,obj的屬性還有很多,比如constructor,比如hasOwnPrototype等等,但是它們沒有被輸出,說明這些屬性不能被for…in給枚舉出來,可以通過propertyIsEnumerable方法來得到。
console.log(obj.propertyIsEnumerable("constructor"));//false
判斷“constructor”是否可以被枚舉,輸出false說明無法被枚舉出來。
toLocalString方法返回對象的字符串表示,和代碼的執行環境有關。
var obj = {}; console.log(obj.toLocaleString());//[object Object] var date = new Date(); console.log(date.toLocaleString());//2016/2/28 下午1:39:27
toString用來返回對象的字符串表示。
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 (中國標准時間)
valueOf方法返回對象的原始值,可能是字符串、數值或bool值等,看具體的對象。
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
如代碼所示,三個不同的對象實例調用valueOf返回不同的數據。
在Javascript中,屬性有兩種類型,分別是數據屬性和訪問器屬性,我們來看看這兩種屬性具體是什麼東西。
數據屬性我們可以理解為我們平時定義對象時賦予的屬性,它可以進行讀和寫。但是,ES5中定義了一些特性,這些特性是用來描述屬性的各種特征,特性是內部值,不能直接訪問到。特性通過用兩對方括號表示,比如[[Enumerable]]。屬性的特性會有一些默認值,要修改特性的默認值,必須使用ES5定義的新方法Object.defineProperty方法來修改。
數據屬性有4個描述其特征的特性,下面將依次說明每一個特性:
(1)[[Configurable]]:該特性表示是否可以通過delete操作符來刪除屬性,默認值是true。
var obj = {}; obj.name = "myname"; delete obj.name; console.log(obj.name);//undefined
這段代碼很明顯,通過delete刪除了obj的name屬性後,我們再訪問name屬性就訪問不到了。
我們通過Object.defineProperty方法來修改[[Configurable]]特性。
var obj = {}; obj.name = "myname"; Object.defineProperty(obj, "name", { configurable: false }) delete obj.name; console.log(obj.name);//myname
通過將configurable特性設置成false之後,delete就無法刪除name屬性了,如果在嚴格模式下,使用delete去刪除就會報錯。
(2)[[Enumerable]]:表示是否能夠通過for…in語句來枚舉出屬性,默認是true
我們來看看前面的例子:
var obj = { name: "objName" } for (var i in obj) { console.log(i);//name }
這段代碼只輸出了name屬性,我們來將constructor屬性的[[Enumerable]]設置為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循環得到了name和constructor兩個屬性,而通過propertyIsEnumerable方法來判斷constructor也返回了true。
(3)[[Writable]]:表示屬性值是否可以修改,默認為true
如果[[Writable]]被設置成false,嘗試修改時將沒有效果,在嚴格模式下會報錯
(4)[[Value]]:表示屬性的值,默認為undefined
我們通過一個簡單的例子來看看這兩個特性:
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對象的name屬性值為“name”,然後通過defineProperty方法來修改值,並且將其設置為不可修改的。接著我們再修改name屬性的值,可以發現修改無效。
如果我們通過defineProperty來修改name屬性的值,是否可以修改呢?答案是可以的:
Object.defineProperty(obj, "name", { value: "oldValue" }) console.log(obj.name); //oldValue
訪問器屬性有點類似於C#中的屬性,和數據屬性的區別在於,它沒有數據屬性的[[Writable]]和[[Value]]兩個特性,而是擁有一對getter和setter函數。
[[Get]]:讀取屬性時調用的函數,默認是undefined
[[Set]]:設置屬性時調用的函數,默認是undefined
getter和setter是一個很有用的東西,假設有兩個屬性,其中第二個屬性值會隨著第一個屬性值的變化而變化。這種場景在我們平時的編碼中起始是非常常見的。在之前的做法中,我們往往要去手動修改第二個屬性的值,那現在我們就可以通過get和set函數來解決這個問題。看下面這個例子:
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的值也會相應的修改,這樣我們就不用再手動的去修改type的值了。
下面這種方式也是可以實現同樣的效果:
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);
關於訪問器屬性,有幾點要注意:
1、嚴格模式下,必須同時設置get和set
2、非嚴格模式下,可以只設置其中一個,如果只設置get,則屬性是只讀的,如果只設置set,屬性則無法讀取
3、Object.defineProperty是ES5中的新方法,IE9(IE8部分實現,只有dom對象才支持)以下浏覽器不支持,一些舊的浏覽器可以通過非標准方法defineGetter()和defineSetter()來設置,這裡就不說明了,有興趣的同學可以查找相關資料。
ES5提供了一些讀取或操作屬性特性的方法,前面用到的Object.defineProperty就是其中之一。我總結了一些比較常用的方法如下:
(1)Object.defineProperty
定義一個對象的屬性,這個方法前面我們已經用到多次,簡單說說其用法。
Object.defineProperty(obj,propName,descriptor);
defineProperty有點類似於定於在Object上的靜態方法,通過Object直接調用,它接收3個參數:
obj:需要定義屬性的對象
propNane:需要被定義的屬性名稱
defineProperty:屬性描述符,包含一些屬性的特性定義
例子如下:
var obj = {}; Object.defineProperty(obj, "name", { value: "name", configurable: true, writable: true, enumerable: true });
(2)Object.defineProperties
和defineProperty類似,是用來定義對象屬性的,不同的是它可以用來同時定義多個屬性,我們通過命名也可以看出來,用法如下:
var obj = {}; Object.defineProperty(obj, { "name": { value: "name", configurable: true, writable: true, enumerable: true }, "age": { value: 20 } });
(3)Object.getOwnPropertyDescriptor
ES5中還提供了一個讀取特性值的方法,該方法接收對象及其屬性名作為兩個參數,返回一個對象,根據屬性類型的不同,返回對象會包含不同的值。
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 ()}
在ES5中,Object對象上新增了一批方法,這些方法可以直接通過Object進行訪問,前面用到的defineProperty就是新增的方法之一。除此之外還有很多方法,我將其總結歸納如下:
在前面我們提到,創建一個對象有兩種方法:構造函數和對象字面量。
這兩種方法有一個缺點就是:如果要創建多個對象,寫起來很繁瑣,所以後來就有了一種創建自定義構造函數的方法來創建對象,如下所示:
function Person(name, age) { this.name = name; this.age = age; } var person = new Person("Jack", 15);
這種方式可以很方便的創建多個同樣的對象,也是目前比較常用的方法。
ES5提供的Object.create方法也是一個創建對象的方法,這個方法允許為創建的對象選擇原型對象,不需要定義一個構造函數。用法如下:
var obj = Object.create(Object.prototype, { name: { value: "Jack" } }) console.log(obj.name);//Jack
這個方法接收的第一個參數作為被創建對象的原型,第二個參數是對象的屬性。注意:在這個例子中,name屬性是無法被修改的,因為它沒有設置writable特性,默認則為false。
個人看法:Object.create這種創建對象的方式略顯繁瑣,除非是需要修改屬性的特性,否則不建議使用這種方式創建對象。
Object.keys是用來獲取給定對象的所有可枚舉的自身屬性的屬性名,它返回一個數組。
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和不可枚舉的相關屬性。
在一些舊的浏覽器中,我們可以使用hasOwnProperty和for…in來達到類似的效果。
Object.keys = Object.keys || function (obj) { var keys = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { keys.push(key); } } return keys; }
getOwnPropertyNames用來獲取對象自身的所有屬性,包括可枚舉和不可枚舉的所有屬性,如下所示:
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對象定義了一個不可枚舉的屬性age,然後通過keys和getOwnPropertyNames兩個方法來獲取屬性列表,能明顯看出了兩者區別。
這個主要是前面提到的三個方法:defineProperty,defineProperties和getOwnPropertyDescriptor三個方法
ES5中提供了一系列限制對象被修改的方法,用來防止被某些對象被無意間修改導致的錯誤。每種限制類型包含一個判斷方法和一個設置方法。
Object.preventExtensions()用來限制對象的擴展,設置之後,對象將無法添加新屬性,用法如下:
Object.preventExtensions(obj);
該方法接收一個要被設置成無法擴展的對象作為參數,需要注意兩點:
1、對象的屬性不可用擴展,但是已存在的屬性可以被刪除
2、無法添加新屬性指的是無法在自身上添加屬性,如果是在對象的原型上,還是可以添加屬性的。
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方法用來判斷一個對象是否可擴展,默認情況是true
Object.seal可以密封一個對象並返回被密封的對象。
密封對象無法添加或刪除已有屬性,也無法修改屬性的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
將對象密封後,使用delete刪除對象屬性,還是可以訪問得到屬性。
通過Object.isSealed可以用來判斷一個對象是否被密封了。
Object.freeze方法用來凍結一個對象,被凍結的對象將無法添加,修改,刪除屬性值,也無法修改屬性的特性值,即這個對象無法被修改。
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
分析上面的代碼我們可以發現,被凍結的對象無法刪除自身的屬性,但是通過其原型對象還是可以新增屬性的。
通過Object.isFrozen可以用來判斷一個對象是否被凍結了。
可以發現:這三個限制對象的方法的限制程度是依次上升的。
Object雖說是一個我們平時開發中最經常用到的對象,但是它的很多功能還沒有被我們挖掘出來。本文首先介紹了Object的基本使用,接著介紹了一些比較少使用到的屬性特性,最後分析了一些比較常用的方法,尤其是ES5中提供的新方法。歡迎大家交流!!