在JavaScript中,萬物皆來自對象,但是對Object()這個對象的構造函數(shù)卻一知半解,所以借這個機會來縷清楚Object的方法,并提供低版本的瀏覽器中兼容方法。
//從chrome瀏覽器中的控制臺輸入Object.getOwnPropertyNames(Object),就能夠得到Object對象所有自身屬性和方法。
Array ["length", "name", "arguments", "caller", "prototype", "assign", "getOwnPropertyDescriptor",
"getOwnPropertyDescriptors", "getOwnPropertyNames", "getOwnPropertySymbols", "is", "preventExtensions", "seal",
"create", "defineProperties", "defineProperty", "freeze", "getPrototypeOf", "setPrototypeOf", "isExtensible",
"isFrozen", "isSealed", "keys", "entries", "values"]
//從輸出臺中我們可以知道Object共有25個屬性和方法,當然由于瀏覽器的兼容性問題,在Firefox瀏覽器中輸入,得到如下
Array [ "assign", "getPrototypeOf", "setPrototypeOf", "getOwnPropertyDescriptor", "getOwnPropertyDescriptors",
"keys", "values", "entries", "is", "defineProperty","defineProperties","creat","getOwnPropertyNames",
"getOwnPropertySymbols","preventExtensions", "seal","isFrozen", "isSealed","prototype","length","name",
"freeze","isExtensible"]
//所以為了最大限度的得到Object中的方法,我將以chrome版本得到的數(shù)據(jù)為基準,對Object的方法進行解析,一些還處于試驗
//狀態(tài)也會提到。
Object.assign()
Object.assign(target,source) 中將sources對象中所有可枚舉的屬性的值復制到目標的對象中,其會返回目標對象。該方法的兼容性不是很好,IE全面淪陷,在移動端方面,僅有少數(shù)的瀏覽器才兼容該方法。幸好的是在MDN上提供了兼容的方法。
if(typeof Object.assign!='function'){
Object.assign = function(target){
'use strict';
if(target = null){
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for(var index=0;index<arguments.length;index++){
var source = arguments[index];
if(source!=null){
for(var key in source){
if(Object.prototype.hasOwnProperty.call(source,key)){
target[key] = source[key];
}
}
}
}
return target;
}
}
其實如果我們仔細觀看源碼的時候就會發(fā)現(xiàn)一個事實,那就是Object.assign()只是對一級屬性進行復制,而不會對對象里面的對象進行深度拷貝,如果出現(xiàn)同名屬性的key值,那么后者會覆蓋前者,并不能做到完整的融合,如果要進行融合的話,可以前往depp-assign中閱讀。
Object.create()
Object.create(__proto__,[properties]) 該方法將__proto__作為原型對象,并將[properties]作為新對象的屬性。
Object.defineProperty()
Object.defineProperty(obj,prop,descriptor) 方法在obj對象上對prop屬性進行定義或修改,其中descriptor為被定義或修改的屬性符。其中對于descriptor屬性符可以設置的值如下顯示:
- 【value】表示屬性的值,默認為undefined
- 【writable】該屬性是否為可寫,如果直接在對象上定義屬性,則默認為true。如果設置為false,則屬性僅為可讀。
- 【configurable】 如果為false的話,則不能修改(writabel,configurable,enumerable),如果直接在對象上定義屬性,則默認為true
- 【enumerable】是否能夠被枚舉,如果直接在對象上定義屬性,則默認為true。
- 【get】當對象訪問prop屬性的實話,會調(diào)用這個方法,并返回結果。默認為undefined
- 【set】當對象設置該屬性的時候,會調(diào)用這個方法,默認為undefined。
在MVVM框架中的雙向數(shù)據(jù)綁定是通過 Object.defineProperty() 來實現(xiàn)的,其核心的代碼如下所示:
function defineReactive(obj, key, value) {
var dep = new Dep()
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
if (Dep.target) {
dep.depend()
}
return value
},
set: function reactiveSetter(newVal) {
if (value === newVal) {
return
} else {
value = newVal
dep.notify()
}
}
})
}
Object.defineProperty(obj,prop,descriptor) 目前兼容性做的不錯,移動端上兼容絕大部分的瀏覽器,PC上也能夠兼容到IE9及以上。注意,該方法在IE8上也是能夠使用的,但是其只能夠傳入DOM對象,如果傳入其他對象會報錯??赡苡腥藭υ摲椒ǖ淖饔卯a(chǎn)生疑問,其實該方法極大的優(yōu)化了對象的獲取和修改屬性方式,以下是來自騰訊AlloyTeam的一個示例:
//當做動畫效果的時候,常常這樣做,非常的繁瑣
var targetDom = document.getElementById('target');
var transformText = 'translateX(' + 10 + 'px)';
targetDom.style.webkitTransform = transformText;
targetDom.style.transform = transformText;
//有了Object.defineProperty()之后就可以這樣做了
Object.defineProperty(targetDom, 'translateX', {
set: function(value) {
var transformText = 'translateX(' + value + 'px)';
dom.style.webkitTransform = transformText;
dom.style.transform = transformText;
}
}
//這樣再后面調(diào)用的時候, 十分簡單
dom.translateX = 10;
dom.translateX = -10;
可能有人覺得這樣做還是有點繁瑣,但是我們可以封裝一個函數(shù)庫專門做動畫效果。
具體的GitHub地址可以前往這里觀看Object.defineProperty動畫應用。
Object.defineProperties()
Object.defineProperties(obj,props) 方法直接在一個對象上修改或創(chuàng)建屬性,并返回修改后的對象,其與上面那個方法的區(qū)別在于前者可以修改或定義多個屬性,但是后者可以定義或修改多個,同時二者的兼容性一樣。對于前者而言,有相應的polyfill函數(shù)。如下顯示:
function defineProperties(obj, properties)
{
function convertToDescriptor(desc){
function hasProperty(obj, prop){
return Object.prototype.hasOwnProperty.call(obj, prop);
}
function isCallable(v){
// 如果除函數(shù)以外,還有其他類型的值也可以被調(diào)用,則可以修改下面的語句
return typeof v === "function";
}
if (typeof desc !== "object" || desc === null)
throw new TypeError("不是正規(guī)的對象");
var d = {};
if (hasProperty(desc, "enumerable"))
d.enumerable = !!desc.enumerable;
if (hasProperty(desc, "configurable"))
d.configurable = !!desc.configurable;
if (hasProperty(desc, "value"))
d.value = desc.value;
if (hasProperty(desc, "writable"))
d.writable = !!desc.writable;
if (hasProperty(desc, "get")){
var g = desc.get;
if (!isCallable(g) && g !== "undefined")
throw new TypeError("bad get");
d.get = g;
}
if (hasProperty(desc, "set")){
var s = desc.set;
if (!isCallable(s) && s !== "undefined")
throw new TypeError("bad set");
d.set = s;
}
if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
throw new TypeError("identity-confused descriptor");
return d;
}
if (typeof obj !== "object" || obj === null)
throw new TypeError("不是正規(guī)的對象");
properties = Object(properties);
var keys = Object.keys(properties);
var descs = [];
for (var i = 0; i < keys.length; i++)
descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
for (var i = 0; i < descs.length; i++)
Object.defineProperty(obj, descs[i][0], descs[i][1]);
return obj;
}
Object.getOwnPropertyDescriptor(obj,prop)
該方法是用于如果prop屬性存在對象obj上,則返回其屬性描述符,如果不存在就返回undefined。該屬性描述符由下面的屬性所組成。
- 【value】表示屬性的值,僅針對數(shù)據(jù)屬性描述符有效
- 【writable】當且僅當屬性的值可以被改變時為true。(僅針對數(shù)據(jù)屬性描述有效)
- 【configurable】 當且僅當指定對象的屬性描述可以被改變或者屬性可被刪除時,為true。
- 【enumerable】當且僅當指定對象的屬性可以被枚舉出時,為 true。
- 【get】獲取該屬性的訪問器函數(shù)(getter)。如果沒有訪問器, 該值為undefined。
- 【set】獲取該屬性的設置器函數(shù)(setter)。如果沒有設置器,該值為undefined。(僅針對包含訪問器或設置器的屬性描述有效)
該方法能夠在IE8及以上的瀏覽器上運行。
Object.getOwnPropertyNames(obj)
該方法返回obj上所有自身可枚舉和不可枚舉的屬性(不包括原型鏈上的屬性),如果傳入的obj不是數(shù)組,則會報錯。該方法的兼容IE9及以上的瀏覽器。
Object.getPrototypeOf(obj)
該方法返回對象的原型對象,如果沒有的話,則返回null。需要指出的是,對于函數(shù)對象,其返回的并不是顯式原型(prototype),而是隱式原型(__proto__),該方法兼容IE9及以上的瀏覽器。
Object.is(val1,val2)
該方法是確定兩個值是否是相同的值,這個方法與===相比,其會將-0和+0看成不等,并且對于兩個NaN的比較,Object.is()也會看成是不等的。以下是Object.is()的示例:
Object.is(0,-0)//false
Object.is(-0,-0);//true
Object.is(NaN,0/0); //true
Object.is(5,5/1); //true
該方法在微軟公司出的瀏覽器上只支持EDGE瀏覽器。不過,萬幸的是MDN提供了相應的解決方案。
if (!Object.is) {
Object.is = function(x, y) {
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
} else {
return x !== x && y !== y;
}
};
}
Object.preventExtensions()
該方法可以讓一個對象永遠不能添加新的屬性,在嚴格模式下,如果強行為對象添加屬性,會報錯,以下是Object.isExtensible()的注意事項:
"use strict";
var obj = {name:"zhang"};
obj.name = "li"http://可以進行修改
Object.preventExtensions(obj);
//obj.age = 14;嚴格模式下會報錯
obj.__proto__.age = 13;
console.log(obj);//能夠在原型對象上添加屬性
obj.__proto__ = {}//不能直接重定義原型,會報錯。
Object.seal(obj)
其對一個對象進行密封,并返回被密封的對象,這些對象都是不能夠添加屬性,不能刪除已有屬性,以及不能夠修改已有屬性的可枚舉型、可配置型、可寫性。
Object.freeze(obj)
該方法將obj對象凍結,其任何屬性都是不可以被修改的?,F(xiàn)在我們演示下這個用法。
var obj = {name:"zhangsan",prop:{age:23,sex:"man"}};
Object.freeze(obj);
obj.name = "lisi";
console.log(obj.name);//"zhangsan
//我們使用Object.defineProperty()方法來修改屬性
Object.defineProperty(obj,'prop',{"age":32,sex:"female"});
console.log(obj.prop);
//{age: 23, sex: "man"}貌似還是不行,我們換種方式看看
Object.prop.age = 25;
console.log(Object.prop);
//{age: 25, sex: "man"}
//這個對象居然改變了,明明已經(jīng)凍結了,為什么起屬性還是可以發(fā)生變化
這就要說到Object.freeze(obj) 的特性了,其只是一個淺凍結。何為淺凍結?淺凍結僅僅是對對象的一級屬性進行凍結,像上面代碼中所演示的那樣,如果直接修改其name和prop屬性是不能被修改的。如果屬性也是一個對象的話,那將不一樣了,直接對屬性中的屬性就行修改,如Object.prop.age = 25;一樣,是可以修改的。既然有淺凍結,就一定有深凍結了,那怎么才能實現(xiàn)深凍結呢?
//我們可以配合遞歸實現(xiàn)
Object.prototype.deepFreeze = Object.prototype.deepFreeze || function (o){
var prop, propKey;
Object.freeze(o); // 首先凍結第一層對象
for (propKey in o){
prop = o[propKey];
if(!o.hasOwnProperty(propKey) || !(typeof prop === "object") || Object.isFrozen(prop)){
continue;
}
deepFreeze(prop); // 遞歸
}
}
可以有人會對preventExtensions,seal,freeze這三個方法產(chǎn)生疑問,這三個方法對從擴展、密封和凍結三個方面對對象進行讀寫狀態(tài)的控制,防止對象被改變。其中最弱的一層是preventExtensions,只能讓對象無法添加新的屬性,其次是seal,該方法無法添加屬性,也無法刪除屬性,最后是freeze。當然,上面這三種方法還是可以通過改變對象的原型對象,來增加原型鏈上的屬性,并且都使淺凍結。有對對象進行控制的方法,就肯定有判斷其是否被控制的方法,Object.isExtensible()、Object.isSealed()和Object.isfreeze(obj)。這三個是判斷是否被控制,在此就不再贅述。
Object.keys(obj)
該方法會返回obj上所有可以進行枚舉的屬性的字符串數(shù)組,如下所示:
//數(shù)組對象
var arr =[3,4,5];
console.log(Object.keys(obj))
//[0,1,2]
var obj = {}
console.log(Object.keys(obj))
//[],其不會遍歷原型鏈上的屬性。
該方法兼容IE9及以上的瀏覽器,但是有相應的解決方法。
if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function (obj) {
if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object');
var result = [];
for (var prop in obj) {
if (hasOwnProperty.call(obj, prop)) result.push(prop);
}
if (hasDontEnumBug) {
for (var i=0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
}
}
return result;
}
})()
};
getOwnPropertySymbols(obj)
該方法返回obj對象上自身的(非繼承的)所有Symbol屬性鍵。
Object.entries()、Object.getOwnPropertyDescriptors()、Object.values()這些方法還只是處于試驗階段的,所以不在這里進行展開。