【手撕JS】面对对象设计和原型链-属性(一)

302 阅读3分钟

灵魂问题 面向对象设计和原型链-程序都有对象,你有对象了吗? 要了解原型的先了解对象

对象

对象就是无序属性的集合

对象中的属性

属性有2种:数据属性和访问器属性

数据属性

数据属性包含一个数据值的位置。这个位置可以读取和写入数据。它有4个可配置的描述符分别为 1. configurable: 能否被delete删除这个数据,默认是true 2. enumerable: 能不能在在for in中获取到这个值,默认是true 3. writable: 能否修改这个值,默认是true 4. value: 这个值的数据是啥,默认是undefined

顶个栗子:

var Persion = {
  name: 'mars'
}

这里的Persion中的name就是一个数据属性,且[configurable],[enumerable],[writable]为默认值true,[value]为'mars'

上面的例子是直接定义的属性,如果需要修改属性特性,那么就要使用Object.defineProperty()和Object.defineProperties() 方法

Object.defineProperty() 和 Object.defineProperties()

Object.defineProperty()只能用于数据属性哟,它接收3个参数,分别为,对象,属性名,描述符(Configurable,Enumerable,Writable,Value)

Object.defineProperties() 接受2个参数 分别为,对象和要操作的数据

顶个栗子

// 创建一个对象
var Persion = {}
Object.defineProperty(Persion, "name", {
  // 配置描述符
  configurable: false, // 配置不能被delete删除
  enumerable: true, // 可以被遍历获取到key
  writable: false, //不能修改
  value: 'mars'
})
// 这个时候 Persion 为{name: "mars"}
// 尝试删除 name
delete Persion.name // 输出false
console.log(Persion) // {name: "mars"}
Persion.name = 'gg'
console.log(Persion) // {name: "mars"}

// 这里如果我们再配置一个值 让他不可以被获取到
Object.defineProperty(Persion, "age", {
  // 配置描述符
  configurable: false, // 配置不能被delete删除
  enumerable: false, // 不可以被遍历获取到key
  writable: false, //不能修改
  value: '25'
})
Object.keys(Persion) // ["name"]

// 这两个可以合并使用 defineProperties
Persion = {} //重新定义Persion

Object.defineProperties(Persion,{
   'name': {
      // 配置描述符
      configurable: false, // 配置不能被delete删除
      enumerable: true, // 可以被遍历获取到key
      writable: false, //不能修改
      value: 'mars'
   },
   "age": {
      // 配置描述符
      configurable: false, // 配置不能被delete删除
      enumerable: false, // 不可以被遍历获取到key
      writable: false, //不能修改
      value: '25'
   }
})

访问器属性

访问器属性不包含value值,但是有get和set函数 它有4个描述符

  1. configurable
  2. enumerable
  3. get
  4. set

小贴士 Vue 2.X 版本对象的双向数据绑定就是通过这个实现的哟 不顶个栗子,拿下来吃了

var Persion = {
  _name:'mars',
  age:'25'
}
Object.defineProperty(Persion, "name",{
   // 监听一下 get set
  get: function(){
     return this._name
  },
  set: function(newValue){
    // 这里展示一下 set可以自定义
    this._name = newValue
    this.age = '23'
  }
})

Persion.name = 'zy'
console.log(Persion)
// {_name: "zy", age: "23"}
Persion.name
// "zy"

读取属性的描述符

Object.getOwnPropertyDescriptor()方法可以完整的获取到给定的属性的描述符。需要传入2个参数,对象和属性名称

顶个李子

// 那上面的Persion 举例 不重复写了
var descriptor = Object.getOwnPropertyDescriptor(Persion, "_name");
console.log(descriptor)
// {value: "zy", writable: true, enumerable: true, configurable: true}

下一篇为设计模式