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

Object.is(v1, v2)

判断2个数据是否完全相等

let Obj1 = {
    name: 'huang'
  }
  let Obj2 = {
    name: 'huang'
  }
  console.log(0 == -0) // true
  console.log(NaN == NaN) // false NaN跟任何数据都不相等
  console.log(Object.is(0, -0)) // false
  console.log(Object.is(NaN, NaN)) // true
  console.log(Object.is(Obj1, Obj2)) // false

Object.assign(target, source1, source2..)
将源对象的属性复制到目标对象上

let Obj1 = {
    name: 'huang'
  }
  let Obj2 = {
    name: 'liu'
  }
  let Obj3 = {}

  // 第一个是目标对象，第二个开始就要复制属性的对象
  // 如果复制的属性有重复的情况，那么结果是最后一个对象的属性
  Object.assign(Obj3, Obj1, Obj2)

  console.log(Obj3) // {name: "liu"}

直接操作 __proto__ 属性

let Obj1 = {
    moneny: 30000
  }
  let Obj2 = {}

  Obj2.__proto__ = Obj1 // 表示的是obj1是obj2的原型

  console.log(Obj2) //他还是个空对象，但是会有obj1的原型
  console.log(Obj2.moneny) // 能够获取到obj1原型下的moneny属性的值

秒客网

ES5-ES6-ES7_对象的扩展

相关文章