JS对象数据属性 && Object.defineProperty函数

ECMAScript中定义两种属性：数据属性和访问器属性

数据属性

• [Configurable] 是否能通过delete删除属性从而重新定义属性，能否修改属性的特性，能否把属性修改为访问器属性。默认为true
• [Enumerable] 能否通过for-in循环返回该属性。默认为true
• [Writable] 能否修改属性的值。默认为true
• [Value] 包含这个属性的数据值，读写属性的时候操作的是该值，默认为undefined

要修改属性默认的特性需要使用ECMAScript5的Object.defineProperty()方法，该方法接受三个参数：属性所在的对象、属性的名字、一个描述符对象。其中描述符对象的属性必须是：configurable、enumerable、writable、value。这也就是类似于vue这种mvvm框架实现的核心函数。

    var person = {
        name: "Rack",
        age: 26,
        sex: "man"
    };
    for (var i in person) console.log(i);
    Object.defineProperty(person, 'age', {
        enumerable: false
    });
    console.log("**********enumerable**************");
    for (var i in person) console.log(i);

这里修改了person对象中age属性的enumerable特性为false，所以在用for-in就枚举不到age属性

    var person = {
        name: "Rack",
        age: 26,
        sex: "man"
    };
    Object.defineProperty(person, 'name', {
        writable: false
    });
    Object.defineProperty(person, 'age', {
        configurable: false
    })
    console.log("**********writable**************");
    console.log(person.name);
    person.name = "Rack's father";
    console.log(person.name);
    console.log("**********configurable**************");
    console.log(person.age);
    delete person.age;
    console.log(person.age);

并且修改了person对象中name属性的writable特性为false，所以person对象的name属性就修改不了，在非严格模式下person.name = “Rack’s father”;这句赋值操作将被忽略，在严格模式下，赋值操作将会导致抛出错误。
类似的configurable特性和writable相似，不能使用delete删除该属性

    var person = {
        name: "Rack",
        age: 26
    };
    console.log("**********value**************");
    console.log(person.sex);
    Object.defineProperty(person, 'sex', {
        value: "woman"
    });
    console.log(person.sex);

value特性默认值是undefined，这也就是能说明一个对象的属性没定义或没初始化的话，使用的时候是undefined

访问器属性

访问器属性不包含数据值，包含一对getter和setter函数，但都不是必须的。在读取访问器属性时，会调用getter函数，负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，负责处理数据。访问器属性有4个特性。

• [Configurable] 同数据属性中的Configurable
• [Enumerable] 同数据属性中的Enumerable
• [Get] 在读取属性时调用的函数，默认是undefined
• [Set] 在写入属性时调用的函数，默认是undefined

    var person = {
        _name: 'Rack',
        nameSetCount: 0
    };
    Object.defineProperty(person, 'name', {
        get: function (){
            return this._name;
        },
        set: function (newName){
            this._name = newName;
            this.nameSetCount++;
        }
    });
    console.log(person._name);
    person.name = "Rack's father";
    person.name = "Rack's father";
    console.log(person._name);
    console.log(person.nameSetCount);

以上代码创建了一个person对象，并定义了两个默认属性_name和nameSetCount。nameSetCount表明_name被赋值的次数。
其中name是访问器属性，_name是数据属性！！！

Object.defineProperty使用技巧

一、扩展默认对象函数。[当要给Array或者String这种内置对象添加函数时]

    Array.prototype.unique = function (){
        var res = [];
        var json = {};
        for (var i = 0; i < this.length; i++){
            if (!json[this[i]]){
                res.push(this[i]);
                json[this[i]] = 1;
            }
        }
        return res;
    };
    var tmpArray = [1,2,4,3,2,1,7];
    tmpArray = tmpArray.unique();
    console.log(tmpArray);
    console.log("******************");
    for (var i in tmpArray) {
        console.log(i);
    }

如上代码为Array添加了一个去重的函数。但是用for-in遍历的时候就出了问题。扩展函数unique也被枚举了出来。所以优化代码如下

    Array.prototype.unique = function (){
        var res = [];
        var json = {};
        for (var i = 0; i < this.length; i++){
            if (!json[this[i]]){
                res.push(this[i]);
                json[this[i]] = 1;
            }
        }
        return res;
    };
    Object.defineProperty(Array.prototype, "unique", {
        enumerable: false
    });
    var tmpArray = [1,2,4,3,2,1,7];
    tmpArray = tmpArray.unique();
    console.log(tmpArray);
    console.log("******************");
    for (var i in tmpArray) {
        console.log(i);
    }

如上代码修改了Array.prototype属性unique的enumerable特性使其不可被枚举。

二、调试最终成员变量在哪修改

经常有这样一种情况，为什么对象的属性就被莫名其妙的修改了，而且是在哪修改的，这时可以用访问器的特性setter和getter来追踪。

    var person = {
        name: "Rack",
        age: 20
    }
    Object.defineProperty(person, "name", {
        get: function (){
            return this._name;
        },
        set: function (newName){
            debugger;
            this._name = newName;
        }
    });
    person.name = "Rack's father";

如上代码就可以查到person的name属性到底是在那块被修改的。

---