17: VUE数据绑定与 Object.defineProperty

　　VUE数据绑定原理：https://segmentfault.com/a/1190000006599500?utm_source=tag-newest

　　Object.defineProperty()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

　　 https://segmentfault.com/a/1190000007434923

1.1 Object.defineProperty()介绍

　　1、defineProperty作用

　　　　　　1. Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

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

　　　　1）参数说明：

　　　　　　　　obj： 必需。目标对象
　　　　　　　　prop： 必需。需定义或修改的属性的名字
　　　　　　　　descriptor： 必需。目标属性所拥有的特性

　　　　2）返回值：

　　　　　　　　传入函数的对象。即第一个参数obj

　　3、数据描述：

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

　　　　1）设置的特性总结

　　　　　　　　value: 设置属性的值

　　　　　　　　writable: 值是否可以重写。true | false

　　　　　　　　enumerable: 目标属性是否可以被枚举。true | false

　　　　　　　　configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

//1、任意创建一个对象obj
var obj = {
    test:"hello"
}
// 原始值 obj = {test: "hello"}


//2、修改obj "test"值为"test的新值"
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:'test的新值',
    writable:true | false
});
// 修改后 obj = {test: "test的新值"}


//3、对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:"newValue",
    writable:true | false
});
// 修改后 obj = {test: "test的新值", newKey: "newValue"}

使用defineProperty修改对象的值/添加新值

　　4、属性：value（对象新值）

//1、定义一个空对象obj
var obj = {}

//2、为新对象设置一个值 newKey : hello
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //hello

属性：value

　　5、属性：writable

　　　　 说明：属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。

var obj = {}
//1、writable设置为false，不能重写。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});
//2、更改newKey的值,发现值并没有修改
obj.newKey = "change value";
console.log( obj.newKey );  //hello

writable定义值是否可以被重写

　　6、属性：enumerable

　　　　 说明：设置为true可以被枚举；设置为false，不能被枚举。默认为false。

var obj = {}

//1、enumerable设置为true，可以被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

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

enumerable设置为可枚举类型

　　7、属性：configurable

　　　　1）作用

　　　　　　　　1. 目标属性是否可以使用delete删除，目标属性是否可以再次设置特性

　　　　　　　　2. 设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。默认为false。

var obj = {}

//1、configurable设置为false，不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//2、删除属性：实际上没有被删除
delete obj.newKey;
console.log( obj.newKey ); //hello

configurable 设置是否能被删除、修改

　　8、getter/setter

　　　　　　1. getter 是一种获得属性值的方法，setter是一种设置属性值的方法。

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

　　　　　　3. get或set不是必须成对出现，任写其一就可以,如果不设置方法，则get和set的默认值为undefined

var obj = {};
var initValue = 'hello';

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

//获取值
console.log( obj.newKey );  //hello

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

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

11111111111111111

17: VUE数据绑定 与 Object.defineProperty

1.1 Object.defineProperty()介绍

猜你喜欢

17: VUE数据绑定与 Object.defineProperty