OO理解對象

JavaScript中的對象定義:無序屬性的集合,其屬性可以包含基本值、對象或者函數。嚴格的講,這就相當於對象是一組沒有特定順序的值。對象的每個屬性或方法都有一個名字,而每一個名字都映射到一個值。正因爲這樣,我們可以把JavaScript的對象想象成散列表;無非就是一組名值對,其中值可以是數據或者函數。

理解對象

創建自定義對象的最簡單方式:

<!DOCTYPE html>
<html>
<head>
    <title>Creating Objects Example</title>
    <script type="text/javascript">

        var person = new Object();
        person.name = "Nicholas";
        person.age = 29;
        person.job = "Software Engineer";
        person.sayName = function(){
            alert(this.name);
        };

        person.sayName();

    </script>
</head>
<body>

</body>

對象字面量:

var person = {
    name:"Nicholas",
    age:29,
    job:"Software Engineer",
    sayName: function(){
    alert(this.name);
};

屬性類型

兩種屬性:數據屬性和訪問器屬性

數據屬性(有四個描述其行爲的特性)

  1. [[Configurable]]:表示能否通過delete刪除屬性,能否修改屬性的特性,能否把屬性修改成訪問器屬性。
  2. [[Enumerable]]:表示能否通過for-in循環返回屬性。
  3. [[Writable]]:表示能否修改屬性值。
  4. [[Value]]:包含這個屬性的數據值。讀取屬性值的時候從這個位置讀,寫入屬性值的時候把新值保存在這個位置。

    像上面的例子中那樣直接在對象上定義的屬性默認值爲:true、true、true、undefined。
    要修改屬性默認特性,必須使用Object.defineProperty()方法。

var person = {}
Object.defineProperty("person","name",{
    writable:false,
    value:"yonghong"        
});
alert(person.name);//"yonghong"
person.name="hongyong"
alert(person.name);//"yonghong"

訪問器屬性

  1. [[Configurable]]:同數據屬性。
  2. [[Enumerable]]:同數據屬性。
  3. [[Get]]:在讀取屬性時調用的函數。默認undefined
  4. [[Set]]:在寫入屬性時調用的函數。默認undefined
    要修改屬性默認特性,必須使用Object.defineProperty()方法
var book={
    ——year:2014,
    edition:1
};
Object.defineProperty(book,"year",{
    get:function(){
        return this._year;
    },
    set:function(newValue){
        if(newValue>2014){
            this._year=newValue;
            edition+=newValue-2004;
        }
    }
});
book.year=2005;
alert(edition);//2

定義多個屬性的特性

var book={};
Object.defineProperties(book,{
    _year:{
        writable:false,
        enumerable;false;
        value:2016;
    },
    edition:{
        configurable:true;
    },
    year:{
        get:function(){

        }
        set:function(newValue){

        }
    }

});

讀取屬性的特性

<!DOCTYPE html>
<html>
<head>
    <title>Get Property Descriptor Example</title>
    <script type="text/javascript">

        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"


    </script>
</head>
<body>
    <p>Note: this example only works in browsers that have implemented the ECMAScript 5 <code>Object.defineProperty()</code> method (IE9 and Firefox 4).</p>
</body>
</html>

descriptor爲一個對象,屬性爲所有的特性(4個)。
使用Object.defineProperty(),Object.defineProperties()後默認值由true變false。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章