javascript Object构造函数常用方法使用总结——Object.assign、Object.defineProperty、Object.keys、Object.value

javascript Object常用方法使用总结

1、Object构造函数-继承

-只有构造函数才有prototype属性

-js每个对象都有一个__proto__属性 === 构造函数的prototype属性

objectInherit() {
      function conObj () {}
      conObj.prototype.age = '12'
      let newPreObj = new conObj()
      console.log(newPreObj.age) // 12
      console.log(newPreObj.__proto__ === conObj.prototype) // true
    },

2、Object.assign()-用于将一个或者多个对象的可枚举的值从源对象复制到目标对象。返回目标对象

 testForObjectAssign() {
      let target = {name: 'xiaomin'}
      let source = {age: '14',name:'hua'}  // 如果目标对象中有相同的属性，源对象的属性值将覆盖目标对象的属性值（name:'xioamin'>'hua'）
      const finalObj = Object.assign(target, source) 
      console.log(target, finalObj) // {name: 'hua', age: '14'}
      // 关于可枚举属性值
      // for-in无法遍历出来的属性-不可枚举
      let obj1 = {a:1,b:2,c:{d:3}}
      for(let key in obj1) {
        console.log(key) // a b c
      }
      let finalObj2 = Object.assign({}, obj1)
      obj1.a = 5
      finalObj2.b = 6
      obj1.c.d = '4'
      // 可枚举出来的属性值相当于深拷贝，{d:4}是不可枚举的属性；所以Object.assign并不能完全的用于深拷贝
      console.log(obj1)  // {a:5,b:2,c:{d:4}}
      console.log(finalObj2) // {a:1,b:2,c:{d:4}}
    },

3、Object.defineProperty()-用于直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

    // Object.defineProperty()用于直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
    testForObjectDefineProperty() {
      let obj1 = {
        name: 'xiaomin'
      }
      // 新增age属性
      Object.defineProperty(obj1, 'age', {
        value: '12', // value:数据描述符
        writable: false, // 数据描述符；writable:false情况下（即默认情况下），使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的
        enumerable: true, // enumerable:true（默认false）时，新增的属性时可枚举属性
        configurable: true // configurable:tue（默认值为false)，属性描述值可修改
      })
      // 修改name属性
      Object.defineProperty(obj1, 'name', {
        value: 'xiaohua'
      })
      // 属性描述值修改-configurable：true
      Object.defineProperty(obj1, 'age', {
        writable: true
      })
      // obj1.age = '14'
      for(let key in obj1) {
        console.log(key, '枚举出来的属性') 
        // enumerable：true
        // name 枚举出来的属性
        // age 枚举出来的属性
        // enumerable：false
        // name 枚举出来的属性
      }
      console.log(obj1)  // {name: 'xioahua', age: '12'}

      // Object.defineProperty的存取描述符get()和set()方法
      // testDate-newobject.num的值会互相影响（vuejs双向绑定的原理）
      let newobject = {}
      let testDate = 88
      Object.defineProperty(newobject, 'num', {
        get(){return testDate},
        set(val){
           testDate = val
        },
        enumerable: true,
        configurable: true
      })
      newobject.num = '000'  // 数据的双向绑定
      console.log(newobject.num, testDate)
    },

4、Object.keys()、Object.values()

 Object.keys()返回一个指定对象可枚举属性的属性名组成的数组

 Object.values()返回一个指定对象可枚举属性的属性值组成的数组

// 可用于判断对象是否为空
    testForObjectkeys() {
      let myObj = {name:'xioamin', age:'12'}
      console.log(Object.keys(myObj)) // ["name", "age"]
      console.log(Object.values(myObj)) // ["xiaomin", "12"]
    }