面向对象的程序设计-----理解对象_面向对象程序设计中属性的解释-优快云博客

本文深入探讨了JavaScript中对象的概念及其实现方式，详细解析了数据属性与访问器属性的区别，包括各自的特性和使用场景，并提供了丰富的代码示例。

1.1 理解对象

对象：无序属性的集合，其属性可以包含基本值、对象或者函数。严格来讲，对象是一组没有特定顺序的值。对象的每一个属性或方法都有一个名字，而每一个名字都映射到一个值。

1.2 属性类型（数据属性，访问器属性）

1.2.1 数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性：

[[Configurable]] : 是否允许通过delete将属性删除，能够改变属性的特性，或能否将属性改为访问器属性，默认为true；

[[Enumerable]]：设置能否用for-in循环返回属性，默认为true；

[[Writable]]：设置能否修改属性，默认为true；

[[Value]]：设置属性的值，默认为undefined；

/**
 *
 * [[configurable]]
 */
var obj_1 = {};
Object.defineProperty(obj_1,'name',{
    value : '张三',
    configurable : true
});
console.log(obj_1);
Object.defineProperty(obj_1,'name',{
    value : 'lisi',
    configurable : false
});
console.log(obj_1);
Object.defineProperty(obj_1,'name',{  //之前configurable设置为false，这里会抛出错误
    value : 'wangwu',
    configurable : true
});
console.log(obj_1);

/**
 * [[Enumerable]]
 */
var obj_2 = {};
var str = '';
Object.defineProperty(obj_2,'name',{
    enumerable : false,
    value : 'zhangsan'
});
Object.defineProperty(obj_2,'age',{
    enumerable : true,
    value : 18
});
for(var i in obj_2){
    str+='---'+obj_2[i];   //name的enumerable为false,则不能被循环出来
}
console.log(str);   //---18

/**
 * [[Writable]]
 */
var obj_3 = {};
Object.defineProperty(obj_3,'name',{
    writable : true,
    value : 'zhangsan'
});
Object.defineProperty(obj_3,'age',{
    writable : false,
    value : 18
});
console.log(obj_3);   //{name: "zhangsan", age: 18}
obj_3.name = 'lisi';
obj_3.age = 28;  //age 的writable为false,不能修改
console.log(obj_3);  //{name: "lisi", age: 18}

1.2.2 访问器属性

4个特性：

[[Configurable]] ：是否允许通过delete将属性删除，能够改变属性的特性，或能否将属性改为数据属性，默认为true；

[[Enumerable]]：能够通过for-in循环属性，默认为true；

[[Get]]：在读取属性时调用，默认值为：undefined；

[[Set]]：在写入属性时调用，默认值为：undefined；

/**
     *
     * [[configurable]]
     */
    var obj_1 = {
        _year : 2018,
        con : 1,
//        _name : 'lisi'
    };
    Object.defineProperty(obj_1,'year',{
        get : function () {
            console.log('调用了取得年');
            return this._year;
        },
        set :function (newYear) {
            console.log('调用了设置年');
            this._year = newYear;
            this.con = newYear-2018;
        }
    });

    Object.defineProperty(obj_1,'name',{
        configurable : true,
        get : function () {
            console.log('取得名字');
            return this._name;
        },

        set : function (newName) {
            console.log('设置了名字');
            this._name = newName;
        }
    });

    console.log(obj_1.name);  //undefined
    obj_1.name = 'zhangsan';
    console.log(obj_1.name);  //zhangsan
    console.log(obj_1._name);  //zhangsan
    console.log('------------');
    delete obj_1.name;
    console.log(obj_1.name);  //undefined  configurable为true时，obj_1.name为undefined，为false时，obj_1.name为zhangsan
    console.log(obj_1._name);  //zhangsan

/**
     * [[Enumerable]]
     */
    var obj_1 = {
        _year : 2018,
        con : 1,
//        _name : 'lisi'
    };
    Object.defineProperty(obj_1,'year',{
        get : function () {
            console.log('调用了取得年');
            return this._year;
        },
        set :function (newYear) {
            console.log('调用了设置年');
            this._year = newYear;
            this.con = newYear-2018;
        }
    });

    Object.defineProperty(obj_1,'name',{
        enumerable : false,
        get : function () {
            console.log('取得名字');
            return this._name;
        },

        set : function (newName) {
            console.log('设置了名字');
            this._name = newName;
        }
    });

    obj_1.name = 'zhangsan';

    for(var i in obj_1){
        console.log(i+'------'+obj_1[i]);
    }

1.3 定义多个属性 ----Object.definedProperties();

该方法有两个对象参数，第一个对象是要添加和修改其属性的对象，第二个对象对象的属性与第一个对象要添加的或修改的属性一一对应；

var obj = {};
Object.defineProperties(obj,{
    //数据属性
    name : {
        writable : true,
        value : 'zhangsan'
    },
    age : {
        value : 25
    },

    //访问器属性
     year : {
        get : function () {
            console.log('取得年');
            return this._year;
        },
         set : function (newYear) {
             console.log('设置年');
             this._year = newYear;
         }
     }
});
console.log(obj);  //{name: "zhangsan", age: 25}
obj.year = 2058;
console.log(obj);  //{_year: 2058, name: "zhangsan", age: 25}

1.4 取得属性特性 ------Object.getOwnpropertyDescritor()

传两个参数，属性的所在对象和要读取其描述符的属性名称。返回一个对象。在js中，对任意对象都可以用，包括BOM，DOM。

var obj = {};
Object.defineProperties(obj,{
    //数据属性
    name : {
        writable : true,
        value : 'zhangsan'
    },
    age : {
        value : 25
    },

    //访问器属性
     year : {
        get : function () {
            console.log('取得年');
            return this._year;
        },
         set : function (newYear) {
             console.log('设置年');
             this._year = newYear;
         }
     }
});
obj.year = 2025;

var descriptor_1 = Object.getOwnPropertyDescriptor(obj,'name');
console.log(descriptor_1);  //{value: "zhangsan", writable: true, enumerable: false, configurable: false}
var descriptor_2 = Object.getOwnPropertyDescriptor(obj,'year');
console.log(descriptor_2);  //{get: ƒ, set: ƒ, enumerable: false, configurable: false}
console.log(descriptor_2.get());  //undefined   因为get只是一个指向getter的函数指针