Object.defineProperty를 사용하여 속성간에 양방향 바인딩을 만드는 방법은 무엇입니까?

Question

말, 나는 사원 수와 3 축 회전 속성을 모두 가지고있는 3 차원 객체를 구현하는 객체 유형이 있습니다

Object.defineProperty(MyObject3D.prototype, 'rotation', { 
    ... 
}); 

Object.defineProperty(MyObject3D.prototype, 'quaternion', { 
    ... 
}); 

를 내가 때마다 나는 그들, 다른 각을 수정할 수 있는지 확인하려면 속성이 자동으로 다시 계산됩니다. 분명히, 만약 내가 그 속성의 두 가지 메소드를 만들면, 나는 무한 루프로 진행할 것이다.

Object.defineProperty(MyObject3D.prototype, '_rotation', { 
    enumerable: false 
}); 

Object.defineProperty(MyObject3D.prototype, '_quaternion', { 
    enumerable: false 
}); 

Object.defineProperty(MyObject3D.prototype, 'rotation', { 
    get: function() { 
     return this._rotation; 
    }, 
    set: function(r) { 
     this._rotation = r; 
     this._quaternion = rotation2quaternion(r); 
    } 
}); 

Object.defineProperty(MyObject3D.prototype, 'quaternion', { 
    get: function() { 
     return this._rotation; 
    }, 
    set: function(q) { 
     this._quaternion = q; 
     this._rotation= quaternion2rotation(q); 
    } 
}); 

:

지금까지 내가 볼 수있는이 일을하는 유일한 방법은 실제로 (조금 청소기 객체 반성을 위해, 아마 비 열거) 회전 및 사원 수를 닮은 특성의 또 다른 세트를 사용하는 것입니다

더 좋은 방법을 생각해 낼 수 있습니까? 어쩌면 내가 Object.defineProperty 어떤 능력을 누락 더 깨끗하고 짧은 만들 수 있을까? 대신 그들 데이터 속성 수 있도록 간단하고 다음 setRotation 그들을 돌연변이하는 setQuaternion 방법을 정의하지 않을 rotation 및 quaternion 접근 속성을 만드는

Answer 1

? 예를 들어 :

function MyObject3D() { 
    ... 
} 

MyObject3D.prototype.setRotation = function (r) { 
    this.quaternion = rotation2quaternion(r); 
    this.rotation = r 
    return this; 
}; 

MyObject3D.prototype.setQuaternion = function (q) { 
    this.rotation = quaternion2rotation(q); 
    this.quaternion = q; 
    return this; 
}; 

이제 .rotation 및 .quaternion 일반적으로 액세스 할 수 있습니다. 그러나 그들을 설정하려면 대신 .setRotation 및 .setQuaternion을 사용하십시오. 예, 사용자가 .rotation 및 .quaternion을 수동으로 설정할 수 있으므로 안전하지 않습니다. 그러나 다음과 같은 장점이 있습니다.

1. defineProperty을 지원하지 않는 브라우저에서 작동합니다.
2. this을 반환하므로 작업을 연결할 수 있습니다.
3. 함수가하는 일을 쉽게 이해할 수 있습니다.

---

불변의 객체를 사용하는 것이 문제를 해결하는 또 다른 방법. 이것이 하스켈에서하는 방법입니다.

function MyObject3D(rotation, quaternion) { 
    this.quaternion = quaternion; 
    this.rotation = rotation; 
    Object.freeze(this); 
} 

MyObject3D.prototype.putRotation = function (r) { 
    return new MyObject3D(r, rotation2quaternion(r)); 
}; 

MyObject3D.prototype.putQuaternion = function (q) { 
    return new MyObject3D(quaternion2rotation(q), q); 
}; 

당신이 당신의 생성자에서 일부 초기화 로직이있는 경우 다음 스마트 생성자에 이동할 수 있습니다 : 당신은 당신이 사용하는 새로운 객체를 생성 할 때 따라서

function createMyObject3D(r, q) { 
    // some initialization logic 
    return new MyObject3D(r, q); 
} 

createMyObject3D 예를 들어 당신은 new MyObject3D을 사용하는 객체를 새로운 값으로 변경하려고합니다. 다음 방법의 장점은 다음과 같습니다.

1. 코드가 명확하게 투명 해집니다. 따라서 그것은 동등한 추론의 대상이 될 수있다.
2. 브랜드 개체를 반환하기 때문에 작업을 체인화 할 수 있습니다.
3. 아무도 개체의 속성을 조작 할 수 없습니다.
4. 함수가하는 일을 쉽게 이해할 수 있습니다.

단점은 이전 브라우저에는 없을 수도있는 Object.freeze에 달려 있다는 것입니다. 그럼에도 불구하고 물체를 얼리는 것은 선택적인 단계이며 생략 될 수 있습니다.