location
과 같은 일부 객체는 읽기 전용이므로이를 통해 추상화를 만들거나 테스트 가능성을 위해 DI를 사용하는 것이 유용 할 수 있습니다.
sessionStorage
을 그대로 사용하는 것으로한다. 일반적으로 추상화가 필요하지 않습니다. 해당 기능을 확장하거나 수정해야하는 경우 사용자 지정 클래스를 만들 수 있습니다. 그것은 Storage 인터페이스를 구현하거나 자체 인터페이스를 가질 수 있습니다.
여기서 Proxy
의 사용은 부당합니다. 느리고 코드가 ES5 환경에서 사용되는 것을 제한합니다.
사용자 지정 클래스 또는 개체는 원래 sessionStorage
메서드를 래핑 할 수 있습니다. 스토리지 API가 작기 때문에,의 래퍼 클래스 결과 ~ 코드의 20 개 라인 :
class CustomSessionStorage {
get length() {
return sessionStorage.length;
}
getItem(key) {
return sessionStorage.getItem(key);
}
...
}
sessionStorage
목적은 이국적인이다. Storage
에서 상속 받았지만 Storage
은 생성자가 아니며 sessionStorage
메서드는 sessionStorage
에 직접 바인딩해야하므로 CustomSessionStorage.prototype = sessionStorage
과 함께 사용할 수 없습니다. 또한 sessionStorage
에는 바인딩되어야하는 length
속성 설명자가 있습니다. 나는 기본 객체에 대한 사용자 정의 메소드를 구현하고 싶지만 할 경우
function BaseSessionStorage() {}
for (let prop of Object.getOwnPropertyNames(Storage.prototype)) {
if (typeof sessionStorage[prop] === 'function') {
// bind all sessionStorage methods
BaseSessionStorage.prototype[prop] = sessionStorage[prop].bind(sessionStorage);
} else {
// a proxy for other props, length is read-only getter
Object.defineProperty(BaseSessionStorage.prototype, prop, {
get:() => sessionStorage[prop],
set: val => { sessionStorage[prop] = val }
});
}
}
class CustomSessionStorage extends BaseSessionStorage {
getItem(key) {
return super.getItem(key);
}
// the rest of API is inherited
}
내가 프록시가 필요합니다
를 확장하는 좀 더 일반적인 방법은 원래의 방법을 감싸고 더 확장 할 수있는 기본 클래스를 제공하는 것입니다 모든 것을 구현하고 싶지는 않습니다. 다른 방법은 없습니다. 'JSON.parse'를 설정할 때마다'JSON.stringify' 데이터를 원한다면 매번이 작업을 수행하지 않을 시간의 90 %를 얻게됩니다. 나는 단순히 나의 proxylayer가 이것을 돌보고 싶다. –
Proxy에 대한 실제 필요성은 여기에 없습니다. 이것은 일반 클래스 (또는 저장소가 싱글 톤 (singleton)이라고 가정하기 때문에 객체)에 의해 처리 될 수 있습니다. 원래의 질문에 대해서는 * 어떻게 다시 그 범위에 액세스 할 수 있습니까? *, 당신은'setItem' 안에 명시 적으로'sessionStorage.setItem()'으로 참조 할 필요가 있습니다. 프록시 메소드에서'this'를 사용할 수 있지만, 메소드가 다르게 호출되는 경우에만 호출 할 수 있습니다 :'set (k, v) {this.setItem (a, msg)}'. – estus
원래의 'sessionStorage' 객체처럼 동작하도록 원한다면 모든 메소드를 구현해야합니다. –