Suppose I have a function a:
function a() {
this.b = 1;
this.set = setInterval(function() {console.log(this.b);}, 200);
}
So when a.set() is called the anonymous function will be called. But this won't work as this at that time when the function is triggered points to the window object. Also it's not a good idea to use a.b as there may be multiple instances of a.
What is a good solution to this problem?
Store a reference to this:
function a() {
var self = this;
self.b = 1;
self.set = setInterval(function() {console.log(self.b);}, 200);
}
The anonymous function that you pass to setInterval has access to any variables in its containing scope, i.e., any local variables of function a(). The magic of JS closures keeps these variables alive even after a() has completed, and each invocation of a() gets its own closure.
Since we have ES6 now, I think we need another answer here:
Use an arrow function:
function a() {
this.b = 1;
this.set = setInterval(() => {console.log(this.b);}, 200);
}
Arrow functions, opposite to normal functions, don't have a this context on their own. This means you have access to the outer this.
This would be the cleanest solution, since most of the time you actually want to switch the this context for your consecutive method calls:
// store scope reference for our delegating method
var that = this;
setInterval(function() {
// this would be changed here because of method scope,
// but we still have a reference to that
OURMETHODNAME.call(that);
}, 200);
Just save your this reference in some other variable, that is not overridden by the window-call later on. Later you can use that variable to reference he object you started with.
function a() {
this.b = 1;
var that = this;
this.set = setInterval(function() {console.log(that.b);}, 200);
}
In your case, you can simply:
function a() {
var _this = this;
this.b = 1;
this.set = setInterval(function () {
console.log(_this.b);
}, 200);
}
Normally, we can also have a helper method Function.prototype.bind to fix the this reference.
This question is waay too old, but I did not like the solutions in here as the idea has mostly been about attaching the instance to something public.
Here is another, working idea:
The problem is that when calling as a callback from an interval, the scope is not inside this. However, you can kinda force it to be by defining a Function variable.
function a() {
var localCallback: () => {
// access `this` as you will
console.log(this);
};
this.timer = setInterval( localCallback, this.saveInterval );
}
Hope this is helpful!
Related
I'm trying to get a solid understanding of closures, and I'm struggling with the mechanics of it. I've looked on w3schools (https://www.w3schools.com/js/js_function_closures.asp) and MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) and a few other places. I understand what a closure is and how to make it work but I don't understand why subsequent calls after the first call to the outer function just seem to go straight to the inner one instead.
Here is my code - a simple, working closure:
var add = (function () {
var a = 0;
alert('hi');
function addInner(){
a += 1;
return a;
}
return addInner;
})();
function getAdd() {
document.getElementById("test").innerHTML = add();
}
I have two questions that probably both have the same answer: Why does a not get reset every time I call add()? And why does the alert not pop up except for on the first time?
I attached getAdd() to a button, and it works great, but it but doesn't pop up with the alert past the first time. Why does it do this?
Edit: I also found the first answer to this question (Why Don't Variables Reset in a Closure (Javascript)) really helpful.
add is a reference to addInner, not the anonymous "outer" function, since the "outer" function returns addInner. Then, you call that anonymous function once - that last set of ()- and store the resulting function, with its own private 'a', in add.
Imagine that the outer function was a named function called constructAdder, and you called
var add = constructAdder();
var add2 = constructAdder();
That's basically what you've done, but with an anonymous function, if that makes it any clearer. You have an outer function that constructs an inner function that can count, due to the magic of closures.
Those questions do both have the same answer. And it's fairly simple. This statement:
var val = (function() {
return 42
}())
sets val to 42. Not a function. This is called an IIFE, or immediately-invoked function expression. We are declaring a function and calling it immediately. We never save that function. We just use it once to get the value it returns:
val // 42
Contrast that to:
var val = function() {
return 42
}
In this case we set val to a function that, when called, returns 42.
val() // 42
val() // 42
We can get pretty crazy with IIFEs:
var val = (function() {
return (function() {
return (function() {
return 42
}())
}())
}())
The value returned by that mess is still 42.
val // 42
All those functions are declared once, used once, and thrown away. But IIFEs are capable of so much more:
var add = (function() {
var counter = 0
return function() {
return counter++
}
}())
We're now using the IIFE to create a private variable! counter cannot be accessed outside the scope of the IIFE. It's safe. But the inner function can access and modify it. It's a fully encapsulated, stateful function!
add() // 0
add() // 1
counter // Uncaught ReferenceError: counter is not defined
This is what your code is doing:
var add = (function () {
var a = 0;
alert('hi');
function addInner(){
a += 1;
return a;
}
return addInner;
})();
It is encapsulating the a variable so that it cannot be accessed outside the scope of the IIFE. The addInner function, however, does have access to a and can modify it at will.
The alert() is only called once because that IIFE is only called once, then thrown away. Note that the function itself is the only thing thrown away. Since addInner maintains a reference to the scope (closure) created by the IIFE, that scope is safe from garbage collection.
In fact, that's a helpful way to think about IIFEs:
var val = function() {}
creates a function and
val()
creates a closure (the context that the function's body runs in). IIFEs are used when we don't care about the function, we just want the closure it creates.
Hope this helps. Have fun out there!
var add = (function () {
var a = 0;
alert('hi');
function addInner(){
a += 1;
return a;
}
return addInner;
})(); <-- This
The () at the end means that add is added forever, and if you look at the line above, then it says return addInner. This means that add() is actually addInner(), the good thing with this is that addInner has access to a. Actually writing the function like this is more proper.
var add = (function () {
this.a = 0;
alert('hi');
var addInner = function(){
this.a += 1;
return this.a;
}.bind(this);
return addInner;
})();
Because now you would think that add.a would make a available because it is written as this.a, but since addInner is returned, then it is not available.
You should focus on the
(function(){
// impl
})()
block.
It is called an Immediately Invoked Function Expression or IIFE.MDN reference
So when the code executes to line 1, it first evaluate the right side and the IIFE returns a closure which was then assigned to the variable add. Meanwhile, an alert was invoked in the IIFE. Understanding the IIFE can help you solve the problems.
In my opinion , the key is IIFE, after the code below is executed at the first time,
var add = (function () {
var a = 0;
alert('hi');
function addInner(){
a += 1;
return a;
}
return addInner;
})();
(Look out ! There is no add() in the code above because IIFE will be Invoked Immediately and the return addInner finished the initialization of variable add )
the function add has been changed to :
add = function addInner() {
a += 1;
return a;
}
Of course, the alert() only executed one time because the add has been changed at the begining.
Why does a not get reset every time I call add()?
And why does the alert not pop up except for on the first time?
that is the answer of your question.
variable a didn't destroy because the function add still have a reference, and this is about the closure.
If I create a callback within a function, can I get that callback to access the local variables within that function?
Obj.prototype.outerFunc = function()
{
var x = 0;
var callback = this.innerFunc;
callback();
}
Obj.prototype.innerFunc = function()
{
x++;
}
x naturally is not within the scope of innerFunc and will produce an error if called by itself. But if I call it from outerFunc can I extend innerFunc's scope in order to access x?
Edit: Should've mentioned that I don't want to pass arguments into the function or make x and instance of Obj. I'm more looking to treat innerFunc as though it was declared locally in outerFunc. Similar to what can be done below:
Obj.prototype.outerFunc = function()
{
var x = 0;
var callback = function() {
x++;
}
callback(); // works
}
Yes: this is exactly what function parameters are for. They allow you to pass a value from one scope into another.
Obj.prototype.outerFunc = function()
{
var x = 0;
var callback = this.innerFunc;
x = callback(x);
}
Obj.prototype.innerFunc = function(x)
{
x++;
return x;
}
Note that the value is sent to the other function, not the variable. So you need to return the value and assign it in order to use it.
If you're using prototypes, just set an instance property:
// constructor
var Obj = function () {}
Obj.prototype.outerFunc = function()
{
this.x = 0;
var callback = this.innerFunc.bind(this);
callback();
}
Obj.prototype.innerFunc = function()
{
this.x++;
}
var instance = new Obj()
instance.outerFunc()
console.log(instance.x) // returns 1
Edit: But #lonesomeday's answer is a much better solution as it takes a more functional approach avoiding side effects :)
The preffered way of doing this is to assign x to the scope of the object then all functions can access it, via this.x
Obj.prototype.outerFunc = function()
{
this.x= 0; // set x to zero
this.innerFunc();
}
Obj.prototype.innerFunc = function(x)
{
this.x++;
return this.x;
}
This is a bit hard to solve without knowing why you don't want to pass a parameter; if you just want to have a specific function signature, maybe a higher-order function might help?
Obj.prototype.outerFunc = function()
{
var x = 0;
var callback = this.innerFunc(x);
callback();
}
Obj.prototype.innerFunc = function(x)
{
return function () { /* use x in here */ };
}
This way you have two functions one inside the other. The outer one takes the parameter, and the inner one can access the variable that is passed to the outer one.
This of course only gives you half of what you demonstrate in your example: You can access the local variable but not modify it.
You can never access any function's internal variables from outside the function under any circumstances, in an OOP context or otherwise.
The only sort-of-exception is that a function A defined inside a function B, and returned from that function B, continues to have access to the variables in function B--the basic notion of closure.
I have no idea why you don't want to use instance variables. That's what they're for--sharing data across methods. I have no idea why you don't want to pass values in or out--that's what parameters and return values are for.
can I extend innerFunc's scope in order to access x?
No, you can't, whatever that means. There is no such notion in JS.
The closest you can come to what you seem to maybe want to do is to define the variable in the constructor:
function Obj() {
var x = 0;
this.outerFunc = function() {
var callback = this.innerFunc;
callback();
};
this.innerFunc = function() {
x++;
}
}
However, this will not work as-is because this.innerFunc is missing its context. Therefore, you would need to write
var callback = () => this.innerFunc();
However, it's a mystery why you would want to do this instead of just writing this.innerFunc().
I am confused regarding how to work with this in combination with bind. I know the problem stems from this being the global object. Could somebody explain how I could circumvent?
In the constructor I have done this:
var BoundedStartTimer = this.StartTimer.bind(this);
var BoundedStopTimer = this.StopTimer.bind(this);
var BoundedClearTimeString = this.ClearTimeString.bind(this);
BoundedClearTimeString();
The last one works, but the timer does not start when I call BoundedStartTimer();.
I am not sure what I am doing. Below are my declarations:
MemoryGame.prototype.StartTimer = function(){
var playTimeInMilliseconds = 0;
this.timeString = "";
this.timer = window.setInterval(function(){
if(playTimeInMilliseconds >= 1000)
this.timeString = .....
this.handleToTimerText.textContent = this.timeString;
}, 10);
}
MemoryGame.prototype.StopTimer = function(){
clearInterval(this.timer);
}
MemoryGame.prototype.ClearTimeString = function(){
this.handleToTimerText.textContent = "00:000";
}
The issue here is with your setInterval call. setInterval executes functions in the global scope, meaning that this === window which is not ideal. You were right that bind can work here though, just bind the interval callback to this:
window.setInterval(function(){
if(playTimeInMilliseconds >= 1000)
this.timeString = .....
this.handleToTimerText.textContent = this.timeString;
}.bind(this), 10);
// ^ bind this from your MemoryGame instance to the interval callback
So here's the deal.
Every time you see the keyword function, you should think two things.
First is, "oh, this creates a new scope for variables!" Lots of people from Java think this happens with each curly brace { that is not used as an object literal; that's false, it's only a function context (or, now with ES6, there is let and => that do it too.)
The second thing you should think is, "oh, probably this and arguments are going to be different in the new variable scope." That's because these two keywords are especially "magical" in JavaScript.
So when you write:
this.timer = window.setInterval(function () {
if (playTimeInMilliseconds >= 1000) {
this.timeString = .....
}
this.handleToTimerText.textContent = this.timeString;
}, 10);
...you have to see that function as a new variable scope with its own this and arguments.
Now, playTimeInMilliseconds is going to be fine if you don't at any point in this function write var playTimeInMilliseconds, which will get "hoisted" to the top of the function declaration and declare a new variable local to that scope. As long as you never do this, playTimeInMilliseconds will peek at the parent variable scope and find the variable you defined in the outer scope.
However, this.timeString and this.handleToTimerText are not fine because the value of this was declared to be window.
There are two remedial approaches:
In the outer function, capture this into your own variable. Common variable names for this purpose are are me and self. Just write var self = this; in the outer function, then do not write var self in the inner function, then write self.timeString and self.handleToTimerText.
Take the function and explicitly .bind() it. So pull out the function like so:
function updateTimerText() {
if (playTimeInMilliseconds >= 1000) {
this.timeString = .....
}
this.handleToTimerText.textContent = this.timeString;
}
this.timer = setInterval(updateTimerText.bind(this), 10);
Obviously, bind has a lot of power! So don't do crap like this:
var BoundedStartTimer = this.StartTimer.bind(this);
var BoundedStopTimer = this.StopTimer.bind(this);
var BoundedClearTimeString = this.ClearTimeString.bind(this);
BoundedClearTimeString();
I have no idea what scope this stuff is occurring in, but it's probably not in the right scope. Because whatever you're binding as this has to be the instance of new MemoryGame() that you created -- maybe let's say you called it var myMemoryGame = new MemoryGame(); or so; just use myMemoryGame.startTimer() (or whatever) and let the this come naturally. Whenever you write a.b.c.d.e() the this in the context of function e() is magically set to a.b.c.d. Don't reassign it to this unless you know what the heck you're doing and that you have to preserve this in some new context. At the very least be nice to readers and .bind(myMemoryGame) so that it's 100% clear.
I just learned OOP and there is one little thing that I am not able to solve. The problem is a scope issue of some sort.
If I create a new object then how will I be able to give it access to my constructor function if the constructor function is inside another function? Right now I get undefined. Storing the function in a global variable wont do the job.
var example = new something x(parameter);
example.i();
var getFunction;
var onResize = function() {
getFunction = function something(parameter) {
this.i= (function parameter() {
// Does something
});
};
};
window.addEventListener('resize', onResize);
onResize();
For OOP javascript, the pattern should be like this.
//defining your 'class', class in quotes since everything is just functions, objects, primitives, and the special null values in JS
var Foo = function (options) {
// code in here will be ran when you call 'new', think of this as the constructor.
//private function
var doSomething = function () {
}
//public function
this.doSomethingElse = function () {
}
};
//actual instantiation of your object, the 'new' keyword runs the function and essentially returns 'this' within the function at the end
var foo = new Foo(
{
//options here
}
)
If I understand you, you want to know how to access variables inside another function. Your attempt is reasonable, but note that getFunction is not bound until after onResize is called. Here's a bit of a cleaner demo:
var x;
function y() {
// The value is not bound until y is called.
x = function(z) {
console.log(z);
}
}
y();
x('hello');
A common JavaScript pattern is to return an object that represents the API of a function. For example:
function Y() {
var x = function(z) {
console.log(z);
}
return {
x: x
};
}
var y = Y();
y.x('hello');
You should definitely read up on the basic concepts of JavaScript. Your code and terminology are both sloppy. I'd recommend Secrets of the JavaScript Ninja. It does a good job explaining scope and functions, two tricky topics in JavaScript.
I have a question about whether or not what I'm attempting is possible in Javascript in regards to closures and parent scopes. Here's my code:
var func1 = function() {
// console.log(this.source1); // wont work, makes sense
// console.log(source1); // wont work, wish it would
console.log(this.source2); // works fine
console.log(source2); // works fine
};
var func2 = function() {
var source1 = "source1";
this.source2 = "source2";
func1.call(this);
}();
var func3 = function() {
var source3 = "source3";
var func4 = function() {
console.log(source3); // also works fine, makes sense
}();
}();
Is there any way I can get access to variables declared with var on func2 inside func1, or am I out of luck?
As others have said -- no.
But if you put this whole thing in a wrapper and use the Revealing Module Pattern, then you can.
var module = (function() {
var source1;
var source2;
var func1 = function() {
console.log(source2); // works fine
};
var func2 = function() {
source1 = "source1";
}();
var func3 = function() {
var func4 = function() {
console.log(source1); // also works fine, makes sense
}();
}();
return {
func1: func1,
func2: func2,
func3: func3
};
}());
// Then invoke them.
module.func2();
module.func1();
EDIT
Then you can re-assign them back to the original names.
var func1 = module.func1;
var func2 = module.func2;
var func3 = module.func3;
Well, no, it won't work, and it shouldn't. Thankfully :) That's exactly how local variables are supposed to behave.
One thing you can do is pass the desired variable to the function func1 (and the function should expect it. Which is no problem — if you wish to somewhere call this function without passing a variable, Javascript would be totally okay with it)
Another thing is to declare the source1 variable without "var" keyword. Then it would work, but you really shouldn't do that unless you're keeping a very good track of your global variables.
The answer to your question is no.
The scope of the inner function is limited to its own scope and the scope of the outer function in which the inner function is declared (not called but declared).
console.log(this.source2); works fine cause both function have window as their context (window plays role of the outer function). this = window inside those functions.