本文详细解析 JavaScript 中 Object.defineProperty 方法的使用，涵盖 value、writable、enumerable、configurable 以及 getter 和 setter 六个核心属性描述符。通过具体代码示例，说明如何定义新属性或修改已有属性，包括控制属性的读写、枚举、删除及特性重定义权限，并解释存取器描述符在数据绑定中的应用。
Object.defineProperty 方法简介
提问者询问：老大，Object.defineProperty 具体指什么？
假设存在一个名为 user 的对象；若需为其新增 name 属性，常规操作如下
var user = {};
user.name="狂奔的蜗牛";
console.log(user);//{name: "狂奔的蜗牛"}若需增加一个 sayHi 方法呢？
user.sayHi=function () { console.log("Hi !") };
console.log(user);//{name: "狂奔的蜗牛", sayHi: ƒn}Object.defineProperty 即用于实现此功能
参数说明与 value 属性
那么 Object.defineProperty 如何调用？
Object.defineProperty 接收三个参数（object , propName , descriptor）
1 object 对象 => 指定目标对象 2 propName 属性名 => 指定新增属性的名称 【类型：String】 3 descriptor 属性描述 => 定义该属性的具体特性【类型：Object】
那么descriptor作为一个对象，包含哪些属性呢？别急，我们逐一解析；
既然能向对象添加属性，我们用它给 user 添加 name 属性，代码示例如下
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蜗牛"
})
console.log(user);//{name: "狂奔的蜗牛"}说明：依然是经典的value属性，用于设置属性的值。
等等，属性值是否仅限于字符串？那 number、function、Object、boolean 等类型呢？
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蜗牛"
})
Object.defineProperty(user,"isSlow",{
value:true
})
Object.defineProperty(user,"sayHi",{
value:function () { console.log("Hi !") }
})
Object.defineProperty(user,"age",{
value:12
})
Object.defineProperty(user,"birth",{
value:{
date:"2018-06-29",
hour:"15:30"
}
})
console.log(user);
说明：事实证明，任何数据类型的数据均可作为属性值。
writable 属性：控制属性是否可写
问题再次出现，如果 user 对象已存在 name 属性，能否通过 Object.defineProperty 修改其值？
我们来尝试一下
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蜗牛"
})
console.log(user);
user.name="新=>狂奔的蜗牛"
console.log(user);
咦？？为什么修改未生效？
原因：上文提及 descriptor 包含多个属性，除 value 外还有 writable【字面意为属性是否可被重新赋值】，接受 boolean 类型（默认值为 false），true => 允许重新赋值，false=>只读
哦哦，原来未设置 writable 值时默认为只读，因此无法修改
那我们看看，将其设置为 true，是否即可修改。
var user = {};
Object.defineProperty(user,"name",{
value:"狂奔的蜗牛",
writable:true
})
console.log(user);
user.name="新=>狂奔的蜗牛"
console.log(user);
enumerable 属性：控制属性是否可枚举
该 descriptor 还包含其他属性吗？enumerable【字面意为属性是否可被枚举】，接受 boolean 类型（默认值为 false），true => 支持枚举，false=>不支持
额。。。枚举？？什....什么意思？
假设我们想获取 user 对象的所有属性，通常会采用以下方式
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']
如果我们使用 Object.的方式定义属性，结果会如何？我们查看输出
var user ={
name:"狂奔的蜗牛",
age:25
} ;
//定义一个性别 可以被枚举
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true
})
//定义一个出生日期 不可以被枚举
Object.defineProperty(user,"birth",{
value:"1956-05-03",
enumerable:false
})
//es6
var keys=Object.keys(user)
console.log(keys);
// ["name", "age", "gender"]
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男", birth: "1956-05-03"}
console.log(user.birth);
// 1956-05-03
说明：很明显，我们定义为 enumerable=false的birth属性并未被遍历出来，遍历 => 实际上即是枚举（个人理解，不喜勿喷哦~）
总结 enumerable 属性取值为 布尔类型 true | false 默认值为 false，为真时属性可被枚举；反之则不能。此设置不影响属性的调用及查看对象值。
configurable 属性：控制属性是否可配置
configurable 是接下来我们要讲解的一个属性，该属性具备两个作用：
1 属性是否可被删除 2 属性的特性在首次设置后是否可被重新定义
var user ={
name:"狂奔的蜗牛",
age:25
} ;
//定义一个性别 不可以被删除和重新定义特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:false
})
//删除一下
delete user.gender;
console.log(user);//{name: "狂奔的蜗牛", age: 25, gender: "男"}
//重新定义特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:true
})
// Uncaught TypeError: Cannot redefine property: gender
//会报错，如下图
设置为 true
var user ={
name:"狂奔的蜗牛",
age:25
} ;
//定义一个性别 可以被删除和重新定义特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:true
})
//删除前
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}
//删除一下
delete user.gender;
console.log(user);
// {name: "狂奔的蜗牛", age: 25}
//重新定义特性
Object.defineProperty(user,"gender",{
value:"男",
enumerable:true,
configurable:false
})
//删除前
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}
//删除一下 删除失败
delete user.gender;
console.log(user);
// {name: "狂奔的蜗牛", age: 25, gender: "男"}
总结 configurable设置为 true 则该属性可被删除和重新定义特性；反之属性不可被删除和重新定义特性，默认值为false（Ps.除了可以给新定义的属性设置特性，也可以给已有的属性设置特性哈）
get 与 set 存取器描述符
最后我们来说说，最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性有何用途？我们通过代码来了解
var user ={
name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
get:function(){
return count;
}
})
console.log(user.age);//12
//如果我每次获取的时候返回count+1呢
var user ={
name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
get:function(){
return count+1;
}
})
console.log(user.age);//13
接下来无需多言，你想在获取该属性时对值执行何种操作均可；
来来来，我们看看 set，不多说上代码
var user ={
name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
get:function(){
return count;
},
set:function(newVal){
count=newVal;
}
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//145
console.log(count);//145
//等等，如果我想设置的时候是 自动加1呢？我设置145 实际上设置是146
var user ={
name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
get:function(){
return count;
},
set:function(newVal){
count=newVal+1;
}
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
console.log(count);//146
说明：注意：当使用了 getter 或 setter 方法，不允许同时使用 writable 和 value 这两个属性(若使用，会直接报错滴)
get 是获取值时调用的方法，类型为 function ，获取值时会被调用，不设置时为 undefined
set 是设置值时调用的方法，类型为 function ，设置值时会被调用，undefined
get 或 set 并非必须成对出现，任写其一即可
var user ={
name:"狂奔的蜗牛"
} ;
var count = 12;
//定义一个age 获取值时返回定义好的变量count
Object.defineProperty(user,"age",{
get:function(){
console.log("这个人来获取值了！！");
return count;
},
set:function(newVal){
console.log("这个人来设置值了！！");
count=newVal+1;
}
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
【完结】
Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象
- value: 设置属性的值
- writable: 值是否可以重写。true | false
- enumerable: 目标属性是否可以被枚举。true | false
- configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
- set: 目标属性设置值的方法
- get：目标属性获取值的方法
下一篇，我们来看看怎么用它做一个简单的双向绑定
文章传送门 => 用Object.defineProperty手写一个简单的双向绑定
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。