Object.defineProperty()

Object.defineProperty()

• 语法：Object.defineProperty(obj, prop, descriptor)
  • obj：要定义属性的对象
  • prop：要定义或修改的属性的名称，即为对象的 key
  • descriptor：要定义或者修改的属性描述符
• 返回值：此对象 obj
• 例子：

  const obj = {};
  Object.defineProperty(obj, 'name', {
  	value: 'z'
  });
  obj.name; // z
  

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

obj.xxx 定义 对象属性 和 Object.defineProperty 定义属性

通常情况下，obj.xxx 就可以直接定义属性，例如：obj.name = 'x'，而且此 name 属性可修改，可遍历，可删除；
而 Object.defineProperty() 定义的属性默认是不可以修改，遍历和删除的。
这与 Object.defineProperty(obj, props, descript) 中的第三个参数对象有关，这个参数是对象的 属性描述符，属性描述符又分为数据描述符和存取描述符，每一块属性描述符只能包含二者其中的一种，不能同时存在两种类型的描述符，且每一种描述符都有其对象的值或默认值来控制对象属性的修改和遍历。

• 两种属性描述共享的可选键值

名称	说明	默认值
configurable	当该描述符的值为 true 的时候，对象的属性描述符才能被改变，对象的该属性才能被删除	false
enumerable	当该描述符为 true 的时候，对象的该属性才能被遍历	false

• 数据描述符还具有以下可选键值：

名称	说明	默认值
value	该属性对应的值	undefined
writable	当该属性描述符为 true 的时候，对象的 value 值才能被修改	false

• 存取描述符还具有以下可选键值：

名称	说明	默认值
get	该属性的 getter 函数，当访问该属性的时候，会调用此函数	undefined
set	该属性的 setter 函数，当该属性值被修改的时候，会调用此函数	undefined

创建属性

let o = {};

// o.name = "z"; 等同于
Object.defineProperty(o, "name", {
	value: 'z',
	writable: true,
	enumerable: true,
	configurable: true
})

// 在对象 o 添加一个设置存取描述符的属性
let z = 0;
Object.defineProperty(o, "age", {
	get(){return z},
	set(newValue){z = newValue},
	enumerable: true,
	configurable: true
})

自定义 getter 和 setter

function System() {
	let student = null;
	let age = 0;
	let classRoom = [];
	Object.defineProperty(this, 'student', {
		get(){
			console.log('get');
			return student;
		},
		set(value){
			console.log('set');
			student = value;
			classRoom.push({name: student});
		}
	});
	Object.defineProperty(this, 'age', {
		get(){
			console.log('get');
			return age;
		},
		set(value){
			console.log('set');
			age= value;
			classRoom.push({age: age});
		}
	});
	this.getClassRoom = function(){ return classRoom };
}
const system = new System();
console.log('system',system);
/*
System {getClassRoom: ƒ}
getClassRoom: ƒ ()
age: 0
student: null
get age: ƒ get()
set age: ƒ set(value)
get student: ƒ get()
set student: ƒ set(value)
[[Prototype]]: Object
*/
system.student; // get
system.student = "zx";
system.student = "sj";
system.getClassRoom(); // [{name: "zx", age: 0}, {name: "sj", age: 0}]