localStorage может присваивать значения ключам с тем же именем, что и его встроенные методы. Как сделать то же самое с моим объектом?

Question

В localStorage вы можете использовать ключи с тем же именем, что и встроенные методы, но вы можете получить доступ к их значению только через .getItem, если вы попытаетесь получить их через .myKey или ["myKey"], вы просто получите сам метод, например

localStorage.setItem("myKey", "value0")
localStorage.myKey                        // "value0"
localStorage.getItem("myKey")             // "value0"

localStorage.setItem("setItem", "value1") // or localStorage.setItem = "value1"
localStorage.setItem                      // function setItem() <-- Expected behavior
localStorage["setItem"]                   // function setItem() <-- Expected behavior
localStorage.getItem("setItem")           // "value1"

localStorage.setItem("newKey", "value2")  // Works, is a function.

Так что теперь мне интересно, как я могу получить такое же поведение на моем собственном объекте, например

var store = {
    "getItem": function(key) {
        return this[key];
    },
    "setItem": function(key, value) {
        this[key] = value;
    }
}

store.setItem("myKey", "value0")
store.myKey                        // "value0"
store.getItem("myKey")             // "value0"

store.setItem("setItem", "value1") // or store.setItem = "value1"
store.setItem                      // "value1" !!! - Should be: function setItem()
store["setItem"]                   // "value1" !!! - Should be: function setItem()
store.getItem("setItem")           // "value1"

store.setItem("newKey", "value2")  // Doesn't work, no longer a function.

Answer 1

Вы можете использовать прокси для этого

var store = {
    storage: {},
 
    "getItem": function(key) {
        return this.storage[key];
    },
    "setItem": function(key, value) {
        this.storage[key] = value;
    }
}


const superStorage = new Proxy(store, {
  get: function(target, prop, receiver) {    
    return target[prop] || target.storage[prop];
  }
})


superStorage.setItem("myKey", "value0");
console.log(superStorage.myKey);                        // "value0"
console.log(superStorage.getItem("myKey"));             // "value0"

superStorage.setItem("setItem", "value1"); // or store.setItem = "value1"
console.log(superStorage.setItem);                      // "value1" !!! - Should be: function setItem()
console.log(superStorage["setItem"]);                   // "value1" !!! - Should be: function setItem()
console.log(superStorage.getItem("setItem"));           // "value1"

superStorage.setItem("newKey", "value2");  // Doesn't work, no longer a function.

Некоторые очевидные преимущества:

• нет зависимостей от внешних переменных
• высокая гибкость с точки зрения пользовательских геттеров
• несколько хранилищ без перекрестных зависимостей
• без жестко заданных имен

Answer 2

Просто храните их в другом месте:

var data = {
    __proto__: null,
    getItem: null,
    setItem: null,
};
var store = {
    "getItem": function(key) {
        return (key in data ? data : this)[key];
    },
    "setItem": function(key, value) {
        (key in data ? data : this)[key] = value;
    },
};