javascript Object构造函数常用方法使用总结

  • A+
所属分类:Web前端
摘要

javascript Object常用方法使用总结1、Object构造函数-继承-只有构造函数才有prototype属性

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"]     }