{"id":20303,"date":"2015-05-29T23:46:40","date_gmt":"2015-05-29T18:16:40","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=20303"},"modified":"2015-06-01T10:15:47","modified_gmt":"2015-06-01T04:45:47","slug":"monkey-patching-in-javascript","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/monkey-patching-in-javascript\/","title":{"rendered":"Monkey Patching in Javascript"},"content":{"rendered":"

Monkey Patching<\/h1>\n

The Monkey patching<\/strong> is a concept which is used to extend the behavior of a function without changing its original source code. We can add some extra functionality which can work a long with the original functionality(Before or after depends on the use case). The original function may be from third party module or it can be your own function. Popularly known as duck punching<\/strong>.<\/p>\n

Here is the sample code where we can see how Monkey Patching happens.<\/p>\n

[js]<\/p>\n

var myDb = {
\n _password: ‘PASSWORD’,
\n _username: ‘VINI’
\n}<\/p>\n

function Auth() {
\n \/*something here*\/
\n}<\/p>\n

\/\/ Original method<\/p>\n

Auth.prototype.login = function (username, password) {
\n\/\/ login method code
\n if (username == myDb._username && password == myDb._password) {
\n return username + ‘ logged in successfully!’;
\n }
\n else {
\n return ‘Sorry! Spammer ‘;
\n }
\n}<\/p>\n

var newAuth = new Auth();
\nconsole.log(newAuth.login(‘vini’, ‘password’));<\/p>\n

[\/js]<\/p>\n

Output:<\/h3>\n

[js]<\/p>\n

\/\/Sorry! Spammer<\/p>\n

[\/js]<\/p>\n

Explaination of previous code<\/h3>\n

Here Auth is the function which contains, login function. What we want to achieve, is override this login function. We can do it either rewrite the previous code but in most of the cases we do not know the prototype of the code and we just dont want to mess around with the existing one. So here Monkey Patching comes into play.<\/p>\n

Below is a sample snippet to override this login method with the help of Monkey Patching.<\/p>\n

[js]<\/p>\n

\/\/ add some operation before and after the original method.<\/p>\n

newAuth.login = (function (original) {
\n return function (username, password) {
\n\/\/ before method calling alter the original arguments
\n var newUsername = username.toUpperCase();
\n var newPassword = password.toUpperCase();
\n console.log(‘password::’, newPassword, ‘username::’, newUsername);
\n var result = original.apply(this, [newUsername, newPassword]);
\n\/\/ after
\n\/\/ here work on result to alter original output
\n console.log(‘Result =’, result);
\n }
\n})(newAuth.login);<\/p>\n

newAuth.login(‘vini’, ‘password’)<\/p>\n

[\/js]<\/p>\n

Output:<\/h3>\n

[js]<\/p>\n

\/\/password:: PASSWORD username:: VINI<\/p>\n

\/\/Result = VINI logged in successfully!<\/p>\n

[\/js]<\/p>\n

So what exactly we have done here is, we can see additional logging with its normal working. With some simple lines of code we have successfully overrided login method without changing its original functionality. All thanks to \u201cMonkey Patching\u201d.<\/p>\n

Hope this helps.<\/p>\n","protected":false},"excerpt":{"rendered":"

Monkey Patching The Monkey patching is a concept which is used to extend the behavior of a function without changing its original source code. We can add some extra functionality which can work a long with the original functionality(Before or after depends on the use case). The original function may be from third party module […]<\/p>\n","protected":false},"author":148,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[1],"tags":[1823],"class_list":["post-20303","post","type-post","status-publish","format-standard","hentry","category-technology","tag-oojs"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t