从JavaScript对象内部的函数中引用函数

Question

var Page = {
    data: null,
    Load: function () {
        this.Populate;
    },
    Populate: function () {
    }
};

$(document).ready(Page.Load);

1. Why can't I reference Page.Load as a function in ready() eg .ready(Page.Load())
2. Why can't I call this.Populate() from the Load function, I just get this.Populate() is not a function.

Answer 1

Why can't I reference Page.Load as a function in ready() eg .ready(Page.Load())

Sticking () on the end calls a function. You want to pass the function itself, not its return value. (The ready function will call what you pass to it later).

Why can't I call this.Populate() from the Load function, I just get this.Populate() is not a function

Two reasons.

First, you never actually call the Populate function. Change to:

this.Populate()

Second: because you detach the Load function from the object, so this isn't Page by the time it gets called.

Do this instead:

$(document).ready(function () { Page.Load() });

Answer 2

A function call should be in the format function_name() (parentheses!). A function reference should be function_name (without parentheses). This code will work:

var Page = {
    data: null,
    Load: function () {
        Page.Populate(); //PARENTHESES
    },
    Populate: function () {
    }
};

$(document).ready(Page.Load);//NO PARENTHESES

$(document).ready is a function which expects a function to be parameter 1. If you use Page.Load() , you will execute function Page.Load() and pass the return value ( undefined , in this case) to $(document).ready .

Answer 3

There are two problems in your code.

First, as Rob says, you're not actually calling the Populate() method in Load() . You need to add parenthesis to do that.

Second, the this keyword in Populate() does not refer to the Page object. You can use $.proxy() to set the Page object as the context of the method call:

var Page = {
    data: null,
    Load: function() {
        this.Populate();
    },
    Populate: function() {
    }
};

$(document).ready($.proxy(Page.Load, Page));

Answer 4

You can get it to work by wrapping your object up in a function like this:

var Page = (function () {
    var that = {
        data: null,
        Load: function () {
            that.Populate(); 
        },
        Populate: function () {
            alert("Test");
        }
    };
    return that;
})(); // Execute the function immediately to return 'that'

$(document).ready(Page.Load);

This way you can call between methods as you have a reference to the object (that).

JSBin Example

Answer 5

You're calling the function Page.Load. But more specifically you're calling the function that Page.Load is set to (since that argument to .ready() is just a simple value); you're not calling it on Page, so 'this' is not reset to point to the Page object.

This will work better:

$(document).ready(function() {
    Page.Load();
});