如何替换javascript标准内置对象？

Question

My client builds their own app based on Chromium, their navigator.appVersion is AppleWebkit/534+

But to my surprise they replace javascript standard built-in objects with their own, for example, check their Map bellow,

Their Map has methods like,

arr:Array[0]
isEmpty:function
remove:function

But no standard Map method like has, keys, values , check here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map (BTW, the reason we need Map here instead of plain js object is we need the key to be something other than string)

I am curious, how did they do that? Why would someone want to do that!!

And more importantly how do I restore the build in version ?

Answer 1

I had the same issue that the global function has been overwritten.

My trick is to use the contentWindow of an iframe to get the original function back:

Here's the code, it doesn't work in code-snippets of StackOverflow due to iframe policy, but it should work with your environment:

// contaminated Map
Map = function() {
    this.foo = 'bar';
}
const map1 = new Map();
console.log(map1);

​
// restoring Map
const iframe = document.createElement('iframe');
document.body.append(iframe);
const OriginalMap = iframe.contentWindow.Map;
iframe.remove();
​
const map2 = new OriginalMap();
map2.set('foo', 'bar');
console.log(map2);

Here's the screenshot shows that it works:

This is more like a workaround, not sure if there's a better way to do it.

Answer 2

how did they do that?

It's as simple as:

Map = function() { ... }

Why would someone want to do that!!

As other comments have guessed, probably because the code is older than the availability of built-in Map . If the same code is also supposed to run on older browsers, then this consideration might still be relevant.

how do I restore the build in version ?

The suggestion in the other answer is an interesting idea... I can't think of a better way.

That said: I'm guessing your task is to make extensions/modifications to an existing codebase. Having two different Map s in the same codebase sounds pretty confusing -- for anyone working on this code after you (which may be yourself, in a couple of months), it'll be pretty hard to understand what's going on. So I offer another suggestion: don't just locally get the built-in Map , and instead pick either of:

• modernize the whole system to use built-in JavaScript Map s. Replace all uses of the handcrafted Map, and then delete that definition. Use built-in Map everywhere. (Check with your client though whether they are okay with you spending your time on this.)
• stick with what's there, and use the handcrafted Map in your new code as well. While its functions have different names, it seems that all the important features are there. You can probably find an example of how to iterate over such a map. (This would still leave the above alternative as a future option.)