Say I have the following property method in an object:
onReady: function FlashUpload_onReady()
{
Alfresco.util.Ajax.jsonGet({
url: Alfresco.constants.PROXY_URI + "org/app/classification",
successCallback: {
fn: function (o) {
var classButtonMenu = [],
menuLabel, that = this;
var selectButtonClick = function (p_sType, p_aArgs, p_oItem) {
var sText = p_oItem.cfg.getProperty("text");
that.classificationSelectButton.set("label", sText);
};
for (var i in o.json.items) {
classButtonMenu.push({
text: o.json.items[i].classification,
value: o.json.items[i].filename,
onClick: {fn: selectButtonClick}
});
}
this.classificationSelectButton = new YAHOO.widget.Button({
id: this.id + "-appClassification",
type: "menu",
label: classButtonMenu[0].text,
name: "appClassification",
menu: classButtonMenu,
container: this.id + "-appClassificationSection-div"
});
},
scope: this
},
failureMessage: "Failed to retrieve classifications!"
});
It took me some guess work to figure out that in the selectButtonClick
function that I needed to reference that
instead of this
in order to gain access to this.classificationSelectButton
(otherwise it comes up undefined
), but I'm uncertain as to why I can't use this
. My best guess is that any properties in the overall object that gets referenced within new YAHOO.widget.Button
somehow looses scope once the constructor function is called.
Could someone please explain why it is that I have to reference classificationSelectButton
with var that = this
instead of just calling `this.classificationSelectButton'?
The most important thing to understand is that a function object does not have a fixed this
value -- the value of this
changes depending on how the function is called. We say that a function is invoked with some a particular this
value -- the this
value is determined at invocation time, not definition time.
someFunc()
), this
will be the global object (window
in a browser) (or undefined
if the function runs in strict mode).this
will be the calling object.call
or apply
, this
is specified as the first argument to call
or apply
.this
will be the element that is the target of the event.new
, this
will be a newly-created object whose prototype is set to the prototype
property of the constructor function.bind
operation, the function will always and forever have this
set to the first argument of the bind
call that produced it. (This is the single exception to the "functions don't have a fixed this
" rule -- functions produced by bind
actually do have an immutable this
.)Using var that = this;
is a way to store the this
value at function definition time (rather than function execution time, when this
could be anything, depending on how the function was invoked). The solution here is to store the outer value of this
in a variable (traditionally called that
or self
) which is included in the scope of the newly-defined function, because newly-defined functions have access to variables defined in their outer scope.
Because this
changes its value based on the context it's run in.
Inside your selectButtonClick
function the this
will refer to that function's context, not the outer context. So you need to give this
a different name in the outer context which it can be referred to by inside the selectButtonClick
function.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With