Overriding default functions in Javascript?

问题:

Question:
Can I override "default" functions in Javascript?

Background:
After figuring out that I had collisions between objects stored in localStorage, I decided that I should apply a prefix to all keys to avoid collisions. Obviously, I could create a wrapper function, but it would be so much neater to override the default localStorage.getItem & localStorage.setItem directly to take my prefix into account.

My example kills Firefox completely as it recursively calls itself, so it clearly isn't close to a solution. Perhaps it clarifies what I want to accomplish though.

Code:

Storage.prototype.setItem = function(key, value) {
    this.setItem("prefix"+key, value);
};

Storage.prototype.getItem = function(key, value) {
    return this.getItem("prefix"+key);
};

回答1:

You need to store the old function.

Storage.prototype._setItem = Storage.prototype.setItem;
Storage.prototype.setItem = function(key, value) {
    this._setItem("prefix" + key, value);
};

Storage.prototype._getItem = Storage.prototype.getItem;
Storage.prototype.getItem = function(key) {
    return this._getItem("prefix" + key);
};

If you don't, you get an infinite loop consuming stack space at every iteration, resulting in a stack overflow, crashing your browser :)

回答2:

Alternatively, instead of creating a new variables to hold the old Storage functions you could always bind your functions like so.

Storage.prototype.setItem = (function(key, value) {
    this.call(localStorage,"prefix" + key, value);
}).bind(Storage.prototype.setItem);

Storage.prototype.getItem = (function(key) {
    return this.call(localStorage,"prefix" + key);
}).bind(Storage.prototype.getItem);

And you get the benefits of representing your new functions as native code when inspected in the console as well as a less cluttered code.

回答3:

That is normal, you make a infinite recursion : in Storage.prototype.setItem, you call this.setItem that refers to Storage.prototype.setItem.

The same for Storage.prototype.getItem.