javascript self-invoking functions and scope

Question

This is going to be a newbie question, but as simple as the answer may be, I am struggling to understand the concept. Any feedback will be greatly appreciated

This is a simplified version of my problem

var x=(function(){
    this.load=function(){
        alert("this is x load");
    };
    return this
})();

var y=(function(){
    this.load=function(){
        alert("this is y load");
    };
    return  this
})();

x.load();
y.load();

Execution result is
alert(this is y load) for both x.load and y.load

My question
Why is x accessing the var y.load? I thought that bc each load function is wrapped in its own self-invoking anonymous function it is only accessible by the corresponding variable

Also, to ahieve what i want(to have .load() be w/in the scope of the variable), what would be the best way to declare each of these objects.( I only need 1 instance of each x and y)

I want to stick to self-involing bc inside these functions, i plan to have jquery document ready event-handlers which i want set immediately.

For a detailed description of how "this" works in javascript see: http://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628#13441628 — slebetman, Sep 27 '13 at 07:30

score 0 · Answer 1 · answered Sep 27 '13 at 07:35

a self invoking function will just provide you a disposable scope, that will allow you to create closure or just use variables without polluting the global object. 'this' is not affected. You might be confusing with the constructor function / new operator syntax, wich will provide a new value to this, hence having the behaviour you seek :

var x = new function () {
        this.load = function () {
            alert("this is x load");
        }
    }();

var y = new function () {
        this.load = function () {
            alert("this is y load");
        }
    }();

x.load();
y.load();

. .

(for the record, a the right way to use constructor function would rather be this one :

function Alerter(alerterName) {
    this.name = alerterName;
}

Alerter.prototype.load = function () {
    alert('this is ' + this.name + ' load');
};

var x = new Alerter('x');
var y = new Alerter('y');

x.load();
y.load();

)

I think you are absolutely correct in stating that i am confusing the self-invoking w/ the constructor. Thank you for the feedback — user2530844, Sep 27 '13 at 07:53

score -1 · Answer 2 · answered Sep 27 '13 at 06:50

-1

This isn't scope, it is context, and you don't have an x.load or a y.load.

The value of this is determined by how you call a function.

If you call foo.bar() then, inside bar, this will be foo.

If you don't have a foo (e.g. bar()) then the value of this will be the default object. In a browser that is window.

Since this is window in both cases, this.load is the same.

Possibly you want to use a local variable (var load) or the new keyword.

answered Sep 27 '13 at 06:50

Quentin

914,110
126
1,211
1,335

so inside the self-invoking i should instead have x.load=function(){alert()}? thanks – user2530844 Sep 27 '13 at 06:53
No! `x` doesn't exist until after you assign a value to it (which isn't until *after* the function has been executed) and (if that wasn't the case) the value you assign to it is `this` which is still `window` so you'd end up with the same problem. – Quentin Sep 27 '13 at 06:54
Thanks for your feedback. From trying out what you have advised, i basically need to drop the var x =self-invoking func to var x = new func to get this to work. And I just need to figure out an alternative way to include a doc ready func w/in the scope of x to have event handlers set immediately. Thanks again – user2530844 Sep 27 '13 at 07:25
@Quentin: `No! x doesn't exist until after you assign a value to it` That's not true at all. X exists when the js interpreter creates it during the compilation phase but its value is initially undefined. In the execution phase the result of the function is then assigned to it which makes it point to the global object (in a browser it would be window). – slebetman Sep 27 '13 at 07:26
see: http://stackoverflow.com/questions/3887408/javascript-function-declaration-and-evaluation-order/3887590#3887590 – slebetman Sep 27 '13 at 07:27

javascript self-invoking functions and scope

2 Answers2