🔴JavaScript对象

创建对象

创建实例方式

const person = new Object()

person.name = '清山'
person.age = 20
person.say = function say() {
  console.log('你好!')
}

字面量方式

👍推荐的创建方式

const person = {
  name: '清山',
  age: 20,
  say() {
    console.log('你好!')
  }
}

属性配置

属性特性

使用字面量方式或新实例的方式无法直接配置对象属性的特性, 使用Object对象的defineProperty方法可以配置对象属性的特性.该方法会返回对象本身

Object.defineProperty(person, 'name', {
  value: 'Jonathan',
  writable: false,
  enumerable: false,
  configurable: false
})

• value: 属性值,不可写可编辑特性时可编辑特性来修改值
• writable: 属性值可写性
• enumerable: 属性是否参与迭代器
• configurable: 属性特性是否可编辑,是否可delete

访问器属性

通过defineProperty方法还可以为对象声明访问器属性(vue2响应式核心),使用访问器属性可以在属性值被读取/修改时执行一些其他操作

const person = Object.defineProperty({}, '_name', {
  value: 'Jonathan',
  writable: false,
  configurable: true,
})

Object.defineProperty(person, 'name', {
  set(value) {
    Object.defineProperty(person, '_name', {
      value,
    })
    console.log(`已修改名称为${value}`)
  },

  get() {
    return `我的名称为${this._name}`
  },

  configurable: true,
  enumerable: true,
})

使用Object的defineProperties方法可以同时声明多个属性

const person = Object.defineProperties(
  {},
  {
    _name: {
      value: 'Jonathan',
      writable: false,
      configurable: true,
    },

    name: {
      set(value) {
        Object.defineProperty(person, '_name', {
          value,
        })
        console.log(`已修改名称为${value}`)
      },

      get() {
        return `我的名称为${this._name}`
      },
    },
  }
)

也可用字面量方式声明访问器属性

const person = {
  _name: '',
  set name(value) {
    Object.defineProperty(person, '_name', {
      value,
    })
    console.log(`已修改名称为${value}`)
  },

  get name() {
    return `我的名称为${this._name}`
  },
}

Object.defineProperty(person, '_name', {
  value: 'Jonathan',
  writable: false,
  configurable: true,
})

读取属性特性

Object提供两个方法来查询属性的特性

• getOwnPropertyDescriptor()查看单个属性
• getOwnPropertyDescriptors()查看各个属性的特性不会获取深层属性特性

Object.getOwnPropertyDescriptor(person, 'name')
Object.getOwnPropertyDescriptors(person)

对象拷贝

浅拷贝

使用解构或Object.asign({}, src)均可快速的浅拷贝js对象

const src = {
  name: '清山',
  age: 18,
  other: {
    gender: 'male',
    address: 'China',
  },
}

const src2 = {
  ...src,
}

src2.other.address = 'Zhejiang Province'