How to Extend Prototypes with JavaScript

One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a […]

The post How to Extend Prototypes with JavaScript appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh

One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a massive feature of JavaScript. Let’s check out how easy it is to empower every instance of a primitive by extending prototypes!

Every JavaScript native, like Number, String, Array, Object, etc. has a prototype. Every method on a prototype is inherited by every instance of that object. For example, we can provide every `Array instance with a unique method by extending its prototype:

Array.prototype.unique = function() {
  return [...new Set(this)];
}

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

Note that if you can also ensure chaining capability by returning this:

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

The biggest criticism of extending prototypes has always been name collision where the eventual specification implementation is different than the framework implementation. While I understand that argument, you can combat it with prefixing function names. Adding super powers to a native prototype so that every instance has it is so useful that I’d never tell someone not to extend a prototype. #MooToolsFTW.

The post How to Extend Prototypes with JavaScript appeared first on David Walsh Blog.


This content originally appeared on David Walsh Blog and was authored by David Walsh


Print Share Comment Cite Upload Translate Updates
APA

David Walsh | Sciencx (2022-10-31T12:13:00+00:00) How to Extend Prototypes with JavaScript. Retrieved from https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/

MLA
" » How to Extend Prototypes with JavaScript." David Walsh | Sciencx - Monday October 31, 2022, https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/
HARVARD
David Walsh | Sciencx Monday October 31, 2022 » How to Extend Prototypes with JavaScript., viewed ,<https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/>
VANCOUVER
David Walsh | Sciencx - » How to Extend Prototypes with JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/
CHICAGO
" » How to Extend Prototypes with JavaScript." David Walsh | Sciencx - Accessed . https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/
IEEE
" » How to Extend Prototypes with JavaScript." David Walsh | Sciencx [Online]. Available: https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/. [Accessed: ]
rf:citation
» How to Extend Prototypes with JavaScript | David Walsh | Sciencx | https://www.scien.cx/2022/10/31/how-to-extend-prototypes-with-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.