javascript - 可以在 RequireJS 模块中使用 'this' 关键字吗？

Question

我定义了一个 RequireJS 模块(见下文)。它是网站上每个页面都需要的功能的集合。

返回对象中的一个函数 initTwitter() 需要调用同一对象中的另一个函数 shortenURL()。我收到一个控制台错误，内容为“TypeError: this.shortenURL is not a function.”

所有这些函数最初都在一个常规的 Javascript 单例对象中，代码运行良好。我是 RequireJS 的新手，所以我不确定 this 关键字在 RequireJS 中的工作方式是否不同，或者我只是做错了什么。

编辑:我也尝试删除“this”，但我收到“ReferenceError: shortenURL is not defined”消息。

define(['config', 'jquery'], function(config, $) {
    /* Site-wide functions go here */

    return {
        doesObjPropertyExist: function(obj, prop) {
            var parts = prop.split('.');
                for(var i = 0, l = parts.length; i < l; i++) {
                    var part = parts[i];
                    if(obj !== null && typeof obj === "object" && part in obj) {
                        obj = obj[part];
                    }
                    else {
                        return false;
                    }
                }
            return true;
        },
        /** 
         * Shorten URL via bit.ly
         * Requires a callback function, so that once getJSON is absolutely finished, we can continue with the function
         */
        shortenURL: function(longURL, callback, settingsOverride) {
            var defaults = {
                login: '@bitly.username@',
                apiKey: '@bitly.key@'
            };

            $.extend({}, defaults, settingsOverride);
            var bitly_service_url = "http://api.bit.ly/v3/shorten?" + "&login=" + defaults.login + "&apiKey=" + defaults.apiKey + "&longUrl=" + longURL + "&format=json&callback=?";
            $.getJSON(bitly_service_url, function(results){
                if (results.status_txt === "OK") {
                    callback(results.data["url"]);
                }
                else {
                    callback(longURL);
                }
            });
        },
        initTwitter: function() {
            var bitly_obj = '',
                $bitly_link = '',
                twitterShortenUrl = function(obj, $elem) {
                    this.shortenURL(obj.url, function(url) {
                        $elem.attr('href', 'http://twitter.com/home?status=' + 'From @Real_Simple ' + arg_obj.headline + ' ' +  shortened_url);
                    });
                };

                $bitly_link = $('#share-twitter');

                /* On document.ready, only call bitly service and change the link href if the twitter link exists; cannot use page_context, 
                 * because we are looking for a specific element ID that is only placed when Twitter is needed. 
                 */
                if ($bitly_link.length) {
                    bitly_obj = config.page_context.bitly;

                    twitterShortenUrl(bitly_obj, $bitly_link);
                }
        },
        initFullSiteLink: function() {
                var canonical_url = $('link[rel="canonical"]').attr('href'),
                    content_type = config.markup_id.content;

                    if (content_type == 'search') {
                        $('#fullsite').attr('href', canonical_url + location.search + '&nomobile=1');
                    } else {
                        $('#fullsite').attr('href', canonical_url + '?nomobile=1');
                    }
        },
        initNav: function() {
            /* Global navigation */
            /* Make Channels button open and close the global flyout navigation */
            $('#channels-toggle').bind('click', function() {
                if ($('#channels').hasClass('is-open')) {
                    $('#channels').removeClass('is-open');
                } else {
                    $('#channels').addClass('is-open');
                }

                return false;
            });

            /* Touch the close button in the global flyout navigation to close it */ 
            $('#channels .close').bind('click', function() {
                $('#channels').removeClass('is-open');

                return false;
            });
        },
        omniture: {
            mobilePageTrack: function (desc) {
                /* Global function in rsmobile.js */
                omniPg(desc);
            }
        },
        init: function() {
           this.initNav();
           this.initTwitter();
           this.initFullSiteLink();
        }
    }   /* End return object */
});

编辑 2:原来我代码中的“this”在另一个函数中，所以它的作用域变成了 window。在进入函数之前，我需要保留 this 的范围。

initTwitter: function() {
            var bitly_obj = '',
                $bitly_link = '',
                self = this;    /* Preserve scope of this */

            var twitterShortenUrl = function(obj, $elem) {
                    self.shortenURL(obj.url, function(url) {
                        $elem.attr('href', 'http://twitter.com/home?status=' + 'From @Real_Simple ' + obj.headline + ' ' + url);
                    });
                };
/* rest of code .... */

否则，Paul 的回答强调我可以返回任何内容并添加初始化。

Answer 1

不，因为 Require.js 不会为 this 做任何魔术绑定(bind)。您应该将模块重写为实例对象:

define(['config', 'jquery'], function(config, $) {
    function obj() {
        this.initNav();
        this.initTwitter();
        this.initFullSiteLink();
    }
    obj.prototype = {
        doesObjPropertyExist: function (/*...*/) { /*...*/ },
        shortenURL: function (/*...*/) { /*...*/ },
        initTwitter: function (/*...*/) { /*...*/ },
        initFullSiteLink: function (/*...*/) { /*...*/ },
        initNav: function (/*...*/) { /*...*/ },
        omniture: function (/*...*/) { /*...*/ }
    };
    return obj;
});

require(['that_main_module'], function (obj) {
    var newObj = new obj();
});