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属性到底是在那块被修改的。

---