How to Extend Prototypes with JavaScript

One of many ideological sticking factors of the primary JavaScript framework was was extending prototypes vs. wrapping features. Frameworks like MooTools and Prototype prolonged prototypes whereas jQuery and different smaller frameworks didn’t. Every had their advantages, however finally all these years later I nonetheless consider that the power to increase native prototypes is an enormous characteristic of JavaScript. Let’s try how simple it’s to empower each occasion of a primitive by extending prototypes!

Each JavaScript native, like Quantity, String, Array, Object, and many others. has a prototype. Each methodology on a prototype is inherited by each occasion of that object. For instance, we will present each `Array occasion with a distinctive methodology by extending its prototype:

Array.prototype.distinctive = operate() {
  return [...new Set(this)];
}

['1', '1', '2'].distinctive(); // ['1', '2']
new Array('1', '1', '2').distinctive(); // ['1', '2']

Word that if it’s also possible to guarantee chaining functionality by returning this:

['1', '1', '2'].distinctive().reverse(); // ['2', '1']

The largest criticism of extending prototypes has all the time been title collision the place the eventual specification implementation is completely different than the framework implementation. Whereas I perceive that argument, you possibly can fight it with prefixing operate names. Including tremendous powers to a local prototype so that each occasion has it’s so helpful that I would by no means inform somebody to not prolong a prototype. #MooToolsFTW.