ES5-ES6-ES7_对象的扩展

简化的对象写法

省略同名的属性值，省略方法的function

let x = 1;
  let y = 2;
  let point = {
    x,
    y,
    setX (x) {
      this.x = x
    }
  };
  console.log(point)

Object.create(prototype, [descriptors])

以指定对象（prototype）为原型创建新的对象，为新的对象指定新的属性, 并对属性进行描述（descriptors）

- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除默认为false
- enumerable：标识当前属性是否能用for in 枚举默认为false

var obj1 = {
    name: 'huang',
    age: 13
  }
  var obj2 = {}
  obj2 = Object.create(obj1, {
    sex: {
      value: '男',
      writable: true
    }
  });
  console.log(obj2)
  console.log(obj1)

  // 以obj1为原型创建的对象obj2，是不能继承obj1对象下的属性的，在obj2中作为原型存在
  // 可以获取到并且可以修改
  console.log(obj2.name) // huang
  obj2.name = 'liu'
  console.log(obj2.name) // liu

  // 新增的属性，进行操作的时候要看创建的时候是怎么描述的，可不可以修改，删除等
  console.log(obj2.sex) // 男
  delete obj2.sex // 运行结果没有删掉，是因为创建这个属性的时候默认是不可以删除的

Object.defineProperties(object, descriptors)
为指定对象定义扩展多个属性
get ：用来获取当前属性值得回调函数（当获取扩展属性的时候会自动调用），set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
存取器属性：setter,getter一个用来存值，一个用来取值

var obj = {
    firstName: 'kobi',
    lastName: 'bulanen'
  }

  Object.defineProperties(obj, {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (data) { // 监听扩展属性，当扩展属性发生变化的时候会自动调用，自动调用的时候会将变化的值作为实际参数注入到set函数中
        var names = data.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  })

  console.log(obj)
  console.log(obj.fullName) //kobi bulanen
  obj.firstName = 'tim' // 原来的属性可以这样修改
  obj.lastName = 'can' // 扩展的属性也可以这样修改，但是这个属性扩展的时候必须要有set方法
  console.log(obj.fullName) //tim can

对象本身其实也有这个get和set方法

对象本身的两个方法
get propertyName(){} 用来得到当前属性值的回调函数
set propertyName(){} 用来监视当前属性值变化的回调函数

var obj = {
        firstName: 'kobi',
        lastName: 'bulanen',
        get fullName() {
            return this.firstName + ' ' + this.lastName
        },
        set fullName(data) {
            var names = data.split(' ')
            this.firstName = names[0]
            this.lastName = names[1]
        }
    }
    console.log(obj.fullName) //kobi bulanen

    obj.fullName = 'tim can' // 当对象没有set方法的时候是修改不成功的

    console.log(obj.fullName) // tim can

ES5-ES6-ES7_对象的扩展

猜你喜欢