{"id":26,"date":"2016-02-14T22:06:50","date_gmt":"2016-02-14T22:06:50","guid":{"rendered":"http:\/\/165.225.137.195\/blog\/?p=26"},"modified":"2016-02-14T22:06:50","modified_gmt":"2016-02-14T22:06:50","slug":"the-this-keyword-runtime-semantics","status":"publish","type":"post","link":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/2016\/02\/14\/the-this-keyword-runtime-semantics\/","title":{"rendered":"The this Keyword Runtime Semantics"},"content":{"rendered":"<p>A function\u2019s <em>this<\/em> keyword in JavaScript have a different behavior than other languages, even it will represent different behavior between strict mode and non-strict mode. In JavaScript while executing a function <em>this<\/em> keyword plays a vital role.<br \/>\n<strong>Global Ref:<\/strong><br \/>\nIf there is no parent\/owner for a function, it will execute as global function.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar noParentFunction = function () {\nconsole.log(toString.call(this)); \/\/ &#x5B;object Window]\n};\n\/\/Call Method\nnoParentFunction();\n<\/pre>\n<p>When we execute noParentFunction function it will yield <em>this<\/em> object reference as window(global ref). As per JavaScript lexical rules if there is no specific parent of a function it will fall under window. There is no deference between below two statements:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nnoParentFunction();\nWindow.noParentFunction();\n<\/pre>\n<p><strong>Object Ref:<\/strong><br \/>\nWhenever we call parent.child() child function always get <em>this<\/em> scope as parent\u2019s. now we create a parent, it will have function child:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar parentClass = {\nname:'parent',\nchildMethod: function (){console.log(this === parentClass);} \/\/-&amp;amp;amp;gt;true\n};\n\/\/ call the method\nparentClass.childMethod();\/\/-&amp;amp;amp;gt;true\n<\/pre>\n<p><strong>Inherited Function:<br \/>\n<\/strong>when we create parent function, use <em>this<\/em> keyword inside to transfer your properties when object inherited.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar parentClass = function(){\n\/\/attach childMethod to parentClass scope by using this keyword\nthis.childMethod= function (){console.log(this);};\n};\n\/\/ Inherited parent1\nvar parent1 = new parentClass();\n\/\/ call the method\nparent1.childMethod();\/\/-&gt;parentClass\n<\/pre>\n<p>Inherited function with prototype:<br \/>\nSame as above inherited prototype methods <em>this<\/em> scope works.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar parentClass = function(){\n\/\/attache childMethod to parentClass scope by using this keyword\nthis.childMethod= function (){console.log(this);};\n};\n\/\/add prototype methode\nparentClass.prototype.parentPrototype = function ()\n{\nconsole.log(this);\n}\n\/\/ call the method\nvar parent1 = new parentClass();\nparent1.childMethod();\/\/-&gt;parentClass\nparent1.parentPrototype();\/\/-&gt;parentClass\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A function\u2019s this keyword in JavaScript have a different behavior than other languages, even it will represent different behavior between strict mode and non-strict mode. In JavaScript while executing a function this keyword plays a&hellip; <a href=\"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/2016\/02\/14\/the-this-keyword-runtime-semantics\/\">More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,14,15],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-ecma5","category-ecma6","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":0,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhoomabrsr.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}