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. :-)
精彩评论