【问题标题】:Can the 'this' keyword be used inside a RequireJS module?'this' 关键字可以在 RequireJS 模块中使用吗?
【发布时间】:2013-01-17 00:40:12
【问题描述】:

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

返回对象中的一个函数 initTwitter() 需要调用同一个对象中的另一个函数 shortURL()。我收到一个控制台错误,上面写着“TypeError:this.shortenURL 不是函数。”

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

编辑:我也尝试删除“this”,但收到“ReferenceError:shortURL 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 的回答强调我可以返回任何东西并添加初始化。

【问题讨论】:

  • 除非 RequireJS 执行一些 bind 调用(它可能),否则 this 值在执行时根据 how the function is invoked 确定。
  • 原来因为'this'在另一个函数里面,所以范围确实变成了'window'
  • thiswindow 因为 如何 你调用了twitterShortenUrltwitterShortenUrl(...); 如果你改为调用它为someObj.twitterShortenUrl(...);,那么this 会是someObj
  • aspillers,你是对的。但是,在我的原始代码中,twitterShortenUrl() 没有附加到 someObj。我定义的对象是匿名的,所以我使用了“this”。但是由于我在 var twitterShortenUrl = function() {} 中调用了“this”,因此“this”在另一个函数中,因此范围发生了变化。当我在那里放一个断点时,它说“这是”窗口。我通过在进入 twitterShortenUrl 函数之前保存对当前对象的引用来解决此问题。

标签: javascript requirejs


【解决方案1】:

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

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();
});

【讨论】:

  • 感谢您的建议。原来调用是在另一个函数内部,所以 this 的作用域变成了“window”。但是你的信息很有用。我不知道我实际上可以从模块中返回一个命名对象,因为文档使用了未命名的对象。谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-03
  • 2018-03-24
  • 2011-12-15
  • 1970-01-01
  • 2013-03-22
  • 1970-01-01
相关资源
最近更新 更多