将对象或函数的引用另存为匿名函数的变量的Javascript错误做法

Question

I am developing code for a Facebook app for a website. I am setting it up so others can use the JavaScript I write on other pages (even if they don't know much JS -- they can mirror my examples); sort of framework-ish.

Some pages we want to check if the user is logged into Facebook on page load, other times we don't. So, inside the ini function I check to see if the onPgLoadCheckLogin value is set to true, then I use the Facebook toolkit to check that.

These functions work asynchronously and use callbacks to handle the responses. I want to use functions that I have set up in the (no-so-much-of-a)framework.

To do this, because its a callback, I am saving a reference to the object/function in a variable called me - just before I execute the async stuff and set up the callback.

Is this bad practice? If so, how can I get the callback to invoke the method I want to use?

Here is the code:

// Strict mode
"use strict";


/* Main object
 * @param config: array of app configuration
 */
var SMFbApp = function(config) {

    // app configuration
    this._config = (!!config && (typeof config).toLowerCase() == 'object') ? config : undefined;
    // check log in on page load
    this._onPgLoadCheckLogin = false;

    /*
     * ini
     * Initialize app
     */
    this.ini = function() {
        if(!this._config || (typeof this._config).toLowerCase() == 'undefined') {
            this._config = this.getDefaultConfig();
        }


        // mandatory configuration elements we need to address
        var fbini = [
            'appId', // dev facebook app id as default
            'cookie', // allow checking browser cookies
            'xfbml', // facebook markup in html doc ( example: <fb:login-button></fb:login-button> )
            'version', // sdk version
        ];

        var tmp = {}; // temp object to hold config vars
        // iterate through mandatory config and fill temp vars to init fbook sdk/api
        for(var idx in fbini) {
            if(!(fbini[idx] in this._config)) {
                console.error('Invalid configuration set passed to ShoeMoney Facebook App. Please review documentation for all necessary configuration values');
                this.exit(1);
            } else {
                tmp[fbini[idx]] = this._config[fbini[idx]];
            }
        }

        var me = this;
        // set up fb asycn init function with tmp object we just set up
        window.fbAsyncInit = function() {
            FB.init(tmp);
            if(me._onPgLoadCheckLogin) {
                var _this = me;
                FB.getLoginStatus(function(response) {
                    _this.statChange(response);
                });
            }
        };


    }

And the part I am questioning as bad practice is (i do it twice):

var me = this; // HERE!!! once
// set up fb asycn init function with tmp object we just set up
window.fbAsyncInit = function() {
    FB.init(tmp);
    if(me._onPgLoadCheckLogin) {
        var _this = me; // HERE!! twice
        FB.getLoginStatus(function(response) {
            _this.statChange(response);
        });
    }
};

Answer 1

What you're doing with var me = this; is a perfectly fine practice and is a common way of saving the this value for a local callback function to access. Though in your specific example, you don't have to create the _this variable. You can just access me from both callbacks like this:

// save our object reference for later use in callbacks
var me = this; 
// set up fb asycn init function with tmp object we just set up
window.fbAsyncInit = function() {
    FB.init(tmp);
    if(me._onPgLoadCheckLogin) {
        FB.getLoginStatus(function(response) {
            me.statChange(response);
        });
    }
};

---

The other main alternative if the callbacks themselves don't use a this value that you need to access is to use .bind() , but in your specific example, you would have to use .bind() in two places to get both nested logins so your method of saving in me is probably simpler.

Here's what the .bind() alternative would look like:

// set up fb asycn init function with tmp object we just set up
window.fbAsyncInit = function() {
    FB.init(tmp);
    if(this._onPgLoadCheckLogin) {
        FB.getLoginStatus(function(response) {
            this.statChange(response);
        }.bind(this));
    }
}.bind(this);

For a reference, see the MDN page for .bind() .