Javascript function with a callback that passes the initiated object as a parameter
Question
I am trying to extend some existing functionality so it has a callback function that passes the original object as a parameter, or at least any public variables that is stored in a smaller object, how can I achieve this?
This is a simplified version of the file I am working with, a class would be contained in a variable
<html>
<head>
</head>
<script>
var foo = new Foo ({
arg1:1,
onComplete: function(){
alert("complete " + total);
}
});
</script>
<body>
</body>
</html>
The function / class looks similar to this
function Foo(options) {
// private
var number1_ = options.arg1;
var number2_ = 10;
var total_ = number1_ + number2_;
// public
this.total = total_;
(function Foo() {
if (options) {
if (options.onComplete && typeof (options.onComplete) === "function") {
// how do I pass Foo or an object of selected variables here?
options.onComplete();
}
}
})();
}
Thanks
4 answers
solution1
2 2011-12-28 13:18:38
(function Magazine() {
if (options) {
if (options.onComplete && typeof (options.onComplete) === "function") {
// if you want `this === the foo instance` in the function:
options.onComplete.call(this);
// otherwise just pass it as an argument:
options.onComplete(this);
}
}
}).call(this);
solution2
2 ACCPTED 2011-12-28 13:36:40
Check this out :)
function Foo(options) {
// private
var number1_ = options.arg1,
number2_ = 10,
total_ = number1_ + number2_;
// public
this.total = total_;
(function Magazine( that ) {
(options.onComplete || function(){}).call( that );
})(this);
}
var foo = new Foo({
arg1: 1,
onComplete: function() {
alert("complete " + this.total);
}
});
Live demo: http://jsfiddle.net/P3bzM/
solution3
1
<html>
<head>
</head>
<script>
var foo = new Foo ({
arg1:1,
onComplete: function(total){
alert("complete " + total);
}
});
</script>
<body>
</body>
</html>
function Foo(options) {
// private
var number1_ = options.arg1;
var number2_ = 10;
var total_ = number1_ + number2_;
// public
this.total = total_;
(function Magazine() {
if (options) {
if (options.onComplete && typeof (options.onComplete) === "function") {
// how do I pass Foo or an object of selected variables here?
options.onComplete(total_);
}
}
})();
}
Look for word "total" to see the changes.
solution4
1 2011-12-28 13:24:47
You've got several ways to achieve this.
Simply add parameters when calling your callback:
if (options.onComplete && typeof (options.onComplete) === "function") { // how do I pass Foo or an object of selected variables here? options.onComplete(this.number1_, this.number2_, this.total_); }Use .call() or .apply() javascript method to set the context of the callback (what will be
thiswithin the callback)if (options.onComplete && typeof (options.onComplete) === "function") { // how do I pass Foo or an object of selected variables here? options.onComplete.apply(this); // options.onComplete.call(this); }Both methods works the same way, they simply differ in the way you pass arguments to the method. Read this to get more info
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.