javascript 对象属性

先举个栗子(~ ̄▽ ̄)~
在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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • ECMAScript 中有两种数据属性,分别是数据属性和访问器属性,下面来依次介绍。 1. 数据属性 数据属性有四...
    ghwaphon阅读 1,877评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,900评论 19 139
  • zfc. 我不爱你了。你看,下午还信誓旦旦的说爱你的人,不过倾刻间就改变了想法,是不是很可笑?其实我不是不爱你,而...
    今天以后阅读 1,891评论 0 1
  • 阳光温热,岁月静好,我能想到最浪漫的事就是陪你一起慢慢变老。我泪点太低了,一早被这两位老人感动的一塌糊涂! 世界上...
    食美者阅读 3,089评论 0 0
  • 公司最近盛行加班风,大家约好了似的,埋头苦干。中午不记得吃饭,下午不记得点下午茶,傍晚不记得回家。饶是深圳离厦门再...
    芳宝落落阅读 8,944评论 30 17

友情链接更多精彩内容