1、defineProperty

let obj = {
    name:"諸葛鋼鐵",
    age:"18"
}
Object.defineProperty(obj,"idno",{
    value:"15089",//簡單點就是 設置屬性的值
    writable:false,//是否可操作屬性值,默認值false
    configurable:false,//是否可修改配置configurable如果值為false descriptor內(nèi)的屬性都不可操作），默認值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內(nèi)屬性都不可改變
     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內(nèi)屬性都不可改變
     enumerable:false//是否可枚舉
})

console.log(Object.keys(obj))
//{name:"諸葛鋼鐵",age:"18"}

其實defineProperty和set,get就是vue3.0前雙向綁定原理的實現(xiàn)

//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) {
            // 觸發(fā)setter給obj賦值
            value = msg
            //執(zhí)行劫持后的操作
            callback(value)
        },
        get() {
            //返回獲取屬性值
            return value
        }
    })
}
function doSomething(value) {
    document.querySelector('div').innerHTML = value
    document.querySelector('input').value = value
}
//監(jiān)聽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值作為名稱的屬性）組成的數(shù)組。
區(qū)別于Object.keys()。

var aa = {
    name:"123",
    age:17
}
Object.defineProperty(aa,"idno",{
    value:"1234"http://不可枚舉的
})
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