开发者

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

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 n开发者_开发问答ameEQ = 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.


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();


Try wrapping your site_ properties in functions:

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


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


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.


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. :-)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜