object oriented javascript - "this" key word and accessing functions within an object

Question

I am, for the first time, trying some OO JS. Here is what I've come 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  }
}

Bear with me, I am new to this. The problem I have is:

Line # 3 - I get an error: readCookie is undefined;
Line # 4 - Another error: site_url is undefined;

Please help me with the above.

You may learn that you will drop some of your intentions of "Object-Oriented"-ness as you use JavaScript more. You will likely find frustration because there is not one single way to do what you want to do. So search stack overflow for other people asking about object-oriented JavaScript and pay attention to the patterns they use to add functions to an object. One thing I will suggest is that, if you are using one-off classes/singletons, check out the revealing module pattern: wait-till-i.com/2007/08/22/… — pc1oad1etter
– pc1oad1etter, Commented Feb 2, 2011 at 14:59

user113716 · Accepted Answer · 2011-02-02 14:55:13Z

4

In javascript, an object has no concept of this.

The value of the this keyword is determined in a function by how that function is called.

For example, in your myObj, if you do:

myObj.readCookie('someName');

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

If you want site_brand to call the readCookie function, then you should give site_brand its own function that calls it:

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

...and call it like:

myObj.site_brand()

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

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

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

 // this is fine
SaySomeThing: function() {
   alert(this.site_brand);
}

 // as long as you're calling it something like
myObj.SaySomeThing();

edited Feb 2, 2011 at 14:55

answered Feb 2, 2011 at 14:49

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lshettyl Over a year ago

Thanks a ton and I got to learn something new today. Now can I assign the output of myObj.site_brand() to a variable like site_cookie: myObj.site_brand or site_cookie: this.site_brand?

user113716 Over a year ago

@LShetty: Yes, as long as the readCookie() method it is calling returns something, then site_brand() will return the same value, so you'd just do var result=myObj.site_brand(); (Currently it looks like readCookie just returns null.)

user113716 Over a year ago

...I see you updated your comment. Remember you can only use this inside a function. If you're saying you want to add a property to myObj, then inside the site_brand function, you could do this.siteCookie = this.readCookie('aCookieName'). This will add a siteCookie property to myObj (if it doesn't exist), and assign it the result returned from readCookie.

Jakub Konecki · Accepted Answer · 2011-02-02 14:49:22Z

0

Try wrapping your site_ properties in functions:

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

answered Feb 2, 2011 at 14:49

Jakub Konecki

46.1k8 gold badges92 silver badges128 bronze badges

Comments

Phrogz · Accepted Answer · 2011-02-02 14:50:41Z

0

Per the syntax highlighting above, you appear to have commented out your readCookie method. Is this how your actual code appears?

answered Feb 2, 2011 at 14:50

Phrogz

304k115 gold badges669 silver badges758 bronze badges

Comments

ChaosPandion · Accepted Answer · 2011-02-02 14:51:35Z

0

The problem is that this is not what you think it is. It will have the value of the this value in the surrounding scope. Aside from what other users have posted if you wish to take advantage of 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.

answered Feb 2, 2011 at 14:51

ChaosPandion

78.4k18 gold badges122 silver badges159 bronze badges

Comments

Martijn · Accepted Answer · 2011-02-02 15:05:22Z

Avoid this. You usually won’t need it, except in very specific cases. Here’s how I would write this (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 is assuming that you won’t be needing the readCookie function from outside the myObj object, and that you do want to access saySomeThing from outside your object.

By wrapping the whole definition in an anonymous function (which gets executed immediately), you hide the 'readCookie' and 'saySomeThing' functions from everyone except the newly created object.

I strongly suggest you read up on Douglas Crockford. :-)

Collectives™ on Stack Overflow

object oriented javascript - "this" key word and accessing functions within an object

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related