09-Property descriptor Object.getOwnPropertyDescriptor(), original data cannot be rewritten

What should I do if the original data is modified and lost when the original data is passed into the new object as an attribute value?

• The property should be set using Object.defineProperty()
• The properties set with Object.defineProperty(), the default writable, enumerable, configurable are all false
• And the attribute of the custom reminder is set to be non-overridable

let obj = {
	a: 1
};

for (const key in obj) {
	console.log(key);
}

let keys = Object.keys(obj);
console.log(keys);

let desc = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(desc);

describe a:

The value is 1, rewritable and traversable

get attribute descriptor

Object.getOwnPropertyDescriptor(obj, 'a');

reset attribute descriptor

Object.defineProperty(obj, 'a', { })

value: 23, // content

writable: false, //not rewritable

enumerable: false, //Not traversable

configurable: false // Whether the attribute descriptor itself can be modified repeatedly

// 重新设置属性描述符
Object.defineProperty(obj, 'a', {
	value: 23,
	writable: false, //不可重写
	enumerable: false, //不可遍历
	configurable: false //属性描述符本身可不可以重复修改
}) 
/* 以下是无效的修改，因为上面的configurable: false */
Object.defineProperty(obj, 'a', {
	value: 23,
	writable: false, //不可重写
}) 
obj.a = 10;
console.log(obj.a);

getter reader

read attribute value

setter setter

Property value reassignment, with a formal parameter

Collectively known as accessor

After setting the get and set functions, when reading this attribute in the future, he will not go to the memory to find it, but run the get function

What is in the get function, what is the attribute value output

For properties defined by Object.defineProperty(), what code is actually executed when the property value is modified?

let obj = {};

Object.defineProperty(obj, 'a', {
	get: function () {
		console.log('hello');
		return 2
	},
	set: function (val) {
		console.log('你好');
	}
})
// obj.a = 10;
obj.a = 3 - 2; // set(3-2)
console.log(obj.a); // console.log(get())

Output result: hello hello 2

An empty object is defined here, and a property a is defined with defineProperty

obj.a = 3 - 2; This sentence means reassignment, so when the property value changes, the set function is called

console.log(obj.a); Get the value of attribute a, in fact, read the attribute value and call the get function

Use the set function to limit the attributes of the original data to not be rewritten

let obj = {
	pic: './assets/g1.png',
	title: '椰云拿铁',
	desc: `1人份【年度重磅，一口吞云】`,
	choose: 0,
	sellNumber: 200,
	favorRate: 95,
	price: 32,
}

class UIGoods {
	constructor(g) {
		// this.data = g;
		Object.defineProperty(this, 'data', {
			get: function () {
				return g;
			},
			set: function () {
				throw new Error('data属性时是只读的，不能赋值和修改！')
			},
			configurable: false,
		})
	}
}

const g = new UIGoods(obj);
g.data = 'ab';
console.log(g.data);

Use the set function to limit the attributes of the numerical type, set the intermediate variable, and judge its value and type

let internalChooseValue = 0;
Object.defineProperty(this, 'choose', {
	get: function () {
		return internalChooseValue;
	},
	set: function (val) {
		if (typeof val !== 'number') {
			throw new Error(`choose属性必须是数字！`);
		}
		let temp = parseInt(val);
		if (temp !== val) {
			throw new Error(`choose属性必须是整数！`);
		}
		if(val < 0) {
			throw new Error(`choose属性必须大于等于0！`);
		}
		internalChooseValue = val;
	},
	configurable: false
})

Use the get function to limit the total price

Object.defineProperty(this, 'totalPrice', {
	get: function () {
		return this.choose * this.data.price;
	}
})

er6 syntactic sugar abbreviation, same level as constructor

get totalPrice () {
	return this.choose * this.data.price;
}

Use the get function to limit the setting of isChoose

get isChoose () {
	return this.choose > 0;
}

Object.freeze() freezes a clone of the original data so that its property values ​​cannot be modified

Try not to modify the original data directly

 Avoid adding new properties into Object.freeze(this);

 Freezing yourself at the end can prevent the newly added attributes from changing the data, but other common attributes cannot be changed

 To make other common properties modifiable, replace freeze with seal

This makes other common properties modifiable and the original data unmodifiable

Restrictions cannot add properties on the prototype