Object Oriented javascript - "this" keyword and function access inside an object

Question

This is the first time I'm trying to use OO JS. Here is what I came up with so far:

var myObj = { 1 site_url: window.location.protocol + "//" + window.location.hostname + "/", 2 site_host: window.location.hostname, 3 site_brand: this.readCookie('aCookieName'), 4 site_full_url: this.site_url + window.location.pathname, 5 /*** 6 Read a cookie by its name; 7 **/ 8 9 readCookie: function(name) { 10 var nameEQ = name + "="; 11 var ca = document.cookie.split(';'); 12 for(var i=0;i < ca.length;i++) { 13 var c = ca[i]; 14 while (c.charAt(0) == ' ') c = c.substring(1, c.length); 15 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 16 } 17 return null; 18 }, 19 20 /*** 20 ***/ 22 SaySomeThing: function() { 23 alert(this.site_brand); 24 } } 

Feel me, I'm new to this. I have a problem:

Line No. 3 - I get an error message: readCookie - undefined;
Line No. 4 - Another error: site_url undefined;

Please help me with the above.

Answer 1

In javascript, an object has no concept of this .

The meaning of the this is determined in the function by how this function is called.

For example, in myObj , if you do this:

 myObj.readCookie('someName'); 

Then, inside the readCookie this function, readCookie will be set.

If you want site_brand call the readCookie function, you must give site_brand your own function that calls it:

 site_brand: function() { return this.readCookie('aCookieName'); }, 

... and name it like this:

 myObj.site_brand() 

... so this inside the site_brand function is a reference to myObj .

---

EDIT: The code in the question has changed a bit (due to formatting, I think).

The answer is the same, but I would just notice that calling this.site_brand in the SaySomeThing function SaySomeThing fine as long as myObj was called from SaySomeThing .

  // this is fine SaySomeThing: function() { alert(this.site_brand); } // as long as you're calling it something like myObj.SaySomeThing(); 

Answer 2

Try wrapping your site_ properties in a function:

 site_brand: function() { return this.readCookie('aCookieName'); } 

Answer 3

In the syntax highlighting above, you seem to have commented on your readCookie method. Does this look like your real code?

Answer 4

The problem is that this not what you think. It will have this value in the surrounding space. Besides what other users have posted, if you want to use ECMAScript 5, you can use the new getter syntax.

 get site_brand() { return this.readCookie('aCookieName'); } 

This will allow you to use the property without parentheses.

 obj.site_brand // Call the getter. 

Answer 5

Avoid this . Usually you do not need this, except in special cases. Here's how I write it (in a hurry):

 var myObj = (function { /*** Read a cookie by its name; ***/ var readCookie = function(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }; var saySomeThing = function() { alert(this.site_brand); }; var result = { site_url: window.location.protocol + "//" + window.location.hostname + "/", site_host: window.location.hostname site_brand: readCookie('aCookieName'), site_full_url: null, // you can't access other parts of the same object in an object literal saySomeThing: saySomeThing }; result.site_full_url = result.site_url + window.location.pathname; return result; })(); 

This assumes that you do not need the readCookie function from outside the readCookie object and that you want to access saySomeThing from outside your object.

By wrapping the entire definition in an anonymous function (which runs immediately), you hide the readCookie and saySomeThing functions from all but the newly created object.

I highly recommend you read Douglas Crockford . :-)