【javascript】理解對象屬性

ECMAScript 中沒有類的概念,因此它的對象也與基于類的語言中的對象有所不同。

  • 創建自定義對象的最簡單方式就是創建一個Object 的實例,然后再為它添加屬性和方法
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
    alert(this.name);
};
  • 對象字面量成為創建這種對象的首選模式
var person = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};

屬性類型

  • ECMAScript 中有兩種屬性:數據屬性和訪問器屬性。

1、數據屬性

數據屬性包含一個數據值的位置。在這個位置可以讀取和寫入值。數據屬性有4個描述其行為的特性。

  • [[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特
    性,或者能否把屬性修改為訪問器屬性。直接在對象上定義的屬性,它們的這個特性默認值為true。
  • [Enumerable]]:表示能否通過for-in 循環返回屬性。直接在對象上定義的屬性,它們的
    這個特性默認值為true。
  • [[Writable]]:表示能否修改屬性的值。直接在對象上定義的屬性,它們的這個特性默認值為true。
  • [[Value]]:包含這個屬性的數據值。讀取屬性值的時候,從這個位置讀;寫入屬性值的時候,把新值保存在這個位置。這個特性的默認值為undefined。
  • 要修改屬性默認的特性,必須使用ECMAScript 5的Object.defineProperty()方法。這個方法接收三個參數:屬性所在的對象、屬性的名字和一個描述符對象。其中,描述符(descriptor)對象的屬性必須是:configurable、enumerable、writable 和value。設置其中的一或多個值,可以修改對應的特性值。
var person = {};
Object.defineProperty(person, "name", {
    writable: false,
    value: "Nicholas"
});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"
var person = {};
Object.defineProperty(person, "name", {
    configurable: false,
    value: "Nicholas"
});
alert(person.name); //"Nicholas"
delete person.name;
alert(person.name); //"Nicholas"
//把configurable 設置為false,表示不能從對象中刪除屬性。如果對這個屬性調用delete,則在非嚴格模式下什么也不會發生,而在嚴格模式下會導致錯誤。
  • 一旦把屬性定義為不可配置的,就不能再把它變回可配置了。此時,再調用Object.defineProperty()方法修改除writable 之外的特性,都會導致錯誤
var person = {};
Object.defineProperty(person, "name", {
    configurable: false,
    value: "Nicholas"
});
//拋出錯誤
Object.defineProperty(person, "name", {
    configurable: true,
    value: "Nicholas"
});
  • 在調用Object.defineProperty()方法時,如果不指定,configurable、enumerable 和
    writable 特性的默認值都是false。

2、訪問器屬性

訪問器屬性不包含數據值,它們包含一對兒getter和setter函數(非必需),在讀取訪問器屬性時,會調用getter 函數,這個函數負責返回有效的值;在寫入訪問器屬性時,會調用setter 函數并傳入新值,這個函數負責決定如何處理數據。

  • [[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特
    性,或者能否把屬性修改為數據屬性。對于直接在對象上定義的屬性,這個特性的默認值為
    true。
  • [[Enumerable]]:表示能否通過for-in循環返回屬性。對于直接在對象上定義的屬性,這
    個特性的默認值為true。
  • [[Get]]:在讀取屬性時調用的函數。默認值為undefined。
  • [[Set]]:在寫入屬性時調用的函數。默認值為undefined。
  • 訪問器屬性不能直接定義,必須使用Object.defineProperty()來定義
var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function(){
        return this._year;
    },
    set: function(newValue){
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
alert(book.year); //2004
book.year = 2005;
alert(book.edition); //2

定義多個屬性

  • 由于為對象定義多個屬性的可能性很大,ECMAScript5又定義了一個Object.defineProperties()方法。
  • 利用這個方法可以通過描述符一次定義多個屬性。這個方法接收兩個對象參數:第一個對象是要添加和修改其屬性的對象,第二個對象的屬性與第一個對象中要添加或修改的屬性一一對應
var book = {};
Object.defineProperties(book, {
    _year: {
        value: 2004
    },
    edition: {
        value: 1
    },
    year: {
        get: function(){
            return this._year;
        },
        set: function(newValue){
            if (newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004;
            }
        }
    }
});

讀取屬性的特性

  • 使用ECMAScript 5 的Object.getOwnPropertyDescriptor()方法,可以取得給定屬性的描述符。
  • 這個方法接收兩個參數:屬性所在的對象和要讀取其描述符的屬性名稱。返回值是一個對象。
  • 如果是訪問器屬性,這個對象的屬性有configurable、enumerable、get 和set。
  • 如果是數據屬性,這個對象的屬性有configurable、enumerable、writable 和value。
var book = {};
Object.defineProperties(book, {
    _year: {
        value: 2004
    },
    edition: {
        value: 1
    },
    year: {
        get: function(){
            return this._year;
        },
        set: function(newValue){
            if (newValue > 2004) {
                this._year = newValue;
                this.edition += newValue - 2004;
            }
        }
    }
});
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //2004
alert(descriptor.configurable); //false
alert(typeof descriptor.get); //"undefined"

var descriptor = Object.getOwnPropertyDescriptor(book, "year");
alert(descriptor.value); //undefined
alert(descriptor.enumerable); //false
alert(typeof descriptor.get); //"function"
  • 在JavaScript 中,可以針對任何對象——包括 DOM 和BOM 對象,使用Object.getOwnPropertyDescriptor()方法。
  • 支持這個方法的瀏覽器有IE9+、Firefox 4+、Safari 5+、Opera 12+和Chrome。
好好學習
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。