JavaScript 之 面向對象 [ Object類型 ]

Object類型

描述

• object類型對象是全部其餘類型對象的父級

使用Object建立對象

/* 表示使用構造函數方式建立一個空對象 */
var obj1 = new Object();
console.log( obj1 );// 顯示 {}


/* Object能夠根據一個給定值建立一個對應類型的對象 */
var obj2 = new Object( 100 );// 建立一個number類型的對象
console.log( obj2 );// 顯示 [Number: 100]
var obj3 = new Object( '啊哈哈' );// 建立一個string類型的對象
console.log( obj3 );// 顯示 [String: '啊哈哈']

屬性描述符

• 表示對象的屬性或方法的內部數據結構

• 用於描述對象的值，或控制值的行爲

  • 好比： 是否可修改 是否可刪除 是否可枚舉

屬性描述符的分類

• 數據描述符
• 存取描述符

獲取屬性描述符

• Object.getOwnPropertyDescriptor()方法
• 經過該方法能夠獲取到指定屬性或方法的屬性描述符

• 該方法接收兩個參數

  • 第一個 - 須要查找屬性的目標對象
  • 第二個 - 目標對象中須要查找的屬性名稱（ string類型 ）
• 該方法會將查找的結果，以對象的方式返回

var obj = {
    ahh : '啊哈哈'
}
var ahh = Object.getOwnPropertyDescriptor( obj, 'ahh' );
console.log( ahh );
/* 顯示 {
value: '啊哈哈', - 表示 屬性或方法對應的值
writable: true, - 表示 是否可修改，值爲boolean類型，true表示能夠，false表示不能夠，默認值爲 false
enumerable: true, - 表示 是否可枚舉，值爲boolean類型，true表示能夠，false表示不能夠，默認值爲 false
configurable: true  - 表示 是否可刪除，值爲boolean類型，true表示能夠，false表示不能夠，默認值爲 false
} */

屬性描述符的value屬性

• 能夠對指定對象添加新屬性或方法
• 能夠對指定對象中已有的屬性或方法進行修改

Object.defineProperty()方法

• 該方法接收三個參數

  • 第一個 - 表示指定的對象

  • 第二個 - 表示指定對象中的屬性名稱，字符串格式

    • 修改就填已存在的
    • 新增就直接寫新名
  • 第三個 - 表示屬性描述符，必須是對象格式 { }

/* 定義一個對象 */
var obj = {
    ahh : '啊哈哈'
}
/* 修改屬性 */
console.log( obj.ahh );// 顯示 啊哈哈
/* 對已有屬性進行修改 */
Object.defineProperty( obj, 'ahh', {
    value : '哈哈啊'
} );
/* 顯示修改後的屬性 */
console.log( obj.ahh );// 顯示 哈哈啊

/* 添加屬性 */
console.log( obj );// 顯示 { ahh: '哈哈啊' }
/* 添加新屬性 */
Object.defineProperty( obj, 'ooo', {
    value : '哦哦哦',
    /*
        設置是否可枚舉
         * 用於打印對象時能夠正常顯示新增的屬性
         * 不設置可枚舉時將沒法顯示新增屬性，只顯示原有屬性
          * 顯示 { ahh: '哈哈啊' }
     */
    enumerable : true
} );
/* 顯示新增屬性 */
console.log( obj );// 顯示 { ahh: '哈哈啊', ooo: '哦哦哦' }
/* 調用新屬性 */
console.log( obj.ooo );// 顯示 哦哦哦
/*
    注意：
     * 經過Object.defineProperty()方法新增的屬性
      * 該屬性 - 不可修改 不可刪除 不可枚舉
     * 經過 對象名.屬性名 = 屬性值 的方法新增的屬性
      * 該屬性 - 能夠修改 能夠刪除 能夠枚舉
 */

屬性描述符的writable屬性

• 表示指定屬性或方法是否可修改

• 該屬性值爲boolean值

  • true - 表示可修改
  • false - 表示不可修改

Object.defineProperty()方法

• 該方法接收三個參數

  • 第一個 - 表示指定的對象
  • 第二個 - 表示指定對象中的屬性名稱，字符串格式
  • 第三個 - 表示屬性描述符，必須是對象格式 { }

/* 定義一個對象 */
var obj = {
    ahh : '啊哈哈'
}
/* 修改已有屬性 */
Object.defineProperty( obj, 'ahh', {
    value : '哈哈啊',
    writable : false // 不可修改
} );
console.log( obj.ahh );// 顯示 哈哈啊
/* 設置writable屬性後在修改屬性 - 不可修改 */
obj.ahh = '啊啊啊';
console.log( obj.ahh );// 顯示 哈哈啊
/* 設置writable屬性後在修改屬性 - 可修改 */
Object.defineProperty( obj, 'ahh', {
    writable : true // 可修改
} );
obj.ahh = '啊啊啊';
console.log( obj.ahh );// 顯示 啊啊啊

屬性描述符的configurable屬性

• 表示指定屬性或方法是否可枚舉

• 該屬性值爲boolean值

  • true - 表示可枚舉
  • false - 表示不可枚舉

Object.defineProperty()方法

• 該方法接收三個參數

  • 第一個 - 表示指定的對象
  • 第二個 - 表示指定對象中的屬性名稱，字符串格式
  • 第三個 - 表示屬性描述符，必須是對象格式 { }

/* 定義一個對象 */
var obj = {
    ahh : '啊哈哈'
}
Object.defineProperty( obj, 'ahh', {
    enumerable : false// 不可枚舉
} );
console.log( obj.ahh );// 顯示 啊哈哈
/*
    * 只能遍歷對象中可被枚舉的屬性
      * for...in語句
      * keys()方法
    * 能夠遍歷對象中可枚舉和不可枚舉的屬性
      * getOwnPropertyNames()方法
 */
/* for...in語句 */
for ( var i in obj ) {
    console.log( i );
}// 沒有顯示

/* keys()方法 */
var obj1 = Object.keys( obj );
console.log( obj1 );// 顯示 []空數組

/* getOwnPropertyNames()方法 */
var obj2 = Object.getOwnPropertyNames( obj );
console.log( obj2 );// 顯示 [ 'ahh' ]

屬性描述符的configurable屬性

• 表示指定屬性或方法是否可刪除

• 該屬性值爲boolean值

  • true - 表示可刪除
  • false - 表示不可刪除

Object.defineProperty()方法

• 該方法接收三個參數

  • 第一個 - 表示指定的對象
  • 第二個 - 表示指定對象中的屬性名稱，字符串格式
  • 第三個 - 表示屬性描述符，必須是對象格式 { }

/* 定義一個對象 */
var obj = {
    ahh : '啊哈哈'
}
/* 修改已有屬性 */
Object.defineProperty(obj, 'ahh', {
    configurable : false // 不可刪除
});
/* 刪除ahh屬性值 */
delete obj.ahh;
console.log(obj.ahh);// 顯示 啊哈哈

Object.defineProperty(obj, 'ahh', {
    configurable : true // 可刪除
});
/* 刪除ahh屬性值 */
delete obj.ahh;
/* 在調用已刪除的屬性會報錯 */
console.log(obj.ahh);// 顯示 TypeError: Cannot redefine property: ahh

屬性描述符的存取器

/* 定義一個對象 */
var obj = {
    ahh : 'ahh'
}
/* 定義一個全局變量 */
var quanju;
Object.defineProperty(obj, 'ahh', {
    // 獲取指定的屬性值
    get : function(){// 當獲取或訪問當前屬性時，會調用get方法
        /*
            相似於數據描述符中的value
            * get方法在被調用時，不能傳遞任何參數
            * get方法在被調用時，容許傳遞this關鍵字
              * this - 表示當前的目標對象(不能調用對象的當前目標屬性)
          */
        return quanju;// 因爲變量爲初始化，調用時可能結果爲 undefined
    },
    /*
        set方法用於定義當前目標屬性的修改做用
        * 該方法接收惟一的一個參數 -> 做爲當前目標屬性的新的值
        * 經過屬性修改操做指定的新的值 -> 做爲形參對應的實參
     */
    set : function(canshu){
        /*
            set方法在被調用時，容許傳遞this關鍵字
              * this - 表示當前的目標對象(不能調用對象的當前目標屬性)
         */
        quanju = canshu;
    }
});
console.log(obj.ahh);// 顯示 undefined

obj.ahh = '啊啊啊';
console.log(obj.ahh);// 顯示 啊啊啊

禁止擴展

• 表示不能添加新的屬性或方法

Object.preventExtensions()方法

• 表示禁止擴展

Object.isExtensible()方法

• 表示用於判斷指定對象是否可擴展

  • true - 表示可擴展
  • false - 表示不可擴展

/* 定義一個空對象 */
var obj = {};
/* 設置禁止擴展 */
Object.preventExtensions( obj );
/* 添加新屬性 */
obj.ahh = '啊哈哈';
console.log( obj );// 顯示 {}空對象
/*
    使用Object.defineProperty()方法進行新增屬性會報錯
    * TypeError: Cannot define property:name, object is not extensible.
 */
Object.defineProperty(obj, 'ahh', {
    value : '啊哈哈'
});
console.log( obj );// 顯示 Cannot define property ahh, object is not extensible

/* 判斷指定對象是否可擴展 */
var panduan = Object.isExtensible( obj );
console.log( panduan );// 顯示 false

密封對象

• 表示不能添加新的屬性或方法，也不能對已有的屬性或方法進行修改

Object.seal()方法

• 表示密封對象

Object.isSealed()方法

• 表示用於判斷指定對象是否密封

  • true - 表示密封
  • false - 表示沒密封

var obj = {
    ahh : '啊哈哈' // 表示可修改
};
console.log( Object.getOwnPropertyDescriptor( obj, 'ahh' ) );

/*
    將該對象進行密封
    1.不能爲該對象新增屬性或方法
    2.不能修改該對象的屬性或方法的描述符
      * configurable
      * enumerable
  */
/* 密封對象 */
Object.seal( obj );
console.log( Object.getOwnPropertyDescriptor( obj, 'ahh' ) );

/* 判斷指定對象是否密封 */
var panduan = Object.isSealed( obj );
console.log( panduan );// 顯示 true

凍結對象

• 表示禁止對指定對象的任何修改操做

Object.freeze()方法

• 表示凍結對象

Object.isFrozen()方法

• 表示用於判斷指定對象是否凍結

  • true - 表示凍結
  • false - 表示沒凍結

var obj = {
    ahh : '啊哈哈'
}
/* 凍結對象 */
Object.freeze( obj );
/*
    對已經凍結的對象使用Object.defineProperty()方法進行操做
     * 會報錯
     * TypeError: Cannot define property age, object is not extensible
 */
Object.defineProperty( obj, 'age', {
    value : 18
} );
console.log( obj );//顯示 Cannot define property age, object is not extensible

/* 判斷指定對象是否密封 */
var panduan = Object.isFrozen( obj );
console.log( panduan );// 顯示 true