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

目录

    • 定义新属性或修改原有属性
      • 语法
        • api使用
          • 修改添加属性
          • 设置属性不能遍历
          • 设置属性不能 删除
    • 监控属性变化
      • 监听属性 访问修改
      • set 返回值

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

语法

文档

obj // 目标对象
prop  // 需要修改的属性
descriptor // 目标属性所拥有的特性
//descriptor 以对象形式书写{}
//value:属性值,默认undefined
//writable:值是否可重写,默认false
//enumweable:目标属性是否可以被枚举 默认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,
	enumweable: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)
	}
})

js 对象方法 Object.defineProperty() 定义新属性或修改原有属性 监控属性变化set,get_第1张图片

你可能感兴趣的:(JavaScript)