解析JavaScrip之对象属性

对于面向对象编程语言(如java,.net,php,python等)来说，其最大的特点在于“面向对象”，而"面向对象"较为显著的特征便是：封装，继承，多态。借助”面向对象“的这些特征，通常地，一个类大致包括三大部分：属性，方法和索引器，下面定义的一个类就包括这三大部分(.Net 语言)。

public class OOClass
    {
        //定义属性
        private string _IDCard = "";
        private string _UserName = "";
 
        //定义方法
        public string GetIDCard()
        {
            return _IDCard;
        }
        public string GetUserName()
        {
            return _UserName;
        }
 
        //定义索引器
        private string Tel { get; set; }
    }

我们知道，JavaScript是一门”弱面向对象“编程语言，其没有”对象“和”类“（注意：我们说JavaScript一切皆对象，这里的对象与面向对象编程语言的对象含义是不同的），类是实现继承的主要技术，对象是类的实例化，如果JavaScript要想实现继承，则首先要具备类和对象的条件，只有具备了该条件，方可实现继承(其实我们知道，JavaScript的原型和原型链实现继承，我会在后面的文章中深入分析原型与原型链)，那么，在JavaScript中，是 什么扮演类和对象角色呢？JavaScript对象及其属性。如果要类比，那应该是这样的关系：

一  两种典型的对象定义方式

---

（一）函数表达式方式

1.定义一个Person对象

    //定义Person对象
    function Person() {
 
    }

2.为Person对象定义属性

    //为person对象定义属性
    Person._tel = "136xxx954xx";
    Person.name = "Alan_beijing";
    Person.sex = "Man";
    Person.Address = "Shanghai";

3.为对象定义方法

    //为person对象定义方法
    Person.tel = function () {
        return this._tel;
    }

4.测试结果

    //测试
    alert(Person.name + "," + Person.sex + "," + Person.Address + "," + Person._tel);//Alan_beijing,Man,Shanghai,136xxx954xx
    alert(Person.SpeakLanguage());//Chinese And English

5.完整例子Code

   //定义Person对象
    function Person() {
 
    }
    //为person对象添加属性
    Person._tel = "136xxx954xx";
    Person.name = "Alan_beijing";
    Person.sex = "Man";
    Person.Address = "Shanghai";
    //为person对象添加方法
    Person.tel = function () {
        return this._tel;
    }
 
    //测试
    alert(Person.name + "," + Person.sex + "," + Person.Address);//Alan_beijing,Man,Shanghai
    alert(Person.tel());//136xxx954xx

（二）对象字面量方式

1.定义对象同时为对象定义属性和方法

  var Person = {
        //为person对象定义属性
        _tel: "136xxx954xx",
        name: "Alan_beijing",
        sex: "Man",
        address: "Shanghai",
        //为person对象定义方法
        tel: function () {
            return this._tel;
        }
    }

2.测试结果

    //测试
    alert(Person.name + "," + Person.sex + "," + Person.address);//Alan_beijing,Man,Shanghai
    alert(Person.tel());//136xxx954xx

3.完整例子Code

  var Person = {
        //为person对象添加属性
        _tel: "136xxx954xx",
        name: "Alan_beijing",
        sex: "Man",
        address: "Shanghai",
        //为person对象添加方法
        tel: function () {
            return this._tel;
        }
    }
 
    //测试
    alert(Person.name + "," + Person.sex + "," + Person.address);//Alan_beijing,Man,Shanghai
    alert(Person.tel());//136xxx954xx

 （三）两种方式比较

在两种典型的对象定义方式中，对象字面量定义方式是比较常用的，其常用根本原因是其采用json的格式，简洁而不繁琐。

二 对象属性种类

---

对象属性，从属性特性上来划分，大致可分为两大类，即数据属性和访问器属性。

 （一）数据属性

数据属性具有四个基本特性，即[[Configurable]]，[[Enumerable]]，[[Writable]]和[[value]]。

（1）[[Configurable]]：布尔类型(true或false，默认值为true)，表示能否对对象属性进行操作，大致包括如下操作：

• 删除属性
• 修改属性特性
• 修改属性类型，如将数据属性修改为访问器属性

（2）[[Enumerable]]：能否通过for..in..循环遍历

（3）[[Writable]]：能否修改属性值

（4）[[value]]：属性值

（二）访问器属性

访问器属性具有四个基本特性，即[[Configurable]]，[[Enumerable]]，[[Get]]和[[Set]]。

（1）[[Configurable]]：布尔类型(true或false)，表示能否对对象属性进行操作，大致包括如下操作：

• 删除属性
• 修改属性特性
• 修改属性类型，如将数据属性修改为访问器属性

（2）[[Enumerable]]：能否通过for..in..循环遍历

（3）[[Get]]：对象向外提供访问对象属性的函数

（4）[[Set]]：对象向外提供设置对象属性的函数

 （三）读取数据的特性

ECMAScript 5提供了Object.getOwnPropertyDescriptor()方法，通过该方法，可以取得属性特性值，该方法的原型如下：

其包含两个参数(对象和对象属性)，其返回值是一个对象，如果是访问器属性，则这个对象的属性有[[Configurable]]，[[Enumerable]]，[[Get]]，[[Set]]；若对象属性为数据属性，则返回[[Configurable]]，

[[Enumerable]]，[[writable]]和[[value]]。 下列代码，先定义一个对象Person，然后通过ECMAScript 5提供的函数defineProperties()为该对象添加四个数据属性(_tel，name，sex和address)和一个访问器属

性(telephone)，其中telephone访问器属性具有两个函数set()和get()，然后，我们通过getOwnPropertyDescriptor()函数访问它们的四个特性值。

    //定义对象
    var Person = {
 
    }
    //为对象添加属性
    Object.defineProperties(Person, {
        //为person对象添加属性
        _tel: {
            value: "136xxx954xx"
        },
        name: {
            value: "Alan_beijing"
        },
        sex: {
            value: "Man"
        },
        address: {
            value: "Shanghai"
        },
        //访问器
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    })
 
    //数据属性
    var dataProp = Object.getOwnPropertyDescriptor(Person, "_tel");
    alert(dataProp.value);//136xxx954xx
    alert(dataProp.configurable);//false
    alert(dataProp.writable);//false
    alert(dataProp.enumerable);//false
    //访问器属性
    var visitProp = Object.getOwnPropertyDescriptor(Person, "telephone");
    alert(visitProp.configurable);//false
    alert(visitProp.enumerable);//false
    alert(typeof visitProp.get);//function
    alert(typeof visitProp.set);//function

我们再来看看下面例子：下面例子与上面例子有几点区别：

区别1：上面的属性通过defineProperties()定义在对象Person外，而下面Person对象属性都是定义在对象Persin内部的

区别2：结果不同，对于数据属性，除了[[value]]相同外,其他三个特性([[Configurable]]，[[Writble]]，[[Enumerable]])恰好是相反的的(上面均为false，下面均为true)；对于访问器属性，除[[Configurable]]和[[Enumerable]]

属性值相反外，上面代码[[Get]]和[[Set]]能成功访问，但是下面代码显示undefined，说明索引器属性不能在对象内部定义。

    //定义对象
    var Person = {
        _tel: "136xxx954xx",
        name: "Alan_beijing",
        sex: "Man",
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    }
 
    //数据属性
    var dataProp = Object.getOwnPropertyDescriptor(Person, "_tel");
    alert(dataProp.value);//136xxx954xx
    alert(dataProp.configurable);//true
    alert(dataProp.writable);//true
    alert(dataProp.enumerable);//true
 
    //访问器属性
    var visitProp = Object.getOwnPropertyDescriptor(Person, "telephone");
    alert(visitProp.configurable);//true
    alert(visitProp.enumerable);//true
    alert(typeof visitProp.get);//undefined
    alert(typeof visitProp.set);//undefined

总结：

1.可以通过defineProperties()函数为对象定义多个属性；

2.访问器属性不能在对象内部定义，只能在对象外部定义；

3.在对象内部定义属性与通过defineProperties()函数在对象外部定义，属性特性值是相反的；

4.通过getOwnPropertyDescriptor()函数可以访问对象属性；

5.需要注意的是，访问器属性的[[Get]]和[[Set]]不是必须的；

三  对象属性基本操作

---

（一）添加定义属性

ECMAScript提供了definePropertie()和defineProperties()函数来为对象定义属性，这种方式是在对象外部为对象定义属性，当然，也可以在对象内部为对象定义属性(访问器属性不可在对象内部定义，只能在外部定义)

//定义对象
    var Person = {
 
    }
    //为对象添加属性
    Object.defineProperties(Person, {
        //为person对象添加属性
        _tel: {
            value: "136xxx954xx"
        },
        name: {
            value: "Alan_beijing"
        },
        sex: {
            value: "Man"
        },
        address: {
            value: "Shanghai"
        },
        //访问器
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    })

 （二）访问对象属性的四个特性

如下为在对象外部定义属性的访问结果，内部定义访问结果是相反的

   //数据属性
    var dataProp = Object.getOwnPropertyDescriptor(Person, "_tel");
    alert(dataProp.value);//136xxx954xx
    alert(dataProp.configurable);//false
    alert(dataProp.writable);//false
    alert(dataProp.enumerable);//false
    //访问器属性
    var visitProp = Object.getOwnPropertyDescriptor(Person, "telephone");
    alert(visitProp.configurable);//false
    alert(visitProp.enumerable);//false
    alert(typeof visitProp.get);//function
    alert(typeof visitProp.set);//function

 （三）删除/修改对象属性

如下代码，我们设置数据属性address可修改，修改成功

    //定义对象
    var Person = {
 
    }
    //为对象添加属性
    Object.defineProperties(Person, {
        //为person对象添加属性
        _tel: {
            value: "136xxx954xx"
        },
        name: {
            value: "Alan_beijing"
        },
        sex: {
            value: "Man"
        },
        address: {
            writable: true,
            value: "Shanghai"
        },
        //访问器
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    })
 
    alert(Person.address);//Shanghai
    Person.address = "Beijing";
    alert(Person.address);//Beijing

如下代码，我们先设置[[Configurable]] 只可读(false)，然后尝试删除address属性，删除失败

   //定义对象
    var Person = {
 
    }
    //为对象添加属性
    Object.defineProperties(Person, {
        //为person对象添加属性
        _tel: {
            value: "136xxx954xx"
        },
        name: {
            value: "Alan_beijing"
        },
        sex: {
            value: "Man"
        },
        address: {
            configurable: false,
            writable: true,
            value: "Shanghai"
        },
        //访问器
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    })
 
    alert(Person.address);//Shanghai
    delete Person.address;
    alert(Person.address);//Shanghai

如下代码，我们先设置[[Configurable]]  可操作(true)，然后再删除address属性，删除成功

    //定义对象
    var Person = {
 
    }
    //为对象添加属性
    Object.defineProperties(Person, {
        //为person对象添加属性
        _tel: {
            value: "136xxx954xx"
        },
        name: {
            value: "Alan_beijing"
        },
        sex: {
            value: "Man"
        },
        address: {
            configurable: true,
            writable: true,
            value: "Shanghai"
        },
        //访问器
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    })
 
    alert(Person.address);//Shanghai
    delete Person.address;
    alert(Person.address);//Undefined

注意：当一旦定义[[Configurable]]为false时，再也变不回去了

    //定义对象
    var Person = {
 
    }
    //为对象添加属性
    Object.defineProperties(Person, {
        //为person对象添加属性
        _tel: {
            value: "136xxx954xx"
        },
        name: {
            value: "Alan_beijing"
        },
        sex: {
            value: "Man"
        },
        address: {
            configurable: false,
            writable: true,
            value: "Shanghai"
        },
        //访问器
        telephone: {
            get: function () {
                //var strName = "name:" + name;
                //return strName;
                return this._tel;
            },
            set: function (tel) {
                _tel = tel;
            }
        }
    })
 
    Object.defineProperty(Person, "address", {
        configurable:true
    }) 

上述代码先将addess属性的特性[[configurable]]设置false，然后又将其修改为true，修改失败，因为[[configurable]]特性一旦设置为false，就再也不可改变。

[[configurable]]和[[writable]]区别？

前者操作属性特性，如删除属性，修改属性，更改属性类型；后者操作属性值，如更改属性值。两者没有直接关系，即不管[[configurable]]的值是怎样，一个属性的值能否可修改，是由[[writable]]决定的，而不受[[configurable]]影响。

四  参考文献

---

【01】JavaScript 高级程序设计(第三版)   （美）Nicholas C.Zakas 著       李松峰   曹力  译

【02】JavaScript 权威指南 (第6版)    David  Flanagan 著

五  已发布文章

---

1. JavaScript之函数(上)
2. 浅析JavaScript之数组
3. 浅谈JavaScript之事件(上)
4. 解析JavaScrip之属性

六  版权区

---

• 感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
• 博主网址：http://www.cnblogs.com/wangjiming/。
• 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
• 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2098469527@qq.com。
• 可以转载该博客，但必须著名博客来源。