JavaScript对象增强知识

1. 属性描述符

• 对一个属性进行比较精准的操作控制，可以使用属性描述符

  • 通过属性描述符可以精准的添加或修改对象的属性

  • 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改

• Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

  • 可接收三个参数：

    • obj要定义属性的对象
    • prop要定义或修改的属性的名称或 Symbol
    • descriptor要定义或修改的属性描述符

  • 返回值：

    • 被传递给函数的对象

• 属性描述符的类型有两种：

  • 数据属性（Data Properties）描述符（Descriptor）

  • 存取属性（Accessor访问器 Properties）描述符（Descriptor）

  

2. 数据属性描述符

• configurable：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符

  • 直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true

  • 通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false

• enumerable：表示属性是否可以通过for-in或者Object.keys()返回该属性

  • 在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true

  • 通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false

• writable：表示是否可以修改属性的值

  • 直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true

  • 通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false

• value：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改，默认情况下为undefined

  var obj = {
    name: "lilei", // configurable: true
    age: 18
  }
  
  Object.defineProperty(obj, "name", {
    configurable: false, // 告诉js引擎, obj对象的name属性不可以被删除
    enumerable: false, // 告诉js引擎, obj对象的name属性不可枚举(for in/Object.keys)
    writable: false, // 告诉js引擎, obj对象的name属性不写入(只读属性 readonly)
    value: "hanmeimei" // 告诉js引擎, 返回这个value
  })
  
  delete obj.name
  console.log(obj)
  
  // 通过Object.defineProperty添加一个新的属性
  Object.defineProperty(obj, "address", {})
  delete obj.address
  console.log(obj) // {age: 18, name: 'hanmeimei', address: undefined}
  
  console.log(Object.keys(obj)) // ['age']
  
  obj.name = "lili"
  console.log(obj.name)
  

3. 存取属性描述符

• configurable：同数据属性描述符

• enumerable：同数据属性描述符

• get：获取属性时会执行的函数，默认为undefined

• set：获取属性时会执行的函数，默认为undefined

  // vue2响应式原理
  var obj = {
    name: "zhangsan"
  }
  
  // 对obj对象中的name添加描述符(存取属性描述符)
  var _name = ""
  Object.defineProperty(obj, "name", {
    configurable: true,
    enumerable: false,
    set: function(value) {
      console.log("set方法被调用了", value)
      _name = value
    },
    get: function() {
      console.log("get方法被调用了")
      return _name
    }
  })
  
  obj.name = "lisi"
  obj.name = "wangwu"
  obj.name = "zhaoliu"
  obj.name = "sunqi"
  
  // 获取值
  console.log(obj.name) // sunqi
  

4. 定义多个属性描述符

• Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象

  var obj = {
    name: "kobe",
    age: 18,
    height: 1.88
  }
  
  // Object.defineProperty(obj, "name", {})
  // Object.defineProperty(obj, "age", {})
  // Object.defineProperty(obj, "height", {})
  
  // 新增的方法
  Object.defineProperties(obj, {
    name: {
      configurable: true,
      enumerable: true,
      writable: false
    },
    age: {
    },
    height: {
    }
  })
  

5. 额外方法的补充

• 获取对象的属性描述符：

  • getOwnPropertyDescriptor

  • getOwnPropertyDescriptors

• 禁止对象扩展新属性：preventExtensions

  • 给一个对象添加新的属性会失败（在严格模式下会报错）

• 密封对象，不允许配置和删除属性：seal

  • 实际是调用preventExtensions

  • 并且将现有属性的configurable:false

• 冻结对象，不允许修改现有属性： freeze

  • 实际上是调用seal

  • 并且将现有属性的writable: false

  var obj = {
    name: "kobe",
    age: 24
  }
  
  // 1.获取属性描述符
  console.log(Object.getOwnPropertyDescriptor(obj, "name"))
  console.log(Object.getOwnPropertyDescriptors(obj))
  
  // 2.阻止对象的扩展
  Object.preventExtensions(obj)
  obj.address = "洛杉矶"
  console.log(obj) // {name: 'kobe', age: 24}
  
  // 3.密封对象(不能进行配置)
  Object.seal(obj)
  delete obj.name
  console.log(obj)
  
  // 4.冻结对象(不能进行写入)
  Object.freeze(obj)
  obj.name = "curry"
  console.log(obj)