oop - Hide variables within an anonymous JavaScript function but access them using `this` -

i'll use following javascript code demonstrate trying do.

var app = function() {      var url     var width     var height      function init()     {         url = window.location.href         width = document.body.clientwidth         height = document.body.clientheight     }      function run()     {         init()         alert(url + ' - ' + width + 'x' + height)     }      return {         run: run     } }()  app.run() 

( run code at: http://jsfiddle.net/zepq9/ )

the above code achieves 3 things:

1. avoids global variables , functions (except global object app intentionally exposed global namespace).
2. hides url, width , height variables , init() function within anonmyous function.
3. exposes run() function outside anonymous function.

however, not approach because init() , run() functions have work variables url, width , height. in more involved , larger javascript code, difficult see variable url in function , tell coming from. 1 has lot of scrolling answer questions like: local variable? global variable? local anonmyous function?

right solving problem following code.

var app = function() {      var self = {         url: '',         width: 0,         height: 0     }      function init()     {         self.url = window.location.href         self.width = document.body.clientwidth         self.height = document.body.clientheight     }      function run()     {         init()         alert(self.url + ' - ' + self.width + 'x' + self.height)     }      return {         run: run     } }()  app.run() 

( run code at: http://jsfiddle.net/cxalf/ )

now, can see self.url , tell variable coming self object, scope of know limited anonmyous function due coding convention of using self object hold variables shared functions within anonymous function. note self.url still hidden within anonymous function , not visible outside it.

ideally, use this.url, this.width, etc. instead of self.url, self.width, etc. unable arrive @ solution keep this.url, this.width, etc. invisible outside anonmyous function. possible?

you can use bind permanently set this value of each function:

var app = function() {      var self = {         url: '',         width: 0,         height: 0     };      var init = function()     {         this.url = window.location.href;         this.width = document.body.clientwidth;         this.height = document.body.clientheight;     }.bind(self);      var run = function()     {         init();         alert(self.url + ' - ' + self.width + 'x' + self.height);     }.bind(self);      return {         run: run     } }(); 

note older browser don't support bind, can use polyfill add browsers don't supply automatically.

note don't think code good idea, want. think there's nothing wrong using self explicit container variables, , using this instead may make code harder others understand (as may assume app meant have instances).