Several years ago I was having a conversation with a friend about the future of the web and if it involved Abobe Flash or if it would eventually be replaced by HTML5 \/ JavaScript \/ CSS. The argument between the two went many different directions, however by the end of the conversation it was obvious that regardless of which remained dominant I really needed to learn more about HTML5, JavaScript, and CSS.<\/p>\n
Coming from a background in Flash (ActionScript)\u00a0the part that intrigued me most was JavaScript, specifically using it as a OOP language. I read several books, scoured the web for articles and tutorials, and quickly felt that I had a decent handle on how it was commonly used. As I continued to experiment with increasingly complex interface designs and coding techniques I ran into the same problem time and time again. The context of the keyword this<\/strong> was very inconsistent and at times not at all what I expected it to be. If you’ve ever used this<\/strong> in conjunction with an event listener or timeout callback function\u00a0to reference a dynamically created variable or an object property then it’s quite likely that you too have had the pleasure of seeing how JavaScript handles implicit references. Let’s take a look at some code to see exactly what is going on.<\/p>\n In the below\u00a0example we’ll create a simple list of collapsible\u00a0paragraphs.<\/p>\n In the above example we’ve created the Collapsible<\/strong> class which contains references to the pairs of titles and content containers, and added a click event listener to each of the titles. The problem with the above example right now is that the keyword this<\/strong> within the scope of the titleClickListener<\/strong> function refers to the collapsibleTitle<\/strong>\u00a0anchor element\u00a0rather than the instance of the Collapsible<\/strong> object. The click event listener is working properly, except that the listener is only operating within the scope of the collapsibleTitle<\/strong> anchor element and thus it doesn’t have access to any of the Collapsible<\/strong> object properties or\u00a0prototype functions.<\/p>\n One way to resolve this problem is to bring the click event listener function into the scope of the Collapsible<\/strong> class constructor and provide it with a reference to the scope of the Collapsible<\/strong> class.<\/p>\n Problem solved! Now when you click on any of the titles the corresponding content will collapse or expand. However, there are a few things left to be desired with this approach. First, the code is much more difficult to read and understand,\u00a0mostly due to\u00a0the self<\/strong> keywords and functions nested\u00a0within functions. Second, the titleClickListener<\/strong> function is no longer a prototype of the Collapsible<\/strong> class but rather a property, so it is no longer shared by each Collapsible<\/strong> instance object which uses more memory and in larger projects would slow performance. Lastly, since the function is declared locally within the scope of the addEventListener<\/strong> call there is no way for it to be shared with other events if it were ever necessary.<\/p>\n Since the root problem is that the context of the keyword this<\/strong> is being implicitly set by JavaScript and changing within the scope of the titleClickListener,<\/strong> a better approach would be to explicitly set the context of the keyword this<\/strong> when calling titleClickListener<\/strong>. This would mean that the keyword this<\/strong> could reference the Collapsible<\/strong> instance object rather than the collapsibleTitle<\/strong> anchor element. Thankfully there are two methods for doing this within JavaScript, Call<\/strong> and Apply<\/strong>. Call<\/strong> accepts an argument list while Apply<\/strong> accepts an argument array.<\/p>\n So, let’s incorporate the Call<\/strong> method into our code to see just how this works. If we revert back to the first code example and replace line 25 with the code below, everything should be working properly.<\/p>\n One last adjustment that we could make is to add a delegate prototype function to the Collapsible<\/strong> class. This could be invoked each time the context of an object needs to be adjusted when calling a function.<\/p>\n Once the delegate function is added we can now make our last adjustment to the addEventListener<\/strong> call.<\/p>\n That’s it! The delegate call will return a function that will call this.titleClickListener<\/strong> with the context of this<\/strong>, which is referencing the Collapsible<\/strong> object.<\/p>\n Learning about and understanding these two methods\u00a0have had a dramatic impact on what I’ve been capable of accomplishing with JavaScript, taking my skill to an entirely new level, and I genuinely hope that this post has helped you to learn something new or at least inspire you to do some research and studying of your own.<\/p>\n","protected":false},"excerpt":{"rendered":" Several years ago I was having a conversation with a friend about the future of the web and if it involved Abobe Flash or if it would eventually be replaced by HTML5 \/ JavaScript \/ CSS. The argument between the two went many different directions, however by the end of the conversation it was obvious […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[7,11,18,36,45,53],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-guide","tag-apply","tag-call","tag-delegate","tag-javascript","tag-oop","tag-prototype"],"acf":[],"yoast_head":"\n<!DOCTYPE html>\n<html lang=\"en\" xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<head>\n <meta charset=\"utf-8\" \/>\n <title>laubsterboy.com Example<\/title>\n <style type=\"text\/css\">\n .collapsibleContent {display:none;}\n <\/style>\n<\/head>\n<body>\n <a href=\"#\" class=\"collapsibleTitle\">Title 1<\/a>\n <p class=\"collapsibleContent\">The first short paragraph example.<\/p>\n <a href=\"#\" class=\"collapsibleTitle\">Title 2<\/a>\n <p class=\"collapsibleContent\">The second short paragraph example.<\/p>\n <a href=\"#\" class=\"collapsibleTitle\">Title 3<\/a>\n <p class=\"collapsibleContent\">The third short paragraph example.<\/p>\n\n <script type=\"text\/javascript\">\n (function (window) {\n function Collapsible(title, content) {\n this.title = title;\n this.content = content;\n this.collapsed = true;\n \/\/\n this.title.addEventListener(\"click\", this.titleClickListener, false);\n }\n Collapsible.prototype.titleClickListener = function (Event) {\n if (this.collapsed) {\n this.expand();\n } else {\n this.collapse();\n }\n }\n Collapsible.prototype.expand = function() {\n this.collapsed = false;\n this.content.style.display = \"block\";\n }\n Collapsible.prototype.collapse = function() {\n this.collapsed = true;\n this.content.style.display = \"none\";\n }\n\n var init = (function () {\n var anchors = document.body.getElementsByTagName(\"a\");\n var paragraphs = document.body.getElementsByTagName(\"p\");\n \/\/\n var titles = new Array();\n var contents = new Array();\n \/\/\n for (var i = 0; i < anchors.length; i++) {\n if (anchors[i].className == \"collapsibleTitle\") {\n titles.push(anchors[i]);\n }\n }\n for (var i = 0; i < paragraphs.length; i++) {\n if (paragraphs[i].className == \"collapsibleContent\") {\n contents.push(paragraphs[i]);\n }\n }\n for (var i = 0; i < titles.length; i++) {\n var tempCollapsible = new Collapsible(titles[i], contents[i]);\n }\n })();\n })(window);\n <\/script>\n<\/body>\n<\/html><\/pre>\nfunction Collapsible(title, content) {\n this.title = title;\n this.content = content;\n this.collapsed = true;\n var self = this; \/\/ create a variable that contains a reference to the keyword this\n this.title.addEventListener(\"click\", function (Event) {\n if (self.collapsed) {\n self.expand();\n } else {\n self.collapse();\n }\n }, false);\n}<\/pre>\nthis.title.addEventListener(\"click\", function() { self.titleClickListener.call(self, arguments)}, false);<\/pre>\nCollapsible.prototype.delegate = function (fnc, obj) { var that = obj; return function () { fnc.call(that, arguments); } }<\/pre>\nthis.title.addEventListener(\"click\", this.delegate(this.titleClickListener, this), false);<\/pre>\n