I have a problem getting the value of 'name' displayed with the following:
for (var name in array) {
var hoverIn = function() {
alert(name);
};
var hoverOut = function() {
};
thing.hover(hoverIn, hoverOut);
}
What I get is an alert window with the last value of name. Clearly I am doing something wrong and I suspect it's a simple fix. Can anyone help?
Thanks.
It's closure problem, name, after that iteration is the last name in array, and callback for hovers isn't executed right away when the iteration happens, thus when the hover function is actually executed, name will always be the last in array.
You need to use IEFE (Immediately executed function expression):
for (var name in array) {
// pass in name to the anonymous function, and immediately
// executes it to retain name when the particular iteration happens
var hoverIn = (function(name) {
return function() {
alert(name);
}
})(name); // if you notice, the pattern is (function(name) {})(name)
// the first () creates an anonymous function, the (name)
// executes it, effectively passing name to the anon fn
var hoverOut = (function(name) {
// same pattern if you need to re-use name inside here, otherwise just
// function() { } should suffice
})(name);
thing.hover(hoverIn, hoverOut);
}
To avoid duplicates of (function() { })() (which honestly is getting tiring to look at), you could also, as #pimvdb pointed out, wrap the whole body in a closure:
for (var name in array) {
(function(name) {
var hoverIn = function() {
alert(name);
}
var hoverOut = function() {
}
thing.hover(hoverIn, hoverOut);
})(name); // closure of for loop body
}
Add a variable inside the loop
var thisName = name;
and then use that in your function
alert(thisName);
You have two ways of dealing with this problem.
The first thing to know is that scope only happens at function level, not within loops in javascript.
If you set a variable within a function from an outside source and don't execute it right away,the variable will be changed over the course of your loop.
You can solve this by closing other the variable:
var names = ["john","paul","george","ringo"];
var store = {};
//this function receives the data as a parameter
//so it will be a safe copy.
function createFunc(name){
//just return a function that will alert the name.
return function(){
alert(name);
}
}
for (var i in names) {
var hoverIn = createFunc(names[i]);
store[names[i]]=hoverIn;
}
store["john"]();
The other way is to create an anonymous function that executes right away
within the loop:
var names = ["john","paul","george","ringo"];
var store = {};
for (var i in names) {
//the function receives the i as a parameter
//and executes, so n is a safe copy of i
(function(n){
var hoverIn = function(){
alert(names[n]);
}
store[names[n]]=hoverIn;
})(i);
}
store["john"]();
Everything is a problem related to closure.
Look at wikipedia for more info.
You should create closure:
for (var name in array) {
var hoverIn = (function() {
return function() {
alert(name);
};
}());
var hoverOut = function() {
};
thing.hover(hoverIn, hoverOut);
}
Related
i have a question, there is a problem with a function in a program that i was doing in javascript.
The function is supposed to work when you click on a paragraph, but when i click, the javascript console throws this: "Uncaught ReferenceError: donethingy is not defined
Line: 1".
JS:
window.onload = function(){
var thy = document.getElementById("thy");
var commanderIssue = document.getElementById("commanderIssue");
var listado = document.getElementById("thaCosa");
var thyLy = document.getElementsByTagName("p");
var nli;
var thyText;
var inserting = "a";
var commander = "b";
thy.onclick = function(){
inserting = "* " + prompt("Create a new item");
nli = document.createElement("p");
thyText = document.createTextNode(inserting);
nli.appendChild(thyText);
listado.appendChild(nli);
thyLy = document.getElementsByTagName("p");
}
thyLy.onclick = function donethingy(){
// thyLy.textDecoration.overline;
alert("done");
}
commanderIssue.onclick = function(){
alert("this thing is");
}
}
With the syntax you've used, the name donethingy doesn't actually become the name of the function because you are assigning the funciton's code directly to the onclick property of thyLy.
You could do this:
// This is a function declaration that associates a name with the function
function donethingy(){
// thyLy.textDecoration.overline;
alert("done");
}
// Then the function can be referred to or invoked by name
thyLy.onclick = donethingy;
But, when you create and assign the function in one statement, the function effectively becomes anonymous as it is stored and accessible via the property you assigned it to.
The decision to create a function declaration or an anonymous function requires you taking the following into account:
Anonymous functions can't easily be reused.
Anonymous functions can't easily be unit tested.
Named functions may require more memory, but can be reused and can be
easily unit tested.
You do not set variables or onclick properties to functions defined as:
obj.onclick = function <name>() {}
You set to anonymous functions, like you did for commanderIssue.onclick.
Just remove the name of the function to make it anonymous:
thyLy.onclick = function() {
alert("done");
}
It's good to remember that there are two ways of defining functions:
Declarations, which are executed when you invoke them:
function donethingy() { ... }
Expressions, which are executed when variable statements are executed:
thyLy.onclick = function() { ... }
I don't quite understand this bit of code.
$('div').click((function () {
var number = 0;
return function () {
alert(++number);
};
})());
My understanding is:
An anonymous function is defined and assigned to the click handler.
When I click on div, this function is invoked.
What the function does is:
Define a variable number = 0
Return ++number
So why does the number in alert increment every time I click? Shouldn't number be reset to 0 every time I click?
Here you've got a self-invoking function, which returns a function. Watch out for the brackets at the end:
(function () {
var number = 0;
return function () {
alert(++number);
};
})()
So the callback of the click handler is only the returned inner function:
function () {
alert(++number);
};
This inner function has access to the variable number, which is in the scope of the outer function.
So your code can also be written as follows:
function outerFunction() {
var number = 0;
return function () {
alert(++number);
};
};
var innerFunction = outerFunction();
$('div').click(innerFunction);
If we used (ugly) names for the anonymous functions, your code could be rewritten as:
$('div').click((function makeIncrementer() {
var number = 0;
return function incrementAndAlert() {
alert(++number);
};
})());
More verbose code retaining similar semantics would be:
var makeIncrementer = function() {
var number = 0;
return function() { alert(++number); };
};
var incrementAndAlert = makeIncrementer(); // function() { alert(++number); }
$('div').click(incrementAndAlert);
makeIncrementer is a function that, when called, defines a number variable in its scope, and returns a function - note that makeIncrementer doesn't increment, nor alert the number variable, instead it returns another function that does just that.
Now incrementAndAlert is bound to this returned function
function() { alert(++number); }
that captures makeIncrementer's number variable, which enables it to keep number's state between incrementAndAlert calls triggered by $('div') clicks.
This is not an "answer", but hopefully it will show a different way of looking at the problem.
First off, note that JavaScript functions are just objects and are thus just values that can be bound to variables. As such,
$('div').click((function () {
var number = 0;
return function () {
alert(++number);
};
})());
can be, with a simple expression substitution, rewritten as
var f = function () {
var number = 0;
return function () {
alert(++number);
};
};
// $('div').click((f)()); and when removing extra parenthesis ->
$('div').click(f());
Then, after one more simple expression substitution
var g = f()
$('div').click(g);
it should be clear that the (outer) function, f, is invoked first and it is the resulting (inner function) value, g, that is used as the handler.
Aside from introducing variables, the above substitutions are semantically equivalent to the original code.
Take a look at the following code
//btns is an array passed as a parameter to a function
for(var i = 0, b; b = btns[i]; i++) {
b.handler = function () {
var a = btns[i].some_field; //undefined
//the same for "b.some_field;"
};
}
Why btns[i] is undefined?
PS. the code adds click handler on extjs buttons if that matters.
This happens because by the time the inner function is called (which is after the loop is done) the value of i would be btns.length and therefore the value of btns[i] would be undefined.
You need to close over the value of i like this:
b.handler = function(i) {
return function() {
var a = btns[i].some_field;
}
}(i);
It's important to note that although the variables have the same name, they're different variables; i.e. the inner variable shadows the outer, thereby "fixing" the value.
for(var i = 0, b; b = btns[i]; i++) {
b.handler = function () {
var a = this.btns[i].some_field;
//the same for "b.some_field;"
};
}
give "this." in side the function we have to use "this" to point
I have the following code:
for(var i = 0; i < nodelist.length; i++) {
var x = functionThatCreatesADivElement();
someElement.appendChild(x.getDiv()); // this works fine
nodelist[i].onclick = function() {
x.someFunction(); // this always refer to the last 'x' object
}
}
function functionThatCreatesADivElement() {
var div = document.createElement("div");
this.someFunction = function() {}
this.getDiv = function() {
return div;
}
return this;
}
the problem is that the execution of nodelist[0].onclick is exactly the same as nodelist[4].onclick (assuming that i = 4 is the last node).
I believe the references of the previously iterated are changing to point to the currently iterated element.
What is the proper way of doing this?
EDIT: Added some more code and changed the name of the function cause it was too confusing
You have two problems. The first problem is that JavaScript variables don't have block scopes.
From MDN:
When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable
within a function, it is called a local variable, because it is available only within that
function.
JavaScript does not have block statement scope;
You aren't enclosing a the x variable in a function, so all of your onclick callbacks are using the same x variable, which point to whatever element is last in the loop since that will be the last one to have overwritten x.
Doing this for your loop should work:
nodelist.forEach(function (nodeitem) {
var x = functionThatCreatesADivElement();
someElement.appendChild(x.getDiv());
nodeitem.onclick = function() {
x.someFunction();
}
});
The second problem is that your functionThatCreatesADivElement() constructor function is not being called correctly. Use new functionThatCreatesADivElement() since you are invoking a constructor function.
Solved. I had to use
var x = new functionThatCreatesADivElement();
function functionThatCreatesADivElement() {
var div = document.createElement("div");
this.someFunction = function() {}
this.getDiv = function() {
return div;
}
//return this; //Using new instead of returning this
}
Basically I want to do this:
someFunction() // do something
someFunction.somePropertyFunction()
someFunction() // Now someFunction is modified; it should now exhibit a different behaviour
Is this possible?
EDIT:
I'm not looking for what #Kolink was suggesting. Basically I want to augment a function's functionality by calling one of it's property function.
Specifically, I need to: 1. have access to the original function inside my property function (which is entirely doable using this), and 2. bind a new function to the original function's name (which I'm not sure if it's possible).
Just to be clear, I don't have access to the internal definition of the function that I want to augment. I want to attach a function to Function.prototype (so that it will be available as a property of the function that I want to augment), and then I will call func.augmentThis(), and then func should be augmented. But I'm not sure how, hence the question :P
Easily. Here's an example:
var derp = 123;
someFunction = function() {alert(derp);};
someFunction.somePropertyFunction = function() {derp = 456;};
someFunction(); // alerts 123
someFunction.somePropertyFunction();
someFunction(); // alerts 456
Okay, that's an oversimplified example, but yeah, it's entirely possible.
If your question is whether a function attached as a property to another function has a way to access the function to which it is attached, the answer is no. After all, the same function could be attached to any number of functions of objects.
So one alternative is to explicitly refer to the "mother" function within the function that is attached to it and intended to change its behavior:
function f (n) { alert (n + f.offset); }
f.offset = 0;
f.change_offset = function (i) { f.offset = i; };
f (1); //1
f.change_offset (100);
f (1); //101
Here, f is hard-wired into the definition of change_offset. If this bothers you, or you want something slightly more general, write a little routine to set a function as a property on another function, while binding its this to the function being attached to:
function set_func_as_func_prop ( propname, func_to_set, func_to_set_on ) {
func_to_set_on[propname] = func_to_set.bind(func_to_set_on);
}
Now you can write the function more generally
function change_offset (i) {
this.offset = i;
}
and set it on f or any other function.
set_func_as_func_prop ("change_offset", change_offset, f);
set_func_as_func_prop ("change_offset", change_offset, g);
Sort of:
function someFunction() {
return realFunction.apply(this, arguments);
}
function someFunctionA(name) {
return 'Hello, ' + name + '!';
}
function someFunctionB(name) {
return 'Goodbye, ' + name + '...';
}
var realFunction = someFunctionA;
someFunction.somePropertyFunction = function () {
realFunction = someFunctionB;
};
Sure it's possible. It's not recommended, but it's possible. For example:
function a() {
alert("a");
}
function b() {
alert("b");
}
function c() {
return c.f.apply(this, arguments);
}
c.f = a;
c.toggle = function () {
c.f = c.f === a ? b : a;
};
Now let's test it:
c(); // alerts "a"
c.toggle();
c(); // alerts "b"
See the demo: http://jsfiddle.net/LwKM3/
I want to attach a function to Function.prototype. Then I need to bind a new function to the original function's name (which I'm not sure if it's possible).
That indeed is impossible, you don't know what refers to the function. And you cannot change the internal representation of a function, which is immutable.
The only thing you can do is to create a new function and return that, to let the caller of your method use it somehow - specifically assigning it to the original variable:
somefunction = somefunction.augmentSomehow();
Your method for that will look like this:
Function.prototype.augmentSomehow = function() {
var origFn = this;
return function() {
// in here, do something special
// which might include invoking origFn() in a different way
};
};
Not sure if this helps, but I would implement described problem in following way:
// defined by somebody else - unknown to developer
var someFunction = function() {
alert("this is initial behavior");
}
someFunction(); // returns "this is initial behavior"
// defines parent object on which someFunction() is called
var parentObject = this; // returns window object (as called direclty in the
// browser)
// if you are calling someFunction from some object (object.someFunction())
// it would be:
// var parentObject = object;
// augumentThis definition
someFunction.augumentThis = function() {
var newFunction = function() {
alert("this is changed behavior");
};
parentObject.someFunction.somePropertyFunction = function() {
parentObject.someFunction = newFunction;
parentObject.someFunction();
};
};
someFunction.augumentThis(); // change function behavior
someFunction(); // "this is initial behavior"
someFunction.somePropertyFunction(); // "this is changed behavior"
someFunction(); // "this is changed behavior"