javaScript中的Object類型

hyuan 發布于2019-08-26 12:11 / 2860人閱讀

摘要：默認為當該屬性的為時，才能被賦值運算符改變。可以是任何有效的值數值，對象，函數等。而這些篡改可能會影響對象的內置屬性或方法，從而導致對象的正常功能可能無法使用。

屬性描述符

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);

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108184.html

JavaScript 中的強制類型轉換

摘要：完整清單是中添加，此處不予介紹布爾值用來表示可能是真或假的值。結果抽象比較運算符在比較它們之前在類型之間進行自動轉換。中的隱式轉換稱為強制類型轉換，并在規范中定義。這些內置類型可用于在不同類型之間進行顯式轉換。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 show...

endiat 2019-08-23 16:52 評論0 收藏0
JavaScript中的數據類型及其檢測

摘要：中的數據類型及其檢測數據類型基本類型引用類型類型檢測只能檢測基本數據類型，對于還有一個用于檢測某個對象的原型鏈是否包含某個構造函數的屬性適用于檢測對象，它是基于原型鏈運作的屬性返回一個指向創建了該對象原型的函數引用，該屬性的值是哪個函數本身 JavaScript中的數據類型及其檢測 1. 數據類型 1.1 基本類型 Number String Boolean Null Undefin...

Bryan 2019-08-22 10:36 評論0 收藏0
前端面試題 -- JavaScript (一)

摘要：前言前兩天總結了一下方面的面試題傳送門，今天翻看了一些面試中常見的幾個問題只是一部分，會持續更新，分享給有需要的小伙伴，歡迎關注如果文章中有出現紕漏錯誤之處，還請看到的小伙伴留言指正，先行謝過以下有哪些數據類型種原始數據類型布爾表示一個邏輯前言前兩天總結了一下HTML+CSS方面的面試題 (傳送門)，今天翻看了一些 JavaScript 面試中常見的幾個問題（只是一部分，會持續更新...

junnplus 2019-08-23 15:59 評論0 收藏0
JavaScript的數據類型及其檢測

摘要：值的比較只進行值的比較會進行數據類型的轉換。只要在當前實例的原型鏈上，我們用其檢測出來的結果都是。但檢測與不一樣，還可以處理基本數據類型的檢測。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有幾種類型的值？ Javascript有兩種數據類型，分別是基本數據類型和引用數據類型。其中...

starsfun 2019-08-29 17:01 評論0 收藏0
JavaScript的數據類型及其檢測

摘要：值的比較只進行值的比較會進行數據類型的轉換。只要在當前實例的原型鏈上，我們用其檢測出來的結果都是。但檢測與不一樣，還可以處理基本數據類型的檢測。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有幾種類型的值？ Javascript有兩種數據類型，分別是基本數據類型和引用數據類型。其中...

dingding199389 2019-08-02 11:45 評論0 收藏0
JavaScript的數據類型及其檢測

摘要：值的比較只進行值的比較會進行數據類型的轉換。只要在當前實例的原型鏈上，我們用其檢測出來的結果都是。但檢測與不一樣，還可以處理基本數據類型的檢測。 showImg(https://segmentfault.com/img/remote/1460000016733921); 一、JavaScript有幾種類型的值？ Javascript有兩種數據類型，分別是基本數據類型和引用數據類型。其中...

Moxmi 2019-08-23 12:25 評論0 收藏0