美文网首页
javascript 对象属性

javascript 对象属性

作者: 请输入其他名字 | 来源:发表于2016-12-23 13:44 被阅读10次

    先举个栗子(~ ̄▽ ̄)~
    在js中为一个对象添加属性我们可以这样

    var Person = {};
    Person.name = 'zane';
    
    // 等价于
    var Person = {
      name = 'zane'
    }
    

    javascript对象的属性可以分为两类:
    (1)数据属性:包含一个数据值得位置,在这个位置可以读取和写入值。有4个特性:

    configrable:  true/false; //能否通过delete删除
    enumerable: true/false; //能否通过for-in返回
    writable: true/false; //能否修改
    value:值
    

    (2)访问器属性:访问器属性不包含值得位置,而是包含一对getter、setter函数,取值和赋值是通过这对函数操作。同样有四个特性:

    configrable:  true/false; //能否通过delete删除
    enumerable: true/false; //能否通过for-in返回
    get //读取属性时调用函数  默认值:undefined
    set //写入属性时调用函数  默认值:undefined
    

    configrable/
    可以看出上面例子中Person的name属性是直接赋值的,所以是数据属性,
    数据属性可以直接定义,而访问器属性不能直接定义。

    接下来说明一下在JavaScript中如何使用上面说的几种特性
    Object.defineProperty(obj, 'property', {})

    /* 数据属性*/
    var Person = {};
    Object.defineProperty(Person, 'name', {
        configurable: false,
        writable: false,
        enumerable: true,
        value: 'Zane'
    });
    console.log("原name: "+Person.name);  // 原name: Zane
    Person.name = "xiaoming";
    console.log("更改后name: "+Person.name); // 更改后name: Zane
    delete Person.name;
    console.log("删除后name: "+Person.name); // 删除后name: Zane
        
    for(var key in Person) {
        console.log(key);
    }
    // name
    
    /* 访问器属性 */
    var Book = {
        _year: 2014,
        edition: 1
    }
    Object.defineProperty(Book, 'year', {
        get: function () {
            return this._year;
        },
        set: function (value) {
            if(value > 2014) {
                this._year = value;
                this.edition = value - 2014 + 1;
            }
        }
    })
    Book.year = 2016;
    console.log(Book); // Object {_year: 2016, edition: 3}
    

    如何同时定义多个属性呢

    var Book = {};
    Object.defineProperties(Book, { // 注意是复数 defineProperties
        _year: {
            value: 2014
        },
        edition: {
            writable: true,
            value: 1
        },
        year: {
            get: function () {
                return this._year;
            },
            set: function (value) {
                if(value > 2014) {
                    this._year = value;
                    this.edition = value - 2014 + 1;
                }
            }
        }
    });
    var descriptor = Object.getOwnPropertyDescriptor(Book, '_year');
    console.log(descriptor.writable);  // fales
    

    相关文章

      网友评论

          本文标题:javascript 对象属性

          本文链接:https://www.haomeiwen.com/subject/ymrkvttx.html