Object的几个方法（defineProperty,hasOw

1、defineProperty

let obj = {
    name:"诸葛钢铁",
    age:"18"
}
Object.defineProperty(obj,"idno",{
    value:"15089",//简单点就是 设置属性的值
    writable:false,//是否可操作属性值,默认值false
    configurable:false,//是否可修改配置configurable如果值为false descriptor内的属性都不可操作），默认值false
    enumerable:false//是否可枚举，默认值false。Object.keys()获取的是可枚举的，Objec.getOwnPropertyNames()获取的是所有的值。
})

使用Object.defineProperty() 定义对象属性时，如已设置 set 或 get, 就不能设置 writable 和 value 中的任何一个了，不然会报错。

• writable

let obj = {
    name:"诸葛钢铁",
    age:"18"
}
Object.defineProperty(obj,"idno",{
     value:"15089",
     writable:false,//不能修改
     configurable:false,
     enumerable:false
})
try{
    obj.idno = "111"
}catch{ }
console.log(obj) //{name:"诸葛钢铁",age:"18",idno:"15089"}

• configurable

let obj = {
    name:"诸葛钢铁",
    age:"18"
}
Object.defineProperty(obj,"idno",{
     value:"15089",
     writable:false,
     configurable:false,//控制descriptor内属性都不可改变
     enumerable:false
})
try{
    Object.defineProperty(obj,"idno",{
        writable:true
    })
}catch{ }
console.log(Object.getOwnPropertyDescriptor(obj,'idno'))
//{configurable: false,enumerable: false,value: "15089",writable: false}

• enumerable

let obj = {
    name:"诸葛钢铁",
    age:"18"
}
Object.defineProperty(obj,"idno",{
     value:"15089",
     writable:false,
     configurable:false,//控制descriptor内属性都不可改变
     enumerable:false//是否可枚举
})

console.log(Object.keys(obj))
//{name:"诸葛钢铁",age:"18"}

其实defineProperty和set,get就是vue3.0前双向绑定原理的实现

//html
<input type="text">
//js
let obj = {}
/**
*obj      要劫持的对象
*name     要劫持对象的属性
*callback 劫持以后的操作
*/
function watch(obj, name, callback) {
    let value = obj.name
    Object.defineProperty(obj, name, {
        set(msg) {
            // 触发setter给obj赋值
            value = msg
            //执行劫持后的操作
            callback(value)
        },
        get() {
            //返回获取属性值
            return value
        }
    })
}
function doSomething(value) {
    document.querySelector('div').innerHTML = value
    document.querySelector('input').value = value
}
//监听input变化 
document.querySelector('input').addEventListener('input', (e) => {
    obj['msg'] = e.target.value
})
watch(obj, 'msg', doSomething)

2、hasOwnProperty

Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

var obj = {
    aa:"111"
}
console.log(obj.hasOwnProperty("aa"))//true
console.log(obj.hasOwnProperty("toString"))//false

3、defineProperties

同defineProperty

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
});

4、getPrototypeOf和isPrototypeOf

getPrototypeOf此方法可以获取指定对象的原型对象
isPrototypeOf方法用于测试一个对象是否存在于另一个对象的原型链上。

function Person(){
  this.name="123";
  this.nofg="11";
}
Person.prototype={
  age:3,
  address:"sdag"
}
let person=new Person();
console.log(Object.getPrototypeOf(person).age);//3
console.log(Person.prototype.isPrototypeOf(person));//true

5、getOwnPropertyNames

列出一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。
区别于Object.keys()。

var aa = {
    name:"123",
    age:17
}
Object.defineProperty(aa,"idno",{
    value:"1234"//不可枚举的
})
console.log(Object.getOwnPropertyNames(aa))//["name", "age", "idno"]

6、getOwnPropertyDescriptor和getOwnPropertyDescriptors

getOwnPropertyDescriptors方法用来获取一个对象的所有自身属性的描述符。
getOwnPropertyDescriptor方法用来获取一个对象的指定属性的描述符。

var aa = {
    name:"123",
    nofg:11
}
console.log(Object.getOwnPropertyDescriptor(aa,"name"));
console.log(Object.getOwnPropertyDescriptors(aa));

image.png