关于javascript:深入理解js对象

定义对象

两种形式定义对象

let person = new Object()
obj.name = '蛙人'
obj.age = 23
obj.sex = 'male'
obj.getAge = function() {return this.age}

下面的例子创立了一个 person 对象实例，并为它增加了属性及办法, 在晚期 js 开发人员常常应用这种形式，然而当初对象字面量成了首先形式，看一下字面量定义对象。

let person = {
    name: '蛙人',
    age: 23,
    sex: 'male',
    getAge() {return this.age}
}

能够看到下面这种应用字面量的形式定义对象更加简洁明了, 字面量的形式跟第一种定义形式是一样的。

属性类型

在说数据属性时，咱们先来讲一下 js 里的外部属性, 在 Es5 版本中，在定义只有外部才用的个性 attribute 时，形容了属性 property 的各种
特色, 定义这些个性是为了实现 js 引擎用的，因而在 js 里无法访问外部属性，外部属性是两个中括号括起来的例如 [[Enumerable]]。

数据属性

数据属性蕴含一个数据值的地位，在这个地位能够进行读取和写入值，那么这就是数据属性形容对象。

• [[Configuralbe]] : 示意是否能够 delete 删除该属性，是否能在对象上定义其它属性，是否能批改属性值，默认返回 true。
• [[Enumerable]]：示意是否能够枚举该属性for in, 默认返回 true。
• [[Writeable]] : 示意是否能够读写改属性，默认返回 true。
• [[Value]] : 示意属性值的地位，每次读取属性的时，从这个 [[Value]] 外部属性返回值，写入属性值的时候，把值保留在这个地位，默认返回 undefined，这也就是咱们所读取对象上不存在的属性时，返回 undefined 的起因。

实践讲完了，那么间接上代码一把梭

[[Value]]

let person = {name: '蛙人'}

下面 example 中定义属性 name，为它的值默认 “蛙人” 也就是说，在外部属性 [[Value]] 中保留了该值, 从这点咱们明确，只有是对象中批改或写入值，都会触发外部属性 [[Value]]。

批改属性形容对象

如果要批改数据属性的形容对象，应用 Es5 中 Object.defineProperty() 办法，这个办法接管三个参数，指标对象、要拜访的属性、属性的形容对象，形容对象必须是: configurable、enumerable，writeable、value, 设置其中一或多属性，能够批改对应的形容属性值。

let person = {}
Object.defineProperty(person, 'name', {
    writeable: false, // 不能写入
        value: '你没有 permission'
})

console.log(person.name) // 你没有 permission
person.name = "蛙人"
console.log(person.name) // 你没有 permission

在下面 example 中，咱们设置了 person 对象形容对象为只读不可写，又为它设置了 value 属性，所以不论它怎么读取都返回 你没有 permission，怎么写都不能够，须要留神的是下面代码在严格模式下会抛出谬误，在非严格模式下赋值操作则会疏忽 ， 而且更为重要的一点，Object.defineProperty 第三个参数必须写，不然 code 报错

拜访器属性

数据拜访器属性不蕴含数据值, 他们蕴含一对 getter 和 setter 函数 (这两个函数不是必须的 可选)。

在读取拜访器属性时，会调用 getter 函数，在写入拜访器属性时，会调用 setter 函数，函数接管一个参数这个参数就是写入的值。

• [[get]]：在读取属性时调用的函数，默认返回 undefined
• [[set]]：在写入属性时调用的函数，默认返回 undefined

拜访器属性不能间接定义，应用 Object.defineProperty()，请看上面 example

let person = {
    _age: 23,
    name: '蛙人'
}

Object.defineProperty(person, "age", {get() {return this._age},
    set(val) {this._age = val}
})
person.age = 24

下面 example 中，写入 age 属性就会触发拜访器对象里的 set 函数，从而从新赋值，而后触发 get 办法，返回该属性值，下面应用了_age 这种定义形式示意为罕用的 mark，示意只能通过对象办法拜访的属性, 不要间接写在 get 函数返回里返回本身 如：this.age = xxx 这样会造成堆栈溢出

定义多个形容属性

Es5 版本中还有一个 Api 办法是定义多个对象写入形容属性, 该办法接管 2 个参数，指标对象、属性值，请看下列 example

let person = {}
Object.defineProperties(person, {
    _age: {value: 23},
    name: {value: "蛙人"},
    age：{get() {return this._age},
        set(val) {this._age = val;}
    }
})

下面 example 与 上一个 example 都是同样的代码成果，只不过定义形式不同，该办法不常常应用，大家晓得就好。

获取对象的形容属性

Es5 版本中定义了一个 Api 办法能够查看以后对象的形容属性，Object.getOwnPropertyDescriptor(), 该办法接管 2 个参数,指标对象、属性值。

let person = {age: 23}
let descriptor = Object.getOwnPropertyDescriptor(person, "age")
console.log(descriptor.writable)  // true
console.log(descriptor) // {"value":23,"writable":true,"enumerable":true,"configurable":true}

下面 example 中能够分明的看见以后的对象属性的形容对象，这样在呈现 bug 的时候，咱们也能够查看以后的形容属性是否能够更改，疾速定位 bug，在 js 中能够针对任何对象应用 Object.getOwnPropertyDescriptor(), 包含 BOM 和 DOM 对象，兼容 IE9 +、Firefox4+、Safari5+、Opera12+、Chrome。

如果该文章对你有帮忙，请点个赞吧