js 对象方法 Object.defineProperty() 定义新属性或修改原有属性 监控属性变化set,get 获取设置getOwnPropertyDescriptors

定义新属性或修改原有属性

语法

文档

obj // 目标对象
prop  // 需要修改的属性
descriptor // 目标属性所拥有的特性
//descriptor 以对象形式书写{}
//value:属性值,默认undefined
//writable:值是否可重写,默认false
//enumerable:目标属性是否可以被枚举 默认false
//configurable:目标属性是否可以被删除或是否可以再次修改特性 默认false

// get:function(){} 属性的 getter 函数 当访问该属性(prop)时 会调用该函数
// set:function(){} 属性的 setter 函数 当修改该属性(prop)时 会调用该函数 该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象

Object.defineProperty(obj, prop, descriptor)
api使用
修改添加属性
var obj = {
	id:1,
	name:"obj",
	age:""
}
// 以前修改属性和对象方式
// obj.name = "dd"

// 修改添加属性  返回修改后的对象
let newObj = Object.defineProperty(obj, 'name', {
	value:"defineProperty"
})
//  newObj === obj
// 设置属性 id 不能修改
Object.defineProperty(obj, 'id', {
	value:2,
	writable:false
})

在这里插入图片描述

设置属性不能遍历
Object.defineProperty(obj, 'age', {
	value:18,
	writable:false,
	enumerable:false
})

Object.keys(obj)

在这里插入图片描述

设置属性不能 删除
Object.defineProperty(obj, 'name', {
	value:"defineProperty",
	configurable:false
})
delete obj.name  //false

在这里插入图片描述

监控属性变化

监听属性 访问修改

监听obj对象的属性的修改访问

var obj = {
	id:1,
	name:"obj",
	age:""
}
Object.keys(obj).forEach(key=>{
	let value = obj[key]
	Object.defineProperty(obj,key,{
		get:function(){
	        console.log("访问属性 name 触发")
	        return value // 定义访问该属性的返回值
		},
		set:function(newValue){
			console.log("设置属性 name",newValue)
			value = newValue // 修改该属性的值
		}
	})
})



// 在浏览器 console 区域运行
obj.name
obj.name = 2

set 返回值

var obj = {
	id:1,
	name:"obj",
	age:""
}
Object.defineProperty(obj,'name',{
	get:function(){
        console.log("访问属性 name 触发")
        return '返回'//返回 调用 obj.name  的结果
	},
	set:function(newValue){
		console.log("设置属性 name",newValue)
	}
})

在这里插入图片描述

获取设置的属性

指定对象所有自身属性的描述对象

Object.getOwnPropertyDescriptors(obj)
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值