Access members within function/setting them from outside

Question

I would really like to do this:

var Html = function() {
    alert('internal: ' + this.val);
};
Html.val = "x";
alert('external: ' + Html.val);
Html();

but it doesn't work. why? how can I get the function code to see values set after its creation?

- update -

because my original post was not so clear in its intent, and because I've posted a solution that's closer to the intention than that of other posters here, allow me to say that what I wanted was a mechanism for accessing the internal members of a function with the explicit purpose of being able to create a generic function that can be seeded to modify its behaviour later and independently

As answered already; you're using the function as a constructor for an object but you didn't create an object with it `var h=new Html()` more on construction functions, prototype, inheritance and overriding here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Aug 28 '13 at 06:27

elclanrs · Answer 1 · 2013-08-28T04:15:38.250

The this context of a JavaScript function depends on how you call the function. You can pass the context explicitly with call:

var Html = function() {
  alert('internal: ' + this.val);
};
Html.call({ val:'x' });

If you meant to use the function as a constructor you can instantiate with new:

function Html(val) {
  this.val = val;
}

var html = new Html('x'); // Must be used with `new`
alert('internal: '+ html.val);

You can add methods to the prototype if you want to extend your object:

Html.prototype.getVal = function() {
  return 'internal: '+ this.val;
};

var html = new Html('x');
alert(html.getVal());

score 1 · Answer 2 · answered Aug 28 '13 at 04:08

In Javascript, the "this" is the object associated to a method, not the method itself. The simplest solution would be to change the Html function to a method:

var html = {
  val: "x",
  draw: function(){
    console.log('internal: ' + this.val);
  }
}

html.draw();
html.val = "y"
html.draw();

If you want to keep the html function as a direct function you can either craete a wrapper around a method.

var Htmldraw = function(){
    return html.draw();
}
html.val = "asd"

Or you can change the function to use lexically scoped variables instead of "this"

var val;
var Html = function() {
    console.log('internal: ' + val);
};
val = "x";
alert('external: ' + val);
Html();

score 0 · Accepted Answer · answered Aug 31 '13 at 21:15

thank you both for taking the time to post elaborate answers. you both got thank you points.

I'm going to answer my own question for the sake of some poor sod who may struggle with this in the future... what I wanted to do is best accomplished as shown below (please see my edits in the original posting to clarify what my intention was):

function fn() {
    this.val = "x";
    this.show = function() {
        alert("internal = " + this.val);
    };
    return this;
};

var x = fn();
alert("initial = " + x.val);
x.val = "y";
alert("reset = " + x.val);
x.show();

from which you can see that a variable internal to my function is accessible from the outside. This allows me to manufacture a function and subsequently load it with a bunch of data for its use, without having to pass parameters during its creation (which is useful because when the function is actually called (as opposed to created), it will receive a different set of parameters)

Access members within function/setting them from outside

3 Answers3