Object.defineProperty() 在对象上定义/修改属性

本文介绍了Object.defineProperty()方法,用于在对象上定义或修改属性。阐述了其语法,包含obj对象、prop属性和描述符。还说明了属性如value、writable、configurable、enumerable等的含义及作用,同时提醒使用get或set方法时的注意事项,以及默认值情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Object.defineProperty() 在对象上定义/修改属性

语法:Object.defineProperty(obj对象,prop属性,描述符)

属性:

value:默认值(给对象属性赋值)

writable: 是否能够写/修改 true | false

configurable: 是否能够删除 true | false

enumerable:是否可枚举(遍历) true | false

get:获取属性值

set:设置属性值

注意:使用get或set方法时,不能使用value和writable属性

value 给对象属性赋值

var obj={
	name:'李'
}
console.log(obj);  //{name: "李"}
Object.defineProperty(obj,'age',{
	value:19
});
console.log(obj);  //{name: "李", age: 19}

writable 是否能够写/修改属性值

var obj={
	name:'李'
}
//第一种情况  writable为false,不可修改
Object.defineProperty(obj,'age',{
	value:19,
	writable:false
});
obj.age=22;
console.log(obj.age);   //19

//第二种情况  writable为true,可修改
Object.defineProperty(obj,'age',{
	value:19,
	writable:true
});
obj.age=22;
console.log(obj.age);   //22			

enumerable 是否可枚举(遍历)属性

var obj={
	name:'李'
}
//第一种情况  enumerable为false,不可遍历
Object.defineProperty(obj,'age',{
	value:19,
	writable:false,
	enumerable:false
});
for(var attr in obj){
	console.log(attr);  //name
}

//第二种情况  enumerable为true,可遍历
Object.defineProperty(obj,'age',{
	value:19,
	writable:false,
	enumerable:true
});
for(var attr in obj){
	console.log(attr);  // name  age
}			

configurable 是否能够删除属性

var obj={
	name:'李'
}
//第一种情况  configurable为false,不可删除属性
Object.defineProperty(obj,'age',{
	value:19,
	writable:false,
	enumerable:false,
	configurable:false
});
delete obj.age;
console.log(obj);  //{name: "李", age: 19}

//第二种情况  configurable为true,不可删除属性
Object.defineProperty(obj,'age',{
	value:19,
	writable:false,
	enumerable:false,
	configurable:true
});
delete obj.age;
console.log(obj);  //{name: "李"}

get 获取属性值 | set 设置属性值

var obj = {
	name: '李'
}
var n=10;
//当set没有传参时,属性的值无法改变
Object.defineProperty(obj, 'age', {
	get:function(){
		return n;
	},
	set:function(){

	}	
});
console.log(obj.age);  //10
obj.age=25;
console.log(obj.age);  //10

//当set传参时,属性的值可以改变
Object.defineProperty(obj, 'age', {
	get:function(){
		return n;
	},
	set:function(m){
		n=m;
	}	
});
console.log(obj.age);  //10
obj.age=25;
console.log(obj.age);  //25

注意:在使用Object.defineProperty()属性给对象添加或修改属性时,如果不设置属性的值,则writable、configurable、enumerable都默认为是false。

<think>嗯,用户的问题是关于如何在浏览器控制台中使用Object.defineProperty来测试修改对象的自定义属性。首先,我需要回想一下Object.defineProperty的基本用法,根据提供的引用,这个方法可以定义修改对象属性,并且可以设置属性描述符,比如valuewritable、enumerable、configurable,以及getter和setter。 用户可能想通过控制台实际操作,看到属性修改效果。比如,定义一个属性,设置writable为false,尝试修改它,看看是否会报错。或者设置enumerable为false,检查属性是否出现在for-in循环Object.keys中。还有可能想测试getter和setter函数的效果,当访问修改属性触发这些函数。 接下来,我需要考虑如何分步骤示例。首先创建一个空对象,比如let testObj = {};。然后使用Object.defineProperty添加属性,比如设置value为初始值,并配置同的属性描述符。然后演示如何修改属性,并观察结果。例如,如果writable是false,修改会报错;如果enumerable是false,属性会被枚举到。 另外,用户可能想知道如何在控制台中测试这些代码。需要提供具体的代码片段,可以直接在控制台输入。例如,创建一个对象定义属性,然后尝试修改它,并查看控制台的输出错误信息。 还要注意引用中的例子,比如引用3中设置writable为false导致修改失败,引用4中使用getset方法。需要将这些例子整合到回答中,给出具体的测试步骤。 可能用户遇到的问题包括:如何在控制台中快速测试,如何观察可枚举属性,如何处理报错信息等。需要详细说明每一步的操作和预期结果,确保用户能够跟随示例进行操作。 最后,生成相关问题需要考虑用户可能进一步想了解的内容,比如性能影响、应用场景、兼容性问题,或者与其他方法(如Proxy)的对比。这样可以帮助用户扩展知识,解决更深层次的问题。</think>### 使用 Object.defineProperty 在控制台测试修改定义属性 #### 1. 基础示例:定义可写属性 ```javascript // 创建空对象 let obj = {}; // 定义可写属性 age Object.defineProperty(obj, 'age', { value: 25, writable: false, // 禁止修改 enumerable: true, // 可枚举 configurable: true // 允许删除修改属性特性 }); console.log(obj.age); // 输出 25 obj.age = 30; // 控制台报错:Cannot assign to read only property 'age' ``` *现象*:修改会触发错误,但会导致程序崩溃[^3]。 --- #### 2. 定义带拦截器的属性 ```javascript let data = {}; Object.defineProperty(data, 'name', { get() { console.log('正在读取 name 属性'); return this._name || ''; }, set(newVal) { console.log('正在设置 name 属性:', newVal); this._name = newVal; }, enumerable: true }); data.name = 'Alice'; // 控制台显示设置日志 console.log(data.name); // 显示读取日志后输出 Alice ``` *特性*:通过内部变量 `_name` 存储实际值,避免递归调用[^4]。 --- #### 3. 测试可枚举属性 ```javascript let player = { position: 'SG' }; Object.defineProperty(player, 'number', { value: 24, enumerable: false // 隐藏属性 }); console.log(player); // 控制台显示 { position: 'SG' } console.log(Object.keys(player)); // 输出 ["position"] console.log(player.number); // 输出 24(仍可直接访问) ``` --- #### 4. 综合测试步骤 1. 打开浏览器控制台(F12) 2. 逐行粘贴上述代码片段 3. 观察: - 错误提示(红色报错) - 控制台日志输出 - 对象展开后的属性显示差异 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值