{"id":510,"date":"2013-08-12T03:59:02","date_gmt":"2013-08-12T07:59:02","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/acts\/?p=510"},"modified":"2013-08-12T08:36:19","modified_gmt":"2013-08-12T12:36:19","slug":"javascript-callback-scope","status":"publish","type":"post","link":"https:\/\/archive.blogs.harvard.edu\/acts\/2013\/08\/12\/javascript-callback-scope\/","title":{"rendered":"Javascript Callback Scope"},"content":{"rendered":"<p>I ran into an annoying issue with js callback scope recently and wanted to document it for myself somewhere. Callbacks are super simple at the core &#8212; passing a function as a parameter to another function. <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ncallbackFn =  function(){\r\n  alert(&quot;bam&quot;);\r\n}\r\nfirstFn = function(callback){\r\n  callback();\r\n}\r\nfirstFn(callbackFn);\r\n<\/pre>\n<p>That&#8217;s all well and good so long as everything is in the global scope. But that&#8217;s just bad practice. <\/p>\n<p>So in OO js, you&#8217;d have something like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nObj = {\r\n  callbackFn: function(){\r\n    alert(&quot;bam&quot;);\r\n  },\r\n  firstFn: function(callback){\r\n    callback();\r\n  },\r\n  secondFn: function(){\r\n    this.firstFn(this.callbackFn);\r\n  }\r\n}\r\nObj.secondFn();\r\n<\/pre>\n<p>This will actually be executing callbackFn in the global scope. The &#8216;this&#8217; just gets lost. Note that you may only notice this if you&#8217;re expecting the this of callbackFn to find what&#8217;s in your obj (the above sample will probably work just fine).<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nObj = {\r\n  myalert: function(){\r\n    alert(&quot;bam!&quot;);\r\n  },\r\n  callbackFn: function(){\r\n    this.myalert();\r\n  },\r\n  firstFn: function(callback){\r\n    callback();\r\n  },\r\n  secondFn: function(){\r\n    this.firstFn(this.callbackFn);\r\n  }\r\n}\r\nObj.secondFn();\r\n<\/pre>\n<p>There, that one will fail.<\/p>\n<p>The solution is to use the apply() function.<br \/>\nhttps:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/apply<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nObj = {\r\n  myalert: function(){\r\n    alert(&quot;bam!&quot;);\r\n  },\r\n  callbackFn: function(){\r\n    this.myalert();\r\n  },\r\n  firstFn: function(callback, callbackObj){\r\n    callback.apply(callbackObj);\r\n  },\r\n  secondFn: function(){\r\n    this.firstFn(this.callbackFn, this);\r\n  }\r\n}\r\nObj.secondFn();\r\n<\/pre>\n<p>And that will work as intended.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I ran into an annoying issue with js callback scope recently and wanted to document it for myself somewhere. Callbacks are super simple at the core &#8212; passing a function as a parameter to another function. callbackFn = function(){ alert(&quot;bam&quot;); } firstFn = function(callback){ callback(); } firstFn(callbackFn); That&#8217;s all well and good so long as [&hellip;]<\/p>\n","protected":false},"author":4571,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[111225,111293,111224,111223],"class_list":["post-510","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-callback","tag-javascript","tag-object-oriented","tag-scope"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/posts\/510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/users\/4571"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/comments?post=510"}],"version-history":[{"count":3,"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/posts\/510\/revisions"}],"predecessor-version":[{"id":601,"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/posts\/510\/revisions\/601"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/media?parent=510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/categories?post=510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/acts\/wp-json\/wp\/v2\/tags?post=510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}