【vue】---Object.defineProperty基本使用---【巷子】

1、object.defineProperty

給一個對象定義一個新的屬性或者在修改一個對象現有的屬性，並返回這個對象

語法：
　　Object.defineProperty(參數1，參數2，參數3)
　　參數1：目標對象

　　參數2：要修改或者添加的屬性名稱

　　參數3：目標對象屬性的一些特征 (是一個對象)
　　　　　　
　　　　　　參數1：
　　　　　　　　value:屬性值
　　　　　　參數2：
　　　　　　　　writable：對象屬性值是否可以被修改  true允許  false不允許
　　　　　　參數3：
　　　　　　　　configurable:對象屬性是否可以被刪除 true允許  false不允許
　　　　　　參數4：
　　　　　　　　enumerable:對象屬性是否可被枚舉
　　　　　　參數5：
　　　　　　　　get():給一個屬性提供getter方法，當訪問這個對象的屬性值得時候觸發該方法
　　　　　　參數6：
　　　　　　　　set():給一個屬性提供setter方法，當設置屬性值得時候觸發該方法
　　　　

2、value

var obj = {};
Object.defineProperty(obj,"name",{
    value:"張三"
})

Object.defineProperty(obj,"age",{
    value:"28"
})

console.log(obj)

 3、writable

var obj = {};
Object.defineProperty(obj,"name",{
    value:"張三",
    writable:false//當設置為false的時候當前對象的屬性值不允許被修改
})

obj.name="李四"
console.log(obj.name)//張三


var obj = {};
Object.defineProperty(obj,"name",{
    value:"張三",
    writable:true//當設置為true的時候當前對象的屬性值允許被修改
})

obj.name="李四"
console.log(obj.name)//李四

 

4、configurable

var obj = {};
Object.defineProperty(obj,"name",{
    value:"張三",
    configurable:false//當設置為false的時候對象的屬性不允許被刪除
})

delete obj.name;

console.log(obj.name)//張三



var obj = {};
Object.defineProperty(obj,"name",{
    value:"張三",
    configurable:true//當設置為true的時候對象的屬性允許被刪除
})

delete obj.name;

console.log(obj.name)//undefined

 

5、enumerable

var obj = {name:"張三",age:"李四"}

Object.defineProperty(obj,"name",{
    enumerable:false//當設置為false的時候對象的屬性不可被枚舉
})

Object.defineProperty(obj,"age",{
    enumerable:false
})

console.log(Object.keys(obj))//[]


var obj = {name:"張三",age:"李四"}

Object.defineProperty(obj,"name",{
    enumerable:true//當設置為true的時候對象的屬性可被枚舉
})

Object.defineProperty(obj,"age",{
    enumerable:true
})

console.log(Object.keys(obj))//["name",age]

 

6、for in && Object.keys()的區別

//for in 與Object.keys()的區別
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    sex:"男"
}

var man = new Person("張三",18);

console.log(Object.keys(man));//["name","age"]

for(var key in man){
    console.log(key);//name age sex
}



總結：
　　Object.keys()：返回一個數組，數組值為對象自有的屬性，不會包括繼承原型的屬性
　　
　　for in :遍歷對象可枚舉屬性，包括自身屬性，以及繼承自原型的屬性

7、get() && set()

var obj = {name:"張三"}

Object.defineProperty(obj,"name",{
    get(){
        console.log("被訪問了")//當被訪問的時候會觸發get()方法
   
    },
    set(newVal){
        console.log("被設置了"+newVal)//當被設置的時候會觸發set()方法
    }
})
obj.name//輸出：被訪問了
obj.name="李四";//輸出：被設置了李四

 

注意：當使用了get()方法或者set()方法的時候就不能使用value和writable中的任何一個屬性否則會報錯