This question already has answers here:
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 9 years ago.
I came across this many times in a new code base that I'm looking at and was wondering is there is any proper reasoning behind it?
You can use var that = this; is order to keep a reference to current this object, when later this will be pointing to something else.
Example (taken from here):
$('#element').click(function(){
// this is a reference to the element clicked on
var that = this;
$('.elements').each(function(){
// this is a reference to the current element in the loop
// that is still a reference to the element clicked on
});
});
Sometimes the meaning of this in JavaScript changes based on the scope. this inside of a constructor means something different than this inside of a function. Here's a good article about it.
If you want access to "this" outside/inside of the scope of a specific function call where what "this" is may have changed. Just one example I can think of.
Related
This question already has an answer here:
How to inspect a JavaScript Bound Function
(1 answer)
Closed 6 years ago.
I know that you can bind the this value of a function using
function.bind(new_this_value, arguments)
But is there a way to access the bound value? ie something like this:
console.log(my_function.boundValue)
In other words, suppose a module provides the following function:
function getACoolFunction () {
var someFarAwayFunction = function() {console.log(this.name)}
var bound_this_value = {name: "bound this value"}
someFarAwayFunction.bind(bound_this_value)
return someFarAwayFunction;
}
and I have this in my code:
import {getACoolFunction} from coolModule
var coolFunction = getACoolFunction();
// coolFunction.bound_value
How do I get the bound value of coolFunction from my code without changing the module?
Nothing prevents you from doing this:
let my_function = function.bind(new_this_value, arguments);
my_function.boundValue = new_this_value;
As from the standard, a bound function is:
an exotic object that wraps another function object.
It has internal properties containing original function, provided this and arguments.
As they are explicitly mentioned as internal, I would say that they are not directly exposed and accessible.
Probably this Q/A contains details that can help you to work around this limitation.
This question already has answers here:
javascript "this" points to Window object again
(2 answers)
Closed 6 years ago.
I have a piece of javascript code (using jQuery) that says:
$('.duration').each(function() {
$(this).html(this.duration_text);
});
It's iterating over each element of class 'duration' and setting the text as needed. The problem, is that the text it is setting is from a member variable, hence the this.duration_text. The 'this' reference is getting clobbered by the 'this' reference used by jQuery in the iteration.
How can I avoid this collision?
Although the underlying concept of the answer may be the exact same as the question this is marked as a duplicate of, it isn't immediately clear to me that this is the same question. In hindsight, sure, but while searching myself I didn't find it, nor was it clear it was the same question if I did find it.
You can create a reference to this before you create your loop, and then use self to refer to your object that has a property duration_text:
var self = this;
$('.duration').each(function() {
$(this).html(self.duration_text);
});
although you can just do:
$('.duration').html(this.duration_text);
You can use a closure variable to hold the reference to the outer object
var self = this;
$('.duration').each(function() {
$(this).html(self.duration_text);
});
But in the given snippet since you are assigning the same content to all duration elements, you can just use
$('.duration').html(this.duration_text);
This question already has answers here:
What is the purpose of the var keyword and when should I use it (or omit it)?
(19 answers)
Closed 7 years ago.
I know that in JavaScript I can define a variable in this way:
menuItems = new Array();
or putting the var before the variable name, so:
var menuItems = new Array();
Exist some difference between these two versions ? What change?
Tnx
When you don't use var it goes into the global scope (in browser into the window object, in node into the global object). So your first one is equivalent to window.menuItems = ... in a browser.
This is not usually good because you are polluting the window object potentially overwriting or leaving menuItems to be overwritten by other code.
In the 2nd case it goes into a variable that exists in the scope of the function that wraps that bit of code and any other functions inside it. So
...
function() {
... bits of code except creation of a function ...
var menuItems = new Array();
... bits of code ...
}
// menuItems is undefined here so whatever you do on something called menuItems here actually acts on a different variable menuItems
http://speakingjs.com/es5/ch16.html is an excellent link if you want to delve into details.
This question already has answers here:
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 10 years ago.
I have few javascript that has used the keyword "that" extensively.
I see a lot of posts talking about the javascript keyword "this".
I wanted to understand the meaning of this key word in javascript context and it's visibility/scope.
Something like
that.someFunctionaName(someParameter)
What does it mean?
I understand the keyword "this" always points to the owner of the current object.
that is not a keyword in JavaScript. I suspect the code that you have is using something in the class to define an instance of itself. For example:
function myClass()
{
var that = this;
}
By doing this, you can ensure you're referencing the object, and not another element. For example, consider the following sample:
function myClass()
{
var that = this;
$('.myele').click(function() {
// 'this' refers to the element that was clicked.
// 'that' still refers to the myClass() object.
});
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
JavaScript function aliasing doesn't seem to work
Set document.getElementById to variable
Code would be more efficient if this was possible:
var min = document.getElementById;
and then call document.getElementById() using min().
Not trying to write minified code but in this particular case one can reduce scope lookup and shorten some lines.
Is this a syntax issue or a limiation on the language?
When you call foo.bar() then this is set to foo inside bar
When you copy foo.bar to window.bar then call window.bar(), this is set to window.
getElementById has to operate on a DOM document object.