I have a custom library with a bunch of functions that I load everytime I work with Javascript. The problem is that they work in global namespace and sometimes they get into conflict with other loaded libraries (ex. jquery and npm modules). My idea is to create custom prototypes and define each variable with that prototype. Something like this:
let obj = new MyObj ({name: 'John', lastname: 'Doe'});
I already created custom prototypes with objects and arrays and they work fine (I suppose because they work already as objects) but I got stuck with primitive elements like String and Number.
This is what I wrote till now, trying to create a custom String Prototype:
const myStr = function (string) {
if (!(this instanceof myStr)) { return new myStr(); }
return this; //or return string?
}
myStr.prototype = Object.create(String.prototype);
myStr.prototype.constructor = myStr; //or = String?
//custom function assigned to Mystr prototype
Object.defineProperties(myStr.prototype, {
upp: {
value: function() {
return this.toString().toUpperCase();
}, enumerable: false, writable: false
}
//...other custom functions
});
let newString = new myStr('this is my own string');
console.log (newString);
//it returns 'myStr {}' and not the string passed in function :-(
Is there a way to clone a native Prototype, add to it custom functions, and finally getting an element that behaves perfectly in the same way of original native one?
Custom prototype elements could exploit native functions plus custom ones. This should prevent global prototype pollution.
Thank you!
Edit
In the end I found a solution that, for what I know, is the best compromise to have custom functions inside primitive JS Prototypes, and not to get into conflicts with other modules or libraries. Basically I add a prefix 'my' (but it can be whatever) before every custom function. It's not the 'most beautiful thing in the world', but I can't figure out how to do it differently.
This is the code for String:
Object.defineProperties (String.prototype, {
my: {
get: function() {
//it stores string value that is calling functions
const thisString = this;
const myStringFunctions = {
//use get if you want to return a value without parenthesis ()
get len () {
return thisString.length;
},
upp: function () {
return thisString.toString().toUpperCase();
}
//... other custom functions
};
return myStringFunctions;
}
}
});
The I use
console.log ( 'John Doe'.my.upp() ); //JOHN DOE
console.log ( 'John Doe'.my.len ); //8
Of course I can chain functions together, but I have to repeat the 'custom key'
console.log ( 'John Doe'.my.upp().my.len ); //8
This method can be applied to every Js Prototype.
