What are some methods for substituting standard JavaScript built-in objects?

Question

What are some methods for substituting standard JavaScript built-in objects?

My client has developed their own app using Chromium, with a navigator.appVersion of AppleWebkit/534+

https://i.sstatic.net/zEZy6.jpg

To my surprise, they have replaced the standard JavaScript built-in objects with their own version. For instance, take a look at their custom Map implementation below:

Their Map object includes methods like:

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

However, it lacks the standard Map methods such as has, keys, and values. You can compare it to the standard Map object documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map (By the way, we require a Map object here instead of a plain JavaScript object because we need the keys to be something other than strings)

I am intrigued by how they managed to achieve this. What could be the reason behind such customization?

And more importantly, how can I revert back to the default built-in version?

https://i.sstatic.net/8PTkA.jpg

javascript chromium v8

Answer 1

Answer №1

I encountered a similar issue where the global function was being overwritten.

One way I found to retrieve the original function is by utilizing the contentWindow property of an iframe:

While the following code may not execute properly in StackOverflow's code-snippets due to iframe policy, it should work in your own 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);

A screenshot demonstrating its functionality can be viewed here:

https://i.sstatic.net/8dXc1.png

This solution acts as more of a workaround; I am uncertain if there exists a more optimal approach.

Answer 2

I encountered a similar issue where the global function was being overwritten.

One way I found to retrieve the original function is by utilizing the contentWindow property of an iframe:

While the following code may not execute properly in StackOverflow's code-snippets due to iframe policy, it should work in your own 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);

A screenshot demonstrating its functionality can be viewed here:

https://i.sstatic.net/8dXc1.png

This solution acts as more of a workaround; I am uncertain if there exists a more optimal approach.

Answer 3

Answer №2

How was that accomplished?

It's actually quite simple:

Map = function() { ... }

Why would someone choose to do that?

As previously mentioned, it is likely because the code predates the availability of the built-in Map. If the code needs to be compatible with older browsers, then this decision may still hold relevance.

How can I revert back to using the built-in version?

The suggestion in another response is worth considering... I cannot think of a better approach myself.

However: It seems like your objective is to make modifications or extensions to an existing codebase. Having two separate Maps within the same code could lead to confusion -- for both yourself and future developers working on the project. As an alternative, I propose the following options:

Upgrade the entire system to utilize built-in JavaScript Maps. Replace all instances of the customized Map and then remove its definition. Use the built-in Map throughout the codebase. (Ensure client approval before dedicating time to this task.)
Maintain the current setup and continue utilizing the custom Map in your new code. While its methods may have different names, it appears to offer similar functionalities. You should be able to find examples of how to iterate over this type of map. (Keep the first option as a potential future consideration.)

Answer 4

How was that accomplished?

It's actually quite simple:

Map = function() { ... }

Why would someone choose to do that?

As previously mentioned, it is likely because the code predates the availability of the built-in Map. If the code needs to be compatible with older browsers, then this decision may still hold relevance.

How can I revert back to using the built-in version?

The suggestion in another response is worth considering... I cannot think of a better approach myself.

However: It seems like your objective is to make modifications or extensions to an existing codebase. Having two separate Maps within the same code could lead to confusion -- for both yourself and future developers working on the project. As an alternative, I propose the following options:

Upgrade the entire system to utilize built-in JavaScript Maps. Replace all instances of the customized Map and then remove its definition. Use the built-in Map throughout the codebase. (Ensure client approval before dedicating time to this task.)
Maintain the current setup and continue utilizing the custom Map in your new code. While its methods may have different names, it appears to offer similar functionalities. You should be able to find examples of how to iterate over this type of map. (Keep the first option as a potential future consideration.)

What are some methods for substituting standard JavaScript built-in objects?

Answer №1

Answer №2

Similar questions

Tinymce removes <html> tags from the output displayed in a textarea

Retrieve the callback arguments using sinon.spy within a JavaScript promise

Creating an event within a class that is generated dynamically when hovering

Having issues with validating a form using Yup for a Checkbox input?

"Error 404 encountered while trying to make an Ajax POST request

Customizing the styling of buttons in Highcharts is disabled when in full screen mode

Go to a different page section using MUI 5

To achieve the desired format, where should I press or manipulate the information?

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

What is the best way to remove an item from my online shopping cart using JavaScript?

How to safely add multiple objects to an array in TypeScript & React without replacing existing objects - Creating a Favorites list

What is the accurate way to write the ID selector for the select-option-selected in JQuery?

Toggle visibility of table row upon user click (HTML/JQuery)

Securing data in the browser using JavaScript encryption and decrypting on the server side using Node.js

CORS error: The 'Access-Control-Allow-Origin' header is missing

Tips for incorporating animated features into a bar graph using jQuery

Cleaning up objects from memory in JavaScript following an AJAX request

Finding a way to extract a singular text node after the Span element but before the br tag using Selenium WebDriver

Developing a personalized Object3D class

Showing Firestore Data as a map type: Issue encountered - React child cannot be an Object