本文共 3266 字，大约阅读时间需要 10 分钟。

1、什么是Object.defineProperty()

• 是vue2.0的基础语法，利用Object.defineProperty()能够实现数据的双向绑定

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

2、语法

Object.defineProperty(obj, prop, descriptor)

参数说明：

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

3、描述符

对象中存在数据描述符和存取描述符，这两中属性描述符。

• 数据描述符是一个具有值的属性，该值是可写的，也可以是不写的。
• 存取描述符是由geeter和setter函数描述的属性

数据描述符：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认是undefined

var user = {   };    // 1、    Object.defineProperty(user, "name", {           value: '奔跑的蜗牛'    })    console.log(user);//{name: "奔跑的蜗牛"}    //2、       Object.defineProperty(user, "name", {           value: {               name1: '奔跑的蜗牛'        }    })    console.log(user); //{name: {name1: "奔跑的蜗牛"}}

confirgurable：

如果该属性的confirgurable的键值为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。

默认是false

// 当confirgurable为false时    var user = {           name: "奔跑的蜗牛",        age: 25    };    Object.defineProperty(user, "sex", {           value: "男",        configurable: false    })    // //删除一下    delete user.sex;    console.log(user); //{name: "奔跑的蜗牛", age: 25, sex: "男"}   // 当confirgurable为true时    var user = {           name: "奔跑的蜗牛",        age: 25    };    Object.defineProperty(user, "sex", {           value: "男",        configurable: false    })    // //删除一下    delete user.sex;    console.log(user); //{name: "奔跑的蜗牛", age: 25,}

writable

当该属性的writable键值为true是，属性的值，也就是上面的value，才会被赋值运算符所改变

默认值是false

// 当writable为false时    var user = {           name: "奔跑的蜗牛",        age: 25    };    Object.defineProperty(user, "sex", {           value: "男",        writable: false    })    // 修改，重写一下   user.sex='女'    console.log(user); //{name: "奔跑的蜗牛", age: 25}   // 当writable为true时    var user = {           name: "奔跑的蜗牛",        age: 25    };    Object.defineProperty(user, "sex", {           value: "男",        writable: true    })     // 修改，重写一下     user.sex='女'    console.log(user); //{name: "奔跑的蜗牛", age: 25, sex:'女'}

enumerable

如果该属性的enumerable键值为true时，该属性才会出现在对象的可枚举属性中

额、首先什么是可枚举属性

• 枚举指对象的属性是否可以遍历出来，简单点说就是是否可以被列举出来。可枚举性决定了这个属性能否被for…in查找遍历到。
• js中基本包装类型的原型属性是不可枚举的

var user = {           name: "奔跑的蜗牛",        age: 25    };    //es6    var keys = Object.keys(user)    console.log(keys); // ['name','age']    //es5    var keys = [];    for (key in user) {           keys.push(key);    }    console.log(keys); // ['name','age']

其次

var user = {           name: "狂奔的蜗牛",        age: 25    };    //定义一个性别 可以被枚举    Object.defineProperty(user, "sex", {           value: "男",        enumerable: false    })    //定义一个出生日期 不可以被枚举    Object.defineProperty(user, "data", {           value: "1956-05-03",        enumerable: true    })    //es6    var keys = Object.keys(user)    console.log(user);// {name: "狂奔的蜗牛", age: 25, data: "1956-05-03", sex: "男"}    console.log(keys);// ["name", "age", "data"]

存取描述符

get

属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。

set

属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。

注意：

一个属性描述符只能是这两种其中的一种，不能同时写两种

小结：

• value: 设置属性的值
• writable：值是否可以重写，true|false
• enumerable：目标属性是否可以被枚举。true|false
• configurable：目标属性是否可以被删除或是否可以再次修改特性 true|false
• set: 目标属性设置值的方法
• get：目标属性获取值得方法