【发布时间】: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'
-
this是window因为 如何 你调用了twitterShortenUrl:twitterShortenUrl(...);如果你改为调用它为someObj.twitterShortenUrl(...);,那么this会是someObj。 -
aspillers,你是对的。但是,在我的原始代码中,twitterShortenUrl() 没有附加到 someObj。我定义的对象是匿名的,所以我使用了“this”。但是由于我在 var twitterShortenUrl = function() {} 中调用了“this”,因此“this”在另一个函数中,因此范围发生了变化。当我在那里放一个断点时,它说“这是”窗口。我通过在进入 twitterShortenUrl 函数之前保存对当前对象的引用来解决此问题。
标签: javascript requirejs