Quick question. Why does the following give a this.testFunction is not a function error?
Test = {
data: true,
testFunction: function() {
this.data = true;
},
initialize: function() {
this.data = false;
this.testFunction();
console.log(this.data);
}
};
$(document).ready(Test.initialize);
You aren't calling Test.initialize, you are passing its value. This separates it from it's context, so when it is called, this is not Test.
The usual way around this is to use an anonymous function expression:
$(document).ready(function () { Test.initialize() });
You can also use (with more limited browser support) bind:
$(document).ready(Test.initialize.bind(Test));
In this context this is set to the global object which does not have the function testFunction(). For a detailed explanation of the this keyword see this answer: How does the "this" keyword work?
Javascript's designers have been a bit naughty on the rules behind the this keyword. this takes the values of the left-handside of a MemberExpression, i.e:
var a = {
b: function () {
// this = a
}
};
a.b();
This creates problem when you do something like:
var universe = {
answer: 42,
getTheAnswer: function () {
return this.answer;
}
}
var foobar = universe.getTheAnswer;
foobar();
In this case this in the function getTheAnswer won't be bind to the universe object but to the global object, which is evil. What you can do to solve this issue is use the bind function (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), i.e:
var foobar = universe.getTheAnswer.bind(universe);
foobar(); // => 42
So in your case, you can simply do:
$(document).ready(Test.initialize.bind(Test));
Hope it helped!
functionand not areference; something like:$(document).ready(Test.initialize());$(document).ready($.proxy(Test, "initialize"))ready(), which is not the desired effect.datavariable is pointless as the method being called in question resets the variable either way.