JavaScript function prototype calling parent from child

Question

I have a stupid reference problem

I declared a namespace variable called MYAPP

var MYAPP = MYAPP || function() {

     this.name = 'My Application';
     this.someImportantID = 123;

};

And then I wanted to sperate my code in namespaces/functions and so I did

MYAPP.prototype.homepage = function() {
    urls: {
        linkOne: '/link/to/some/page/',
        linkTwo: '/link/to/some/page/'
     },
   doSomething: function() {

        // ajax call 
           $getting = $.get(this.urls.linkOne) 
        // and so on .....

        // how can I acces someImportantID ??

     }
}

then i use it like this

app = new MYAPP();
app.homepage.doSomething();

but how can I access someImportantID within the function doSomething()

Is there any reason you're using MYAPP as a constructor instead of just doing `var MYAPP = MYAPP || {...}`? — frederickf, Aug 29 '14 at 23:12

Thomas W Tupper · Answer 1 · 2014-08-29T23:24:34.400

0

Get rid of this .homepage stuff. Why are you doing that anyway?

This is something of a constructor pattern. Declare your constructor:

var MYAPP = function(URLCollection) {

     this._name = 'My Application';
     this._someImportantID = 123;
     this._URLCollection = URLCollection;

}

Then declare the instance methods:

MYAPP.prototype = {

   doSomething: function() {

        // ajax call 
           $getting = $.get(this._URLCollection.linkOne);

        // and so on .....

        // how can I acces someImportantID ??

     }
}

Then declare your instance passing in your collection of links:

var lCollection = { linkOne: 'URL', linkTwo: 'URL' };
var myHomePage = new MYAPP(lCollection);

You can access doSomething from the instance:

myHomePage.doSomething();

You can get to some important ID from the instance also:

myHomePage._someImportantId;

Or from within the instance, by:

this._someImportantId;

This is rough - it should point you in the right direction.

edited Aug 29 '14 at 23:24

answered Aug 29 '14 at 23:19

Thomas W Tupper

625
1
6
17

Yes I know, but I have many other pages like homepage. And Every page has its own (different) functions, I want to seperate them in different files, otherwise its a very long file – webmaster Aug 30 '14 at 10:50
I think what I and a few others are thrown by is your use of a constructor. Why follow the constructor pattern when all you really need are separate modules? I recommend that you search for Addy Osmani's book 'Javascript Design Patterns' and give it a read. You can find a copy here: http://addyosmani.com/resources/essentialjsdesignpatterns/book/ – Thomas W Tupper Sep 01 '14 at 01:56
yes thanks for the link, I have changed the myapp function to an object, then I have created modules like this, myapp.homepage.doSomething(), myapp.otherpage.doSomething() , this is what I wanted, thanks everyone – webmaster Sep 01 '14 at 12:28

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

If there are multiple MyApp instances then you can do the following:

//IIFE creating it's own scope, HomePage constructor
// is no longer globally available
;(function(){
  var HomePage = function(urls,app){
    this.urls=urls;
    this.app=app;
  }
  HomePage.prototype.doSomething=function(){
    console.log('urls:',this.urls,'app:',this.app);
  }
  //assuming window is the global   
  window.MyApp = function(urls){
    this.name='app name';
    this.homePage=new HomePage(urls,this);
  }
}());
var app = new MyApp(['url one','url two']);
app.homePage.doSomething();

If you only have one app and that app only has one homePage object you can do it the following way as well:

var app = {
  name:'app name'
  ,homePage:{
    urls:['url one','url two']
    ,doSomething:function(){
      console.log('urls:',this.urls,'app:',app);
      //or
      console.log('urls:',app.homePage.urls,'app:',app);
    }
  }
}

app.homePage.doSomething();

More on constructor functions, prototype and the value of this here.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 30 '14 at 01:25

HMR

37,593
24
91
160

I see how you pass this to the homepage function but how can I disclose Homepage within myapp scope, it doesnt have to be a global variable – webmaster Aug 30 '14 at 10:53
There is just one global MYAPP variable – webmaster Aug 30 '14 at 10:55
@webmaster I asked if there are more then one instances, not if you have only one constructor function. There is a difference (see link at the end of the answer). I used different capitalization because all caps is the convention for constants. I have edited my answer to have the Homepage constructor only available in the MyApp constructor. – HMR Aug 30 '14 at 13:16
I meant one instance ;) – webmaster Aug 30 '14 at 17:26
@webmaster In that case there is no need to use a constructor function and declare both app and homePage as an object literal as done in the second block of code. – HMR Aug 31 '14 at 01:31

JavaScript function prototype calling parent from child

2 Answers2