{"id":466,"date":"2017-03-28T14:16:17","date_gmt":"2017-03-28T14:16:17","guid":{"rendered":"http:\/\/lushprojects.com\/blog\/?p=466"},"modified":"2017-03-28T14:25:17","modified_gmt":"2017-03-28T14:25:17","slug":"javascript-objects-some-key-examples","status":"publish","type":"post","link":"http:\/\/lushprojects.com\/blog\/2017\/03\/javascript-objects-some-key-examples\/","title":{"rendered":"JavaScript Objects &#8211; some key examples"},"content":{"rendered":"<p>Some of the JavaScript handling of objects is pretty wacky IMHO. Here is some code that illustrates some key points:<\/p>\n<ul>\n<li>Global, private and instance variables<\/li>\n<li><span class=\"_Tgc\">Privileged and private functions<br \/>\n<\/span><\/li>\n<li>How &#8220;this&#8221; is assigned and how to work around that<\/li>\n<\/ul>\n<p>See also: <a href=\"http:\/\/www.crockford.com\/javascript\/private.html\">http:\/\/www.crockford.com\/javascript\/private.html<\/a><\/p>\n<p>Some may point out that my application of OOP terminology to JavaScript <a href=\"http:\/\/stackoverflow.com\/questions\/5265901\/why-does-javascript-have-privileged-functions\">isn&#8217;t correct<\/a>. Strictly, what I am showing here are properties of the way JavaScript implements closures, but for people coming from an OOP perspective it&#8217;s helpful to be able to understand how to achieve some common OOish goals.<\/p>\n<pre>\/\/ This is a constructor Test\r\nfunction Test() { \r\n\u00a0 \/\/ Assign the private instance variable \"self\" to the value of this in the constructor. \r\n\u00a0 \/\/ More later on why we want to do this\r\n\u00a0\u00a0 \u00a0var self=this; \r\n\u00a0 \r\n\u00a0 \/\/ Assign a global variable g (probably not what you want to do in a real object!)\r\n\u00a0\u00a0 \u00a0g=\"global\";\u00a0\u00a0 \u00a0\r\n\u00a0 \r\n\u00a0 \/\/ Assign a private instance variable p\r\n\u00a0 var p = \"private\";\r\n\u00a0 \r\n\u00a0 \/\/ Assign an instance variable i\r\n\u00a0 self.i = \"instance\";\r\n\r\n\u00a0 \/\/ Create a private function pp (can't be accessed form outside the object)\r\n\u00a0\u00a0 \u00a0function pp () { console.log(\"pp\"); }\r\n\u00a0 \r\n\u00a0 \/\/ Another way of assigning a private function\r\n\u00a0 var ppp = function () { console.log(\"ppp\"); }\r\n\u00a0 \r\n\u00a0 \/\/ Create a 'privileged' function (public function that can access private info)\r\n\u00a0 this.p = function() {\r\n\u00a0 \u00a0\u00a0pp();\r\n\u00a0\u00a0\u00a0 ppp();\r\n\u00a0\u00a0\u00a0 console.log(\"p=\"+p);\r\n\u00a0\u00a0\u00a0 console.log(\"this.i=\"+this.i);\r\n\u00a0\u00a0\u00a0 console.log(\"self.i=\"+self.i);\r\n\u00a0 }\r\n\u00a0 \r\n}\r\ni=\"global i\"; \/\/ assign i as a global \r\no1 = new Test();\r\n\r\n\/\/ o1.pp(); - would be an error - pp is private \"o1.pp is not a function\"\r\n\/\/ o1.ppp(); - would be an error - ppp is private.\r\no1.p(); \/\/ Outputs 'pp', 'ppp', 'p=private', 'this.i=instance' and 'self.i=instance'\r\n\r\nconsole.log(\"Now with a call-back\");\r\nsetTimeout(o1.p, 1000); \/\/ outputs 'pp', 'ppp', 'p=private', 'this.i=global i' and 'self.i=instance'\r\n\r\n\/\/ What's going on - \r\n\/\/ In the callback case the \"this\" is set to the current context which in this case is \r\n\/\/ the global document - hence getting the global \"i\" instead of the instance variable \"i\". \r\n\/\/ To get the instance variable i we want the value of \"this\" which was used during the \r\n\/\/ constructor which is stored in \"self\".<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some of the JavaScript handling of objects is pretty wacky IMHO. Here is some code that illustrates some key points: Global, private and instance variables Privileged and private functions How &#8220;this&#8221; is assigned and how to work around that See also: http:\/\/www.crockford.com\/javascript\/private.html Some may point out that my application of OOP terminology to JavaScript isn&#8217;t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/posts\/466"}],"collection":[{"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":10,"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":481,"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions\/481"}],"wp:attachment":[{"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lushprojects.com\/blog\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}