对象的扩展----ES6重刷09

对象扩展
一、属性简洁表示

const a = 'a'
const b = () => 'b'
const obj = {a, b}
console.log(obj) // {a: "a", b: ƒ}

二、属性名表达式

let obj = {}
const variable = 'b'
obj.a = 'a'
obj[variable] = 'b'
console.log(obj) // {a: "a", b: "b"}

三、属性特性 — 可配置性(configurable)、可枚举性(enumerable)、可重写性(writable)
首先我们可以通过Object.getOwnPropertyDescriptor(objectName, attrName)得知对应属性的的相关各项信息，如

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "a", writable: true, enumerable: true, configurable: true}

1、可配置性(configurable)作用
当configurable为true时，我们可以使用Object.defineProperty(objectName, attrName, config…)

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "a", writable: true, enumerable: true, configurable: true}
Object.defineProperty(obj, 'a', {
  value: '111',
  writable: true,
  enumerable: true,
  configurable: false,
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "111", writable: true, enumerable: true, configurable: false}
console.log(obj) // {a: "111", b: "b", c: "c"}

当configurable为false时，我们就不可以对相应的属性使用Object.defineProperty(objectName, attrName, config…)

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "a", writable: true, enumerable: true, configurable: true}
Object.defineProperty(obj, 'a', {
  value: '111',
  writable: true,
  enumerable: true,
  configurable: false,
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "111", writable: true, enumerable: true, configurable: false}
Object.defineProperty(obj, 'a', { // Cannot redefine property: a
  value: '111',
  writable: true,
  enumerable: true,
  configurable: true,
})

注意：可配置性(configurable)的修改时单向性的，即当我们修改configurable为false后，就无法更改为true

2、可枚举性(enumerable)作用

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
}
for ( const item in obj ) {
  console.log(item) // a b c
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "a", writable: true, enumerable: true, configurable: true}
Object.defineProperty(obj, 'a', {
  value: '111',
  writable: true,
  enumerable: false,
  configurable: true,
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "111", writable: true, enumerable: false, configurable: true}
for ( const item in obj ) {
  console.log(item) // b c
}

适用场景：禁止对象中某些元素的可枚举性，实现遍历枚举对象时，避免枚举没必要的属性数据

3、可重写性(writable)作用

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "a", writable: true, enumerable: true, configurable: true}
Object.defineProperty(obj, 'a', {
  value: 'a',
  writable: false,
  enumerable: true,
  configurable: true,
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "111", writable: false, enumerable: true, configurable: true}
console.log(obj) // {a: "a", b: "b", c: "c"}
obj.a = 'abc'
console.log(obj) // {a: "a", b: "b", c: "c"}

适用场景： 冻结对象中的某个属性值

4、Object.freeze(objectName)

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
}
Object.freeze(obj)
console.log(Object.getOwnPropertyDescriptor(obj, 'a')) 
// {value: "a", writable: false, enumerable: true, configurable: false}

注意：冻结的是整个对象，并且冻结每个属性对应的可配置性(configurable)和可重写性(writable)

四、super关键字【指向的是对象的原型对象】

const proto = {
  foo: 'proto',
}
const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
  find(){
    console.log(super.foo) // proto
    super.foo
  }
}
Object.setPrototypeOf(obj, proto)
obj.find()

五、对象的扩展运算符及解构解析【在此就不多加累述了】