I have a javascript function that takes an object as a parameter. I want one of the properties of passed object to be a function pointer. But the function is executed which I don't want to happen.
Example:
var myFuncPtr = function(){alert("Done");};
function myFunc(o){
// do something with passed object
// then call the function pointed at in the passed object
}
myFunc( {foo:"bar", onDone: myFuncPtr} );
I'm sure there's an expert out there who can guide me in the right direction. Am I going about this the wrong way. The quick solution is preferred if there is one.
Here is the actual code:
$(document).ready(function() {
imageCropper({
id:"imageBox",
editWidth:400,
cropWidth:0,
maxFileSize:3000000,
croppedId:"croppedBox",
onCrop:whenImageCropped
});
});
function whenImageCropped(o)
{
alert("done");
}
function imageCropper(options)
{
divId = options.id;
croppedDivId = (options.croppedId)?options.croppedId:divId+"_croppedPic";
$("#"+divId).load("/modules/imageCropper.asp", options, function(){
/* if i remove this bit, then no probs */
$("#"+divId+"_imgToCrop").Jcrop({
},function(){jcrop_api = this;}
);
/* end of - if i remove this bit, then no probs */
});
}
I want one of the properties of passed object to be a function pointer. But the function is executed which I don't want to happen.
That sounds like instead of passing a reference to the function, you are executing the function and passing the return value.
Maybe in your original code you have
myFunc( {foo:"bar", onDone: myFuncPtr()} );
which calls myFuncPtr and assigns the return value to onDone.
The code in the question is fine though, just call o.onDone() inside myFunc.
As already said, there are no pointers in JavaScript, it's much simpler than that. Functions are just data types such as strings, numbers, arrays etc, which happen to be callable.
var myFuncPtr = function(){alert("Done");};
function myFunc(o)
{
alert("Hello " + o.foo);
o.onDone();
}
myFunc( {foo:"bar", onDone: myFuncPtr} );
This does your trick. The onDone property of your object 'points' to the correct function, you can just call that.
Theerrrreee is no pointer in ECMAscript...... Asposx.yxm--dfgdfg.:!!
beside that... you might just want to call:
o.onDone();
within myFunc().
PS:
There is only reference in this language.
Related
The following successfully prints 'foo'.
var obj = {
name: 'foo',
printName: function printName() {
console.log(this.name);
}
};
var printButton= document.getElementById('printIt');
printButton.addEventListener('click', function(){
obj.printName();
});
The following doesn't, however:
printButton.addEventListener('click', obj.printName() );
I know the solution... simply use bind so that we're referencing the obj object. i.e:
printButton.addEventListener('click', obj.printName.bind(obj) );
Why then don't we need to use bind in the first example. I don't know why wrapping obj.printName() function call in the anonymous function results in the console.log correctly referencing and printing this properly, but when called directly after click, you needs to use bind
Alright, I commented with some good information on this question so I might as well answer!
Functions are first class
Okay, let's starts with some fundamentals of javascript that is very dissimilar to some other programming languages: in javascript functions are first class citizens--which is just a fancy way of saying that you can save functions into variables and you can pass functions into other functions.
const myFunction = function () { return 'whoa a function'; }
array.map(function () { return x + 1; });
And because of this wonderful feature, there is a big difference between the expressions:
Expression 1
obj.printName
and
Expression 2
obj.printName();
In expression 1: the function isn't being invoked so the value of the expression is of type function
In expression 2: the function is being invoked so the value of the expression is what the function returns. In your case, that's undefined
addEventListener
The method addEventListener takes in two arguments:
a string of the type of event
a function that will be run when the event fires.
Alight, so what does that mean?
When you call
// doesn't work
printButton.addEventListener('click', obj.printName() );
you're not passing a value of type function to the addEventListener method, you're actually passing undefined.
// works
printButton.addEventListener('click', obj.printName.bind(obj) );
then works (for one reason) because the second argument is actually of type function.
What does bind do? Why does it return a function?
Now we need to discuss what bind actually does. It related to the pointer* this.
*by pointer, I mean a reference identifier to some object
bind is a method that exists on every function object that simply binds the this pointer of a desired object to the function
This is best shown by an example:
Say you have a class Fruit that has a method printName. Now that we know that you can save a method into a variable, let's try that. In the example below we're assigning two things:
boundMethod which used bind
unboundMethod that didn't use bind
class Fruit {
constructor() {
this.name = 'apple';
}
printName() {
console.log(this.name);
}
}
const myFruit = new Fruit();
// take the method `printName`
const boundMethod = myFruit.printName.bind(myFruit);
const unboundMethod = myFruit.printName;
boundMethod(); // works
unboundMethod(); // doesn't work
So what happens when you don't call bind? Why doesn't that work?
If you don't call bind in this case, the value of the function that gets stored into the identifier unboundMethod can be thought to be:
// doens't work
const unboundMethod = function() {
console.log(this.name);
}
where the contents of the function is the same contents of the method printName from the Fruit class. Do you see why this is an issue?
Because the this pointer is still there but the object it was intended to refer to is no longer in scope. When you try to invoke the unboundMethod, you'll get an error because it couldn't find name in this.
So what happens when you do use bind?
Loosely bind can be thought of as replacing the this value of function with the object you're passing into bind.
So if I assign: myFruit.printName.bind(myFruit) to boundMethod then you can think of the assignment like this:
// works
const boundMethod = function() {
console.log(myFruit.name);
}
where this is replaced with myFruit
The bottom-line/TL;DR
when to use bind in an Event Handler
You need to use Function.prototype.bind when you want to replace the thises inside the function with another object/pointer. If your function doesn't ever use this, then you don't need to use bind.
Why then don't we need to use bind in the first example?
If you don't need to "take the method" (i.e. taking the value of type of function), then you don't need to use bind either Another way to word that is: if you invoke the method directly from the object, you don't need bind that same object.
In the wrapper function, you're directly invoking the method of the object (as in expression 2). Because you're invoking the method without "taking the method" (we "took" the methods into variables in the Fruit example), you don't need to use bind.
printButton.addEventListener('click', function(){
// directly invoke the function
// no method "taking" here
obj.printName();
});
Hope this helps :D
Note: You need to call printButton.addEventListener('click', obj.printName() ); without parenthesis in obj.printName() since you want to pass the function.
The answer lies in the way this is bound in Javascript. In JS, the way a function is called decides how this is bound. So when you provide the callback function like below:
printButton.addEventListener('click', function(){
obj.printName();
});
Notice, printName is being called via dot notation. This is called implicit binding rule when this is bound to an object before dot, in this case obj. Clearly in this case, you get the expected output.
However, when you call it like this:
printButton.addEventListener('click', obj.printName );
Notice that, all you are passing is the address of the function that is inside obj. So in this case info about obj is lost. In other words, the code that calls back the function doesn't have the info about obj that could have been used to set this. All it has is the address of the function to call.
Hope this helps!
EDIT:
Look at this crude implementation I call bind2 that mimics native bind. This is just to illustrate how native bind function returns a new function.
Function.prototype.bind2 = function (context) {
var callBackFunction = this;//Store the function to call later
return function () { //return a new function
callBackFunction.call(context);//Later when called, apply
//context, this is `obj` passed
//in bind2()
}
};
function hello() {
alert(this.name);
}
obj = {
name:'ABC'
};
var f = hello.bind2(obj);
f();
Notice: How function f() is hard bound here. f() has hard bound this with obj. You cannot change this to other than obj now. This is another thing with bind that probably will help you knowing.
I'm currently working on a JavaScript exercise in FreeCodeCamp, and one of the test-cases my code should work with is a function call that looks like this:
addTogether(2)(3);
here is the bare-bones function I'm given:
function addTogether() {
return;
}
When I run the code below:
function addTogether() {
return arguments;
}
In the console, that the editor provides, I get:
TypeError: addTogether(...) is not a function
The instructions hint at using the arguments object, and it works well with test-case function calls that only have one argument object (i.e. addTogether(2, 3);), but not with the one I've shown above.
Is there a way to access/utilize the separate argument objects when they're in the format I showed above?
Note: I don't want any sort of answer to solve the problem, just info on any techniques on accessing the arguments of these type of function calls.
Help, is greatly appreciated.
Don't think of it as two separate sets of arguments. Think of it as you're calling another function (which you are). Functions are first-class values in JavaScript so you can use them just like any other value. This includes returning them from functions.
var f = function(y) {
console.log('f:', y);
};
var getF = function(x) {
console.log('getF:', x);
return f;
};
getF(1)(2);
Functions can also use values that exist in any parent scope. Loosely speaking, functions which do this are called closures.
function createGetX(x) {
return function() {
// Since x is in the parent scope, we can use it here
return x;
}
}
var one = createGetX(1);
console.log(one()); // Always
console.log(one()); // returns
console.log(one()); // one
Sometimes it helps me to think in a certain order. You can read the code "addTogether(2)" and stop before reading the "(3)".
From there you can see the exercise wants you to have that first part "addTogether(2)" return a function...since anytime there are "()" that means a function is getting called.
So "addTogether(2)" needs to return a function that takes one argument. Later that 3 will be one example of an input.
I think the name "addTogether" is a bit confusing..since that function's job is to make up and return the actual function that adds.
Sort of hard to explain this one without helping too much, but the bulk of your job here is to return a custom function, which includes the first variable (from it's scope) and expects another variable when it's called.
You could do this with closures.
function addTogether(x) {
return function(y) {
return x+y;
}
}
return this.foo("abc",function(){
//do something
});
Can some one tell me what does the above line do?
THanks
It grabs a reference to this, which might be the DOM Window, a DOM element, or any other JavaScript object depending on how and where the above code is being run.
It (skipping ahead) prepares a new anonymous Function that //does something.
It attempts to invoke a method foo on object this, passing in two parameters "abc" and said anonymous Function.
Very often when you see code that passes along an anonymous function (e.g. function(){ ... }), it is in fact holding on to that function in order to execute it not right away but at some later point in time, such as in response to a click event or a timer.
It calls the function referenced by this.foo and passes two parameters: The string "abc" and an anonymous function function(){ //do something}. It then returns the result.
It is equivalent to:
var a = "abc";
var b = function(){
//do something
};
return this.foo(a, b);
Functions are first class objects in JS so you can pass them around like any other value.
I recommend to have a look at the MDC JavaScript guide.
looks like this.foo() is a function that returns something. so the return value is, what this.foo() returns.
calls an instance method that gets as parameters a string and a function.
It will return (yeah, like it is in English) the returned result of a function this.foo(...) (in the most simple form, ithe function this.foo(...) return "something" then the code will return "something"). The function this.foo("abc", function(){...}); is itself a function which receives 2 arguments: A string "abc" and a function(). The function this.foo will do something and return "something" to return by the main function.
[x]
I am trying to define a function which can access variables which are in the scope of the function that is calling it.
( I am attempting to build a string formatter that is prettier than "a" + b, and more terse than String.format("a{0}",b). So I can get SF("a{b}"), and I don't know if it is possible )
so
function magic(str) {
return parentScope[str]; // or return eval( str );
// or something like that
}
function call() {
var a = 1;
alert( magic( "a" ) );
}
call();
would alert "1".
currently I can do this by having the function return code to be eval'd, but it seems like there must be a better way.
Just put your 'magic' function into the call function:
function call() {
function magic(str) {
return a;
}
var a = 1;
alert( magic() );
}
call();
This mechanism behind the scenes is called closures and which are very powerful concept. Just think of an AJAX request where the callback function still can access the local variables of the calling function.
UPDATE
I misunderstood your question. The thing you actually want to build is impossible to implement in JavaScript because the is no way to access the caller's scope.
UPDATE 2
Here is my string formatting function. Not as concise as you may want it, but still very usable.
String.prototype.arg = function()
{
result = this;
// This depends on mootools, a normal for loop would do the job, too
$A(arguments).each((function(arg)
{
result = result.replace("%", arg);
}).bind(this));
return result;
}
You can use it like:
"%-% %".arg(1,2).arg(3)
and receive
"1-2 3"
As far as I know it is impossible to reach out and grab an arbitrary variable from a function in javascript. From an object yes, but not from an executing method.
I can't think of any function method (apply, call, otherwise) which helps you here: frankly I think you're trying too hard for a marginal benefit over the normal string.format, er... format.
//This is the function that will run every time a new item is added or the
//list is sorted.
var showNewOrder = function() {
//This function means we get serialize() to tell us the text of each
//element, instead of its ID, which is the default return.
var serializeFunction = function(el) { return el.get('text'); };
//We pass our custom function to serialize();
var orderTxt = sort.serialize(serializeFunction);
//And then we add that text to our page so everyone can see it.
$('data').set('text', orderTxt.join(' '));
};
full code is at http://demos.mootools.net/Dynamic.Sortables
var serializeFunction = function(*el*) { return el.get('text'); };
var orderTxt = sort.serialize(serializeFunction*(el)*);
compare the codes.
Is el being passed or not? what is going on???
I want to learn advanced parameter usage.
If not declaring functions like function name(parameter1, parameter2, parameter3...).
If not calling functions like name(parameter1, parameter2, parameter3...).
If parameters aren't variables.
If declaring functions like function(parameter1, parameter2, parameter3...).
If calling functions like variable(parameter1, parameter2, parameter3...).
If parameters are objects.
I'm interested.
You probably have a bookmark with the lessons in which I'm interested... please, share!!!
The value assigned to "serializeFunction" is actually an anonymous function, you can see it like a pointer or reference to a function, "el" is simply a declared input parameter that will be used then that function will be called.
Looking at the original code of the one that was posted, the call of the sort.serialize function, receives only the function as a parameter, the "serializeFunction" is not being invocated, it's only passed as an argument.
So, the serialize function that receives the reference of the function passed as a parameter it will be in charge of execute it internally.
This is a lambda expression like.
sort.serialize()
accept the function as parameter, not the value.
The first code is probably correct.
In JavaScript, functions are stored in variables just as any other value (as you see with serializeFunction), and sort.serialize only takes a reference to serializeFunction. Then serializeFunction is called from sort.serialize with the current element (el).
The second code would send an undefined value to the serializeFunction (since el has not been defined in that scope) which would throw an error. Even if el was defined, sort.serialize expects a reference to a function, not a value.