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 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;
    },
};

Answer 2

您可以为此使用代理

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.