전방에서 어떻게 데이터의 양방향 귀속을 실현합니까

Object.defineProperty는 ES5의 방법입니다. 대상에 새로운 속성을 직접 정의하거나, 대상의 기존 속성을 수정하고, 이 대상을 되돌려줍니다.

구문:
Object.defineProperty(obj, prop, descriptor)
매개변수:
obj에서 속성을 정의할 대상입니다.prop에서 정의하거나 수정할 속성의 이름입니다.descriptor에서 정의되거나 수정될 속성 설명자입니다.descriptor는 다음과 같은 속성을 포함할 수 있습니다. 기본적으로 writable,enumerable,configurable 값은false입니다.
value: 속성의 값 writable:false라면 속성의 값을 다시 쓸 수 없고 읽기만 할 수 있습니다.enumerable: 일일이 열거할 수 있는지, for에서 열거할 수 있는지...in 순환에 겹치거나 Object에 있습니다.키스에서 열거해.configurable:false라면 그의 (value, writable, configurable) 를 다시 설정할 수 없습니다.액세스 설명자에는 다음 옵션 키 값도 있습니다.
get은 속성에 getter를 제공하는 방법입니다. getter가 없으면 undefined입니다.이 속성에 접근할 때 이 방법은 실행됩니다. 방법이 실행될 때 파라미터가 들어오지 않지만,this 대상에 들어갑니다
(상속 관계로 인해this는 반드시 이 속성을 정의하는 대상이 아니다.
기본값은 undefined입니다.
set은 속성에 setter를 제공하는 방법입니다. setter가 없으면 undefined입니다.속성 값이 수정되면 이 방법을 실행합니다.이 방법은 유일한 매개 변수, 즉 이 속성의 새로운 매개 변수 값을 받아들일 것이다.
기본값은 undefined입니다.
demo:
1. 데이터 변경 불가

`var a= {}
 Object.defineProperty(a,"b",{
 value:111
 })
 console.log(a.b);//111
 a.b=3 
 console.log(a.b);//111`

2. 데이터 변경 가능

` var a= {}
 Object.defineProperty(a,"b",{
 value:111,
 writable:true
 })
 console.log(a.b);//111
 a.b=3 
 console.log(a.b);//3`

3. 일일이 열거할 수 없다

`Object.defineProperty(a,"b",{
 value:"save", writable:true
 })
 Object.defineProperty(a,"c",{
 value:222, writable:true
 })
 console.log(Object.keys(a)); // []`

4. 열거 가능

`Object.defineProperty(a,"b",{
 value:"save", writable:true, enumerable:true
 })
 Object.defineProperty(a,"c",{
 value:222, writable:true, enumerable:true
 })
 console.log(Object.keys(a)); // (2) ["c", "b"]
for...in  Object.keys `

5.s 속성은 구성 변경 불가

`Object.defineProperty(a,"s",{
 value:888, writable:true, enumerable:true, configurable:false
 })`

6.s 속성의 writable:false는 다시 정의할 수 있습니다

`Object.defineProperty(a,"s",{
 value:888, writable:false, enumerable:true, configurable:false
 })`

7.s 속성의 writable가false로 설정된 것을 제외하고 defineProperty 변수는 다시 정의할 수 있으며 다른value,enumerable,\configurable는 다른 내용을 변경할 수 없습니다

`Object.defineProperty(a,"s",{
 value:888, writable:false, enumerable:true, configurable:false
 })`

8.set, get 속성 설정value와 writable를 설정하면 오류가 발생합니다. 다른 속성은 상관없습니다. configurable가false인 후 get은 set 이후에 변경할 수 없습니다.

` Object.defineProperty(a,"s",{
 enumerable:true, configurable:false,get:function(){return this.value},set:function(newdata){ this.value=newdata}
 })`

9. 상속 속성:
만약 방문자의 속성이 계승된다면 get과 set 방법은 하위 대상의 속성이 접근하거나 수정될 때 호출됩니다.이러한 방법을 변수로 저장하면 모든 객체가 이 값을 공유합니다.

`
function myclass() {
}
var value;
Object.defineProperty(myclass.prototype, "x", {
 get() {
 return value;
 },
 set(x) {
 value = x;
 }
});
var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // 1`

이것은 값을 다른 속성에 저장해서 고정시킬 수 있다.get과 set 방법에서this는 접근하고 속성을 수정하는 대상을 가리킨다.

`function myclass() {
}
Object.defineProperty(myclass.prototype, "x", {
 get() {
 return this.stored_x;
 },
 set(x) {
 this.stored_x = x;
 }
});
var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // undefined`

방문자 속성과 달리 값 속성은 항상 대상 자체에 설정되며 원형이 아니다.그러나 쓰기 불가능한 속성이 계승되면 대상의 속성을 수정하는 것을 방지할 수 있습니다.

`function myclass() {
}
myclass.prototype.x = 1;
Object.defineProperty(myclass.prototype, "y", {
 writable: false,
 value: 1
});
var a = new myclass();
a.x = 2;
console.log(a.x); // 2
console.log(myclass.prototype.x); // 1
a.y = 2; // Ignored, throws in strict mode
console.log(a.y); // 1
console.log(myclass.prototype.y); // 1`

양방향 데이터 바인딩 데모:

`"demo"/>
const dataDemo = {};
const demo = document.getElementById('demo');
Object.defineProperty(dataDemo, 'content', {
 set(value) {
 demo.value = value;
 this.value = value;
 },get(value){ return this.value;}
});
demo.onchange = function(e) {
 dataDemo.content = this.value;
}
console.log(dataDemo.content);
dataDemo.content=" " //input `