JavaScript对象.png

JavaScript对象属性

简单理解对象

运行环境 node V10.16.3

对象属性

1. 数据属性
   数据属性包含一个数据值的位置，可以读取或写入值。
   • [[Configurable]]
     标识能否通过delete删除属性，从而定义新的属性；或者是能否把数据属性修改为访问器属性，默认为false，定义对象时用configurable
   • [[Enumerable]]
     代表能否通过for-in循环返回属性，默认为true，定义对象时用enumerable
   • [[Writable]]
     代表能否修改属性的值，默认为true，定义对象时用writable
   • [[Value]]
     包含着这个属性的值，默认为undefined，定义对象时用value
     应用场景：

var person = {}
Object.defineProperty(person, 'name', {
    writable: true,
    enumerable: false,
    value: 'tolerious'
})
Object.defineProperty(person, 'age', {
    writable: true,
    enumerable: true,
    value: 12
})
Object.defineProperty(person, 'job', {
    configurable: false,
    writable: false,
    enumerable: true,
    value: 'engineer'
})
Object.defineProperty(person, 'sex', {
    configurable: true,
    writable: true,
    enumerable: true,
    value: 'female'
})
for (let x in person) {
    console.log(x)
}
console.log(person)
person.job = 'teacher'
person.sex = 'male'
console.log(person)
delete person.age
delete person.job
delete person.sex
console.log(person)
运行结果:
age
job
sex
{ age: 12, job: 'engineer', sex: 'female' }
{ age: 12, job: 'engineer', sex: 'male' }
{ age: 12, job: 'engineer' }

• 在for in 循环中name属性被屏蔽了，age被打印了出来;age的configurable为true，所以用delete就将其在对象中删除了，

2.访问器属性
该属性，不包含数据值，包含一对儿getter和setter函数，但不是必需。

• [[Configurable]] 与数据属性相同
• [[Enumerable]] 与数据属性相同
• [[Get]] 读取属性时会被调用，默认值为undefined
• [[Set]] 写入属性时被调用，默认值是undefined
  应用场景：

var person = {
    _age: 20,
    _job: 'engineer'

}
Object.defineProperty(person, 'age', {
    get: function () {
        return this._age
    },
    set: function (val) {
        this._age = val
    }
})
Object.defineProperty(person, 'job', {
    get: function () {
        return this._job
    }
})
console.log(person)
person.age = 15
person.job = 'teacher'
console.log(person)
运行结果：
{ _age: 20, _job: 'engineer' }
{ _age: 15, _job: 'engineer' }

通过定义age的访问器属性get,set从而对person的内部变量_age进行值的读取与赋值。
getter与setter可不同时进行定义，如果只定义getter则意味着该属性时不能进行赋值操作。
每定义一个属性就要用defineProperty是比较繁琐的，所以可以用defineProperties来同时定义多个属性。

var person = {}
Object.defineProperties(person, {
    _year: {
        writable: true,
        value: 2020,
        enumerable: true
    },
    year: {
        get: function () {
            return this._year
        },
        set: function (val) {
            this._year = val
        }
    }
})
console.log(person)
person.year = 2021
console.log(person)
运行结果：
{ _year: 2020 }
{ _year: 2021 }

通过getOwnPropertyDescriptor()方法我们可以获取给定属性的描述符，就可以知道该属性时数据属性还是访问器属性了。

var person = {}
Object.defineProperties(person, {
    _year: {
        writable: true,
        value: 2020,
        enumerable: true
    },
    year: {
        get: function () {
            return this._year
        },
        set: function (val) {
            this._year = val
        }
    }
})
console.log(person)
person.year = 2021
console.log(person)
console.log(Object.getOwnPropertyDescriptor(person,"_year"))
console.log(Object.getOwnPropertyDescriptor(person,"year"))
运行结果：
{ _year: 2020 }
{ _year: 2021 }
{ 
  value: 2021,
  writable: true,
  enumerable: true,
  configurable: false 
}
{
  get: [Function: get],
  set: [Function: set],
  enumerable: false,
  configurable: false 
}