JavaScript面向?qū)ο缶幊獭狾bject類型

Crazy_Coder 發(fā)布于2019-08-26 12:11 / 786人閱讀

摘要：數(shù)據(jù)描述符具有以下可選值該屬性對(duì)應(yīng)的值。可以使任何有效的值數(shù)值，對(duì)象，函數(shù)。當(dāng)且僅當(dāng)該屬性的為時(shí)，該屬性才能出現(xiàn)在對(duì)象的枚舉屬性中默認(rèn)為。凍結(jié)對(duì)象禁止對(duì)對(duì)象執(zhí)行任何修改操作。張無忌凍結(jié)對(duì)象周芷若

Object類型 操作對(duì)象的屬性 屬性描述符

JavaScript提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用于描述對(duì)象的值，控制其行為，例如該屬性是否可寫，是否可配置，是否可修改以及是否可枚舉等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)被稱為“屬性描述符”。
每個(gè)屬性都有自己對(duì)應(yīng)的屬性描述符，保存該屬性的原信息。

    // 表示創(chuàng)建一個(gè)空對(duì)象
var obj1 = new Object(null);
var obj2 = new Object(undefined);

// 表示創(chuàng)建一個(gè)與給定值對(duì)應(yīng)類型的對(duì)象
var obj3 = new Object(100);
console.log(obj3);// [Number: 100]
var num = new Number(100);
console.log(num);// [Number: 100]

// 當(dāng)以非構(gòu)造函數(shù)形式被調(diào)用時(shí)，Object等同于new Object()
var obj4 = Object();// 函數(shù)調(diào)用
var obj5 = new Object();// 構(gòu)造函數(shù)調(diào)用

數(shù)據(jù)描述符

數(shù)據(jù)描述符是一個(gè)具有值的屬性，該值可能是可寫的，也可能不是可寫的。數(shù)據(jù)描述符具有以下可選值：
1.value；該屬性對(duì)應(yīng)的值。可以使任何有效的JavaScript值（數(shù)值，對(duì)象，函數(shù) ）。默認(rèn)為undefined。
2.writable；當(dāng)且僅當(dāng)該屬性的writable為true時(shí)，value才能被賦值運(yùn)算符改變。默認(rèn)為false。
3.configurable；當(dāng)且僅當(dāng)該屬性的configurable為true時(shí)，該屬性描述符才能夠被改變，同時(shí)該屬性也能從對(duì)應(yīng)的對(duì)象上刪除。默認(rèn)為false。
4.enumerable；當(dāng)且僅當(dāng)該屬性的enumerable為true時(shí)，該屬性才能出現(xiàn)在對(duì)象的枚舉屬性中默認(rèn)為false。

存取描述符

存取描述符是由getter-setter函數(shù)對(duì)描述的屬性。存取描述符具有以下可選值：
1.get；給屬性提供getter的方法，如果沒有g(shù)etter則為undefined。當(dāng)訪問該屬性是，該方法會(huì)被執(zhí)行，方法執(zhí)行是沒有參數(shù)傳人，但是會(huì)傳入this對(duì)象。
2.set；給屬性提供setter的方法，如果沒有setter則為undefined。當(dāng)屬性值修改時(shí)，觸發(fā)執(zhí)行該方法。該方法將接受唯一參數(shù)，即該屬性新的參數(shù)值。
3.configurable；當(dāng)且僅當(dāng)該屬性的configurable為true是，該屬性描述符才能夠改變，同時(shí)該屬性也能從對(duì)應(yīng)的對(duì)象上被刪除。默認(rèn)為false。
4.enumerable；當(dāng)且僅當(dāng)該屬性的enumerable為true時(shí)，該屬性才能夠出現(xiàn)對(duì)象的枚舉屬性中。默認(rèn)為false。

獲取屬性描述符

  通過定義對(duì)象(屬性或方法)這種方式
     屬性默認(rèn)都是數(shù)據(jù)描述符
 
var obj = {
    name : "張無忌"
}

    使用Object.getOwnPropertyDescriptor()方法獲取指定屬性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
     obj - 表示指定屬性對(duì)應(yīng)的目標(biāo)對(duì)象
     prop - 表示獲取描述符的目標(biāo)屬性名稱
     返回值 - 其屬性描述符對(duì)象
  
var result = Object.getOwnPropertyDescriptor(obj,"name");
console.log(result);

設(shè)置屬性描述符

var obj = {
    // 定義對(duì)象的同時(shí)定義了該屬性以及值(可修改、可刪除以及可枚舉的)
    name : "張無忌"
}

    Object.defineProperty(obj, prop, desc)方法
     作用
       用于定義目標(biāo)對(duì)象的新屬性
       用于修改目標(biāo)對(duì)象的已存在屬性
     參數(shù)
       obj - 表示目標(biāo)對(duì)象
       prop - 表示目標(biāo)對(duì)象的目標(biāo)屬性名稱
       desc - 表示屬性描述符，必須是對(duì)象格式
        {
            value : 值
        }
     返回值 - 返回傳遞的對(duì)象
 
Object.defineProperty(obj, "name", {
    value : "周芷若"
});
console.log(obj.name);// 周芷若

    同樣都是為對(duì)象新增屬性
    1.如果直接使用 "對(duì)象名.屬性名 = 值" -> 可修改、可刪除以及可枚舉的
    2.如果使用Object.defineProperty()方法新增屬性
       該新屬性是不可修改、不可刪除以及不可枚舉的
 
Object.defineProperty(obj, "age", {
    value : 18
});
console.log(obj.age);// 18

var result1 = Object.getOwnPropertyDescriptor(obj, "age");
console.log(result1);
// 一旦屬性的值是不可修改的 - 如果執(zhí)行修改操作時(shí) -> 沒有語法報(bào)錯(cuò)，但是無效
obj.age = 80;
console.log(obj.age);// 18

obj.job = "教主";
var result2 = Object.getOwnPropertyDescriptor(obj, "job");
console.log(result2);

var obj = {
    // 定義對(duì)象的同時(shí)定義了該屬性以及值(可修改、可刪除以及可枚舉的)
    name : "張無忌"
}
// 修改現(xiàn)有屬性
Object.defineProperty(obj, "name", {
    value : "周芷若",
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name屬性值
obj.name = "趙敏";
console.log(obj.name);// 周芷若

Object.defineProperty(obj, "age", {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age屬性值
obj.age = 80;
console.log(obj.age);// 80
// 刪除age屬性值
delete obj.age;
console.log(obj.age);// undefined

屬性描述符的存取器

對(duì)象的屬性除了可以直接定義以外，還可以使用存取器進(jìn)行定義。其中setter為存值函數(shù)，使用屬性描述符總set；getter為取值函數(shù)，使用屬性描述符的get。

var obj = {
    name : "張無忌"
}
var value;// 全局變量
Object.defineProperty(obj, "name", {
    // 獲取指定的屬性值
    get : function(){// 當(dāng)獲取或訪問當(dāng)前屬性時(shí)，會(huì)調(diào)用get方法
        console.log("this is get function");
        
            類似于數(shù)據(jù)描述符中的value
             get方法在被調(diào)用時(shí)，不能傳遞任何參數(shù)
             get方法在被調(diào)用時(shí)，允許傳遞this關(guān)鍵字
               this - 表示當(dāng)前的目標(biāo)對(duì)象(不能調(diào)用對(duì)象的當(dāng)前目標(biāo)屬性)
          
        return value;// 由于變量為初始化，調(diào)用時(shí)可能結(jié)果為 undefined
    },
    
        set方法用于定義當(dāng)前目標(biāo)屬性的修改作用
         該方法接收唯一的一個(gè)參數(shù) -> 作為當(dāng)前目標(biāo)屬性的新的值
         通過屬性修改操作指定的新的值 -> 作為形參對(duì)應(yīng)的實(shí)參
     
    set : function(newValue){
        console.log("this is set function: " + value);
        
            set方法在被調(diào)用時(shí)，允許傳遞this關(guān)鍵字
               this - 表示當(dāng)前的目標(biāo)對(duì)象(不能調(diào)用對(duì)象的當(dāng)前目標(biāo)屬性)
         
        value = newValue;
    }
});
console.log(obj.name);// undefined

obj.name = "趙敏";
console.log(obj.name);// 趙敏

防篡改對(duì)象 防篡改是什么

定義的對(duì)象默認(rèn)在任何時(shí)候、任何位置，無論有意義的還是沒有意義的都可以修改獨(dú)享的屬性或方法.而這些篡改可能會(huì)影響對(duì)象的內(nèi)置屬性或方法，從而導(dǎo)致對(duì)象的正常功能無法使用。
JavaScript在ECMAScript5版本中新增了防止篡改對(duì)象的屬性或方法的機(jī)制，功提供了一下三級(jí)保護(hù)方式：
1.禁止擴(kuò)展；禁止對(duì)對(duì)象擴(kuò)展心的屬性或方法
2.密封對(duì)象；禁止擴(kuò)展心的屬性或方法，禁止配置現(xiàn)有的屬性或方法的描述符，允許讀寫屬性的值。
3.凍結(jié)對(duì)象；禁止對(duì)對(duì)象執(zhí)行任何修改操作。

禁止擴(kuò)展

如果禁止為對(duì)象擴(kuò)展新的屬性或方法，需要修改對(duì)象屬性extensible為false。

var obj = {};
// 將對(duì)象設(shè)置禁止擴(kuò)展
Object.preventExtensions(obj);
// 新增屬性或方法無效 -> 語法沒有報(bào)錯(cuò)
obj.name = "張無忌";
console.log(obj);

    Object.defineProperty()方法新增屬性
     結(jié)果 - 報(bào)錯(cuò)
     信息 - TypeError: Cannot define property:name, object is not extensible.
 
Object.defineProperty(obj, "name", {
    value : "周芷若"
});
console.log(obj);


    Object.isExtensible(obj)方法
     作用 - 用于判斷指定目標(biāo)對(duì)象是否可擴(kuò)展
     返回值
       true - 表示指定目標(biāo)對(duì)象是可擴(kuò)展的
       false - 表示指定目標(biāo)哦對(duì)象是不可擴(kuò)展的
 
var result = Object.isExtensible(obj);
console.log(result);

密封對(duì)象

密封對(duì)象，就是指禁止為對(duì)象擴(kuò)展心的守護(hù)星或方法，并且禁止修改現(xiàn)有屬性的描述符。

var obj = {
    name : "張無忌" // 表示可修改
};
console.log(Object.getOwnPropertyDescriptor(obj, "name"));


    將該對(duì)象進(jìn)行密封
    1.不能為該對(duì)象新增屬性或方法
    2.不能修改該對(duì)象的屬性或方法的描述符
       configurable
       enumerable
  
Object.seal(obj);

console.log(Object.getOwnPropertyDescriptor(obj, "name"));

 新增屬性
obj.age = 18;
console.log(obj);
// 修改屬性
obj.name = "周芷若";
console.log(obj);

Object.defineProperty(obj, "age", {
    value : 18
});
Object.defineProperty(obj, "name", {
    value : "周芷若",
    writable : false, // 表示不可修改
    configurable : true,
    enumerable : false
});

console.log(Object.getOwnPropertyDescriptor(obj, "name"))

console.log(obj);

obj.name = "趙敏";
console.log(obj);

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

凍結(jié)對(duì)象，就是指禁止對(duì)對(duì)象執(zhí)行任何修改操作。

var obj = {
    name : "張無忌"
}
// 凍結(jié)對(duì)象
Object.freeze(obj);

/*obj.age = 18;
console.log(obj);
obj.name = "周芷若";
console.log(obj);
delete obj.name;
console.log(obj);*/

Object.defineProperty(obj, "age", {
    value : 18
});
console.log(obj);