ES5 中对象方法扩展：Object.create()、Object.defineProperties()、对象本身的 get 与 set 详解

Object.create()

Object.create(prototype[, descriptors]) 以指定的对象为原型创建新的对象。

• prototype: 新建对象的原型对象，即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。

• propertiesObject : 添加到新创建对象的可枚举属性（即其自身的属性，而不是原型链上的枚举属性）

  • 用该参数来创建非空对象的属性描述符默认是为false的（可读；不可写、不可枚举、不可配置），而构造函数或字面量方法创建的对象属性的描述符默认为true。

• 返回值：在指定原型对象上添加新属性后的对象。

  详细示例：

  var obj = {name: "妲己", gender: 'girl',  e}
  var newObj = {}
  // 以 obj 为原型创建了一个新的对象，且添加了新的属性
  newObj = Object.create(obj, {
      age: {
          // 设置属性值
          value: 1000,
          // 设置属性可修改，默认不可修改（false）
          writable: true,
          // 设置当前属性可删除(可配置)，默认不可删除
          configurable: true
          // 设置当前属性可以被 for in 枚举，默认不可枚举
          enumerable: true
      },
      /* 该属性默认不可写、不可枚举、不可配置 */
      nickname: {
          // 属性值
          value: '柔柔'
      }
  })
  console.log(newObj.age)
  newObj.age = 369
  console.log(newObj.age)
  /*
  // 删除 newObj 的 age 属性
  delete newObj.age
  console.log(newObj.age)
  */
  // 遍历 newObj 的属性
  for (var item in newObj) {
      console.log(item)
  }
  

  输出的结果：

  {age: 1000, nickname: "柔柔"}
  1000
  999
  age
  name
  gender
  maritalStatus
  

Object.defineProperties()

Object.defineProperties(obj, props) 直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

• obj 需要定义或修改属性的对象。

• props 要定义其可枚举属性或修改的属性描述符的对象，该对象的一个或多个键值对，定义了将要为 obj 对象添加或修改的属性的具体配置。

  • 描述符具有以下键值

  configurable enumberable value writable get set

  get 获取当前属性值的回调函数，获取当前属值时就会触发该回调函数。

  set 监听当前属性值，当属性值发生变化时会触发该回调函数，并且函数唯一的参数即为修改后的值。

  补充： 存取器属性：setter 用来存值，getter 用来取值。

  示例：

  var obj = {uname: "妲己", gender: 'girl', maritalStatus: false}
  Object.defineProperties(obj, {
      nameAndGender: {
          // 获取扩展属性的值；在获取扩展属性的值时才会调用该方法（惰性求值）
          get: function () {
              return this.uname + ',' + this.gender
          },
          // 监听扩展属性，当扩展属性发生变化时会自动调用；自动调用后会将变化的值传入 set 函数；（该方法将接受唯一参数，即该属性新的参数值）
          set: function (data) {
              // 处理传入的值
              var keyValue = data.split(',') // 将值转成 数组
              // 修改 this 指向的对象的属性值
              this.uname = keyValue[0]
              this.gender = keyValue[1]
          }
      }
  })
  
  console.log(obj.nameAndGender)
  obj.nameAndGender = "小乔" + ',' + "女孩"
  console.log(obj.nameAndGender)
  console.log(obj.uname)
  

  执行结果：

  妲己,girl
  小乔,女孩
  小乔
  

对象本身的 get 与 set

• get propertyName(){} 获取当前属性值的回调函数。

• set propertyName() {} 监听当前属性值变化的回调函数。

  示例：

  var obj = {
      uname: "妲己",
      gender: 'girl',
      maritalStatus: false,
  
      get nameAndGender() {
          return this.uname + ',' + this.gender
      },
      set nameAndGender(data) {
          var keyValue = data.split(',') // 将值转成 数组
          // 修改 this 指向的对象的属性值
          this.uname = keyValue[0]
          this.gender = keyValue[1]
      }
  }
  
  console.log(obj.nameAndGender)
  obj.nameAndGender = "小乔" + ',' + "女孩"
  console.log(obj.nameAndGender)
  console.log(obj.uname)
  

  执行结果：

  妲己,girl
  小乔,女孩
  小乔