首頁 > 文章 > web前端 > js中Object物件有哪些？ js中object物件使用方法的總結

js中Object物件有哪些？ js中object物件使用方法的總結

不言原創: 2018-08-15 14:37:102916瀏覽

本篇文章帶給大家的內容是關於js中Object物件有哪些？ js中object物件使用方法的總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

屬性描述子

JavaScript提供了一個內部資料結構，用於描述物件的值，控制其行為，例如該屬性是否可寫入、是否可配置、是否可修改以及是否可枚舉等。這個內部資料結構被稱為『屬性描述子』。
每個屬性都有自己對應的屬性描述符，保存該屬性的元資訊。

{
    value:'前端',
    writable:false,
    enumerable:true,
    configurable:false,
    get:undefined,
    set:undefined
}

物件裡目前存在的屬性描述符有兩種主要形式：資料描述符和存取描述符

資料描述符

資料描述符是一個具有值的屬性，該值可能是可寫的，也可能不是可寫的。資料描述符具有以下可選鍵值：

value：此屬性對應的值，可以是任何有效的JavaScript值(數值，對象，函數等)。預設為undefined
writable：當該屬性的writable為true時，value才能被賦值運算子改變。預設為false
configurable：當該屬性的configurable為true時，該屬性描述子才能夠被改變，同時該屬性也能從對應的物件上刪除，預設為false
enumerable：當該屬性的enumerable為true時，此屬性才能夠出現在物件的列舉屬性中，預設為false

#訪問描述符

訪問描述符是由getter-setter函數對描述的屬性。存取描述符具有以下可選鍵值：

get：給屬性提供getter的方法，如果沒有getter則為undefined。當存取該屬性時，該方法會被執行，方法執行時沒有參數傳入，但是會傳入this物件
set：給屬性提供setter的方法，如果沒有setter則為undefined。當屬性值修改時，觸發執行該方法。此方法將接受唯一參數，即該屬性新的參數值。
configurable：當該屬性的configurable為true時，此屬性描述子才能夠被改變，同時該屬性也能從對應的物件上刪除，預設為false
enumerable：當該屬性的enumerable為true時，該屬性才能夠出現在物件的列舉屬性中，預設為false。

取得屬性描述子

Object.getOwnPropertyDescriptor()方法傳回指定物件上一個自有屬性對應的屬性描述子。

Object.getOwnPropertyDescriptor(obj,prop)

obj：需要尋找的目標物件
#prop：目標物件內屬性名稱(String類型)
傳回值：如果指定的屬性存在於物件上，則傳回其屬性描述符對象，否則傳回undefined

var obj={}
obj.attr='前端';

console.log(Object.getOwnPropertyDescriptor(obj,'attr'));

設定屬性描述符

1.Object.defineProperty()方法為物件定義新屬性或修改現有屬性，並傳回該物件

Object.defineProperty(obj,prop,descriptor);

obj：要在其上定義屬性的物件
prop：要定義或修改的屬性的名稱
#descriptor：將傳遞給函數的物件
傳回值：被傳遞給函數的物件

2.Object.defineProperties()方法為物件定義一個或多個新屬性或修改現有屬性，並傳回該物件

Object.defineProperties(obj,props)

obj：要在其上定義屬性的物件
#props：要定義其可列舉屬性或修改的屬性描述符的物件
傳回值：被傳遞給函數的物件

#屬性描述子的可選鍵值

#1. value：表示目標屬性對應的值。可以是任何有效的JavaScript值(數值，對象，函數等)。預設為undefined

var obj={};
obj.name='张三';

var attr=Object.getOwnPropertyDescriptor(obj,'name');
console.log(attr.value);

Object.defineProperty(obj,'name',{value:'李四'});
console.log(obj.name);

2.writable:Boolean值，表示目標屬性的值是否可以被修改。當該屬性的writable為true時，value才能被賦值運算子改變。預設為false

var obj={};
Object.defineProperty(obj,'attr',{
       value:'前端',
       writable:false
});
console.log(obj.attr);
obj.attr=100;
console.log(obj.attr);

3.configurable:Boolean值，表示目標屬性的描述子是否可以修改。當該屬性的configurable為true時，該屬性描述子才能夠被改變，同時該屬性也能從對應的物件上被刪除。預設為false

var obj=Object.definePropety({},'attr',{
    value:'大前端',
    configurable:false
});

Object.definePropety(obj,'attr',{value:100});
Object.definePropety(obj,'attr',{writable:true});
Object.definePropety(obj,'attr',{enumerable:true});
Object.definePropety(obj,'attr',{configurable:true});

4.enumerable:Boolean值，表示目標屬性是否可遍歷。當該屬性的enumerable為true時，該屬性才能夠出現在物件的枚舉屬性中。預設為false
如果物件的屬性的enumerable的值為false，以下三種運算取不到該屬性：

for...in語句
Object.keys()方法
JSON.stringify()方法

var obj={};
Object.defineProperty(obj,'attr',{value:'前端',enumerable:false});
for(var key in obj){console.log(key);}
console.log(Object.keys(obj));
console.log(JSON.stringify(obj));

屬性描述子的存取器

物件的屬性除了可以直接定義以外，還可以使用存取器進行定義。其中setter為存值函數，使用屬性描述符中的set;getter為取值函數，使用屬性描述符中的get

var obj=Object.defineProperty({},'attr',{
    get:function(){
        return '前端';
    },
    set:function(){
        console.log('setter:'+value);
    }
});

console.log(obj.attr);
obj.attr=100;

JavaScript中除了上述存取器的寫法之外，還提供了以下寫法：

var obj={
    get attr(){
        return '前端';
    },
    set attr(value){
        console.log('setter:'+value);
    }
}

console.log(obj.attr);
obj.attr=100;

防篡改

定义的对象默认在任何时候、任何位置，无论有意义的还是无意义的都可以修改对象的属性或方法。
而这些篡改可能会影响对象的内置属性或方法，从而导致对象的正常功能可能无法使用。
1.禁止扩展：禁止为对象扩展新的属性或方法

var obj={};
Object.preventExtensions(obj);
obj.attr='前端';
console.log(Object.isExtensible(obj));
console.log(obj.attr);

2.密封对象：禁止扩展新的属性或方法，禁止配置现有的属性或方法的描述符，仅允许读写属性的值

var sealed={};
Object.seal(sealed);
Object.isSealed(sealed);

Object.isExtensible(sealed);

3.冻结对象：禁止对对象执行任何修改操作

var frozen={1:81};
Object.isFrozen(frozen);
Object.freeze(frozen);
Object.isFrozen(frozen);

Object.isSealed(frozen);
Object.isExtensible(frozen);