Why can't I reference an object literal from inside an object literal?

Question

not sure if this is possible or if I'm doing it wrong. I'm trying to have an object literal reference one of it's own properties that is another object literal. I keep getting an error stating that it is undefined:

var MyObject = {
    init: function(){
        this.elements.buttons.click(function(){
            alert('hit');
        });
    },
    elements: {
        buttons: $('button')
    }
}

what am i doing wrong?

UPDATE: main.js is calling init to initialize on demand which probably doofed the scope --

function executeFunctionByName(functionName, context /*, args */) {
    var args = [].slice.call(arguments).splice(2);
    var namespaces = functionName.split(".");
    var func = namespaces.pop();
    for(var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
    }
    return context[func].apply(this, args);
}

$(document).ready(function(){
    // invoke init() for any element that requests it
    $('[data-page]').each(function(i, p){
        var page = 'APP.MODEL.' + $(p).data('page') + '.init';
        executeFunctionByName(page, window)
    });
});

this will refer to MyObject if you call it from there, the problem here is that click is not defined on elements, which is a regular object, not a jquery object — Willem D'Haeseleer, Apr 21 '14 at 20:58
Updated code works actually: https://www.dropbox.com/s/krburpqrzlfq96y/Screenshot%202014-04-22%2001.05.25.png are you sure that JQuery is presented on page? — Tommi, Apr 21 '14 at 21:05
Did you try changing `this` to `MyObject`?. If it worked this way, then it has to do with the way you're calling the init function. — user193130, Apr 21 '14 at 21:05
http://jsfiddle.net/s4XLa/ here is working fiddle. Your jquery is obviously not works. — Tommi, Apr 21 '14 at 21:07
@Tommi that is really weird. If I write other jquery on the page, it works fine — Sinaesthetic, Apr 21 '14 at 21:10
I did think of that. Jquery is loaded in the head at the moment and the script that's not working is loaded at the bottom of the page. I'm checking all the order of executions right now. — Sinaesthetic, Apr 21 '14 at 21:13
@Sinaesthetic Could you paste the exact error that's generated in the console? It should say exactly which variable is undefined — user193130, Apr 21 '14 at 21:15
it seems that it is elements that is undefined: http://i.imgur.com/PyNTnzP.png — Sinaesthetic, Apr 21 '14 at 21:18
Ah. And where and how are you calling the init function? Could you add this line as the first line of the init function? `console.log(this)` — user193130, Apr 21 '14 at 21:20
init is being called from $(document).ready() in main.js which is the last file reference — Sinaesthetic, Apr 21 '14 at 21:23
Ok there's the problem. Did you try replacing `this` temporarily with `MyObject` to see whether it works? — user193130, Apr 21 '14 at 21:24
The problem is you're calling the init function incorrectly. You probably did something like `var init = MyObject.init; init();` That would cause this problem. You would need to call `MyObject.init` directly. If that's not possible, you may use .call or .apply. I'll paste the doc for that in a sec — user193130, Apr 21 '14 at 21:27
alright. so i called init directly from the page and it works fine so it's something to do with main.js — Sinaesthetic, Apr 21 '14 at 21:27
Ah yeah, I am doing something like that. I will post the nonsense to the OP so maybe I can salvage this — Sinaesthetic, Apr 21 '14 at 21:29
Ok I've updated my answer with docs and showing an example of how it works. Make sure you pass `MyObject` to the call/apply function — user193130, Apr 21 '14 at 21:34
@Sinaesthetic you call it with `this` which points to the window object, but you should call it with `context` which points to the object containing `elements`. — basilikum, Apr 21 '14 at 21:37
oh wait! you meant in executeFunctionByName. Yes that did it — Sinaesthetic, Apr 21 '14 at 21:41

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

If you are invoking that function directly without going through MyObject, this would be undefined. Replace this with MyObject and it should work.

This would not work as this would be defined to window:

var MyObject = {
    // init: ...
}
var init = MyObject.init;
init();

See 3. Entering function code: How does the "this" keyword work?

If you wish to continue to use this, you may use Function.prototype.call() or Function.prototype.apply() like so:

var MyObject = {
    // init: ...
}
var init = MyObject.init;
init.call(MyObject);

edited May 23 '17 at 12:05

Community

1
1

answered Apr 21 '14 at 20:59

user193130

8,009
4
36
64

Your answer is plain wrong, this will refer to MyObject if you call if from MyObject, the problem here is that click is not defined, this has nothing to do with it – Willem D'Haeseleer Apr 21 '14 at 20:59
@Willem D'haeseleer Please read what I wrote. I said WITHOUT going through MyObject – user193130 Apr 21 '14 at 21:01
@Willem D'haeseleer Oh you're right about the click. However, the OP changed it to `buttons.click` so that's not the problem. – user193130 Apr 21 '14 at 21:03
Very correct, but the problem still isn't related to `this`, it's probably jquery related or something. So your answer still isn't being very helpfull. – Willem D'Haeseleer Apr 21 '14 at 21:07
@WillemD'haeseleer Well we still don't know what the problem is so I'll leave this up here in case it helps anyone else because a lot of people actually don't know that `this` is undefined if not called from `MyObject` as in this case. – user193130 Apr 21 '14 at 21:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51131/discussion-between-willem-dhaeseleer-and-user193130) – Willem D'Haeseleer Apr 21 '14 at 21:15
There appears to be know discussing anything with you, you seem to think you know everything – Dexygen Apr 21 '14 at 21:31

Why can't I reference an object literal from inside an object literal?

1 Answers1