Object.defineProperty() ：虽然VUE3不用了但是你得了解它

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

该方法允许精确添加或修改对象的属性。

通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。

这个方法允许修改默认的额外选项（或配置）比如是否只读不可以写；是否可以被for..in或Object.keys()遍历。

默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

语法：Object.defineProperty(obj, prop, descriptor)

Object.defineProperty(obj, prop, descriptor)

参数

参数名	是否必须	作用
obj	必需	目标对象
prop	必需	要定义或修改的属性的名称
descriptor	必需	将被定义或修改的属性描述符

返回值：被传递给函数的对象。即第一个参数obj

两种使用形式：数据描述和存取器描述

属性描述符

//数据描述
Object.defineProperty(obj,"key",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

//存取器描述
Object.defineProperty(obj,"newKey",{
	configurable: true | false
    enumerable: true | false
    get:function (){return xxx} | undefined,
    set:function (value){} | undefined
});

数据描述符和存取描述符均具有

configurable：是否可以被删除或是否可以再次修改特性

enumerable：是否可枚举

描述符	作用	属性值	默认值
configurable	目标属性是否可以被删除或是否可以再次修改特性（writable, configurable, enumerable）。	true，false	false
enumerable	是否可枚举 当且仅当该属性为 true 时，目标属性才可以被枚举。	true，false	false

数据描述符 独具

value：该属性对应的值

writable：value是否可以重写

描述符	作用	属性值	默认值
value	该属性对应的值	任何有效的 JavaScript 值（数值，对象，函数等）	undefined
writable	value是否可以重写	true，false	false

存取描述符 独具

get当访问该属性时，该方法会被执行（必须return）

set当属性值修改时，触发执行该方法

当使用了get或set方法，不允许使用writable和value这两个属性

描述符	作用	属性值	默认值
get	一个给属性提供 getter 的方法，当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。	函数	undefined
set	一个给属性提供 setter 的方法,当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。	函数	undefined

描述符示例

configurable是否可以被删除或是否可以再次修改特性

1. 目标属性是否可以使用delete删除
2. 目标属性（writable, configurable, enumerable）是否可以再次设置特性

//-----------------测试目标属性是否能被删除------------------------
var obj = {}
//第一种情况：configurable设置为false，不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
console.log( obj.newKey ); //hello
delete obj.newKey;//删除属性
console.log( obj.newKey ); //hello(删除无效)

//第二种情况：configurable设置为true，可以被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
console.log( obj.newKey ); //hello
delete obj.newKey;//删除属性
console.log( obj.newKey ); //undefined(删除有效)


//-----------------测试是否可以再次修改特性------------------------
var obj = {}
//第一种情况：configurable设置为false，不能再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //报错：Uncaught TypeError: Cannot redefine property: newKey

//第二种情况：configurable设置为true，可以再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello

enumerable 是否可枚举

此属性是否可以被枚举（使用for...in或Object.keys()）

var obj = {}
//第一种情况：enumerable设置为false，不能被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  
}
//第二种情况：enumerable设置为true，可以被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  //newKey
}

value：属性值

var obj = {}
//第一种情况：不设置value属性
Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined
------------------------------
//第二种情况：设置value属性
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //hello

writable属性的值是否可以被重写

var obj = {}
//第一种情况：writable设置为false，不能重写。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //hello

//第二种情况：writable设置为true，可以重写
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //change value

//------------------------
//定义对象的时候添加的属性，是可删除、可重写、可枚举的。
var obj = {
    test:"hello"
}

//改写值
obj.test = 'change value';

console.log( obj.test ); //'change value'

Object.defineProperty(obj,"test",{
    writable:false
})


//再次改写值
obj.test = 'change value again';

console.log( obj.test ); //依然是：'change value'

get/set

1. get 是一种获得属性值的方法
2. set 是一种设置属性值的方法。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

数据描述

当修改或定义对象的某个属性的时候，给这个属性添加一些特性

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    //value:'',  不要添加value描述  如果添加了，当writable为true时改变原有值了
    writable:true | false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:可以是任意类型的值,
    writable:true | false
});

存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性