This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 8 years ago.
im fairly newb when it comes to writing pure javascript, but i want to learn and become better.
i have a code below, what im trying to do in the if block doesnt matter so much, but what is tripping me up is using "this". below i want wrap to have classname if condition is true, but its not working.
Can anyone please explain why is "this" not working in my code below?
var wrap = document.getElementById("wrap")
if(wrap.innerHTML.length === 0){
this.className="empty"
}
Try wrap.className = "empty".
this refers to the current "execution context" (which you can get a great explanation of in this previous answer). The fact that you're within an if statement doesn't change the execution context or anything... if you're just trying to add that className to the wrap element like you suggest, then apply the className to wrap not this.
Related
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 2 years ago.
Now I have some code:
window.testFun = {
say() {
console.log(this);
}
};
window.testFun.say(); // print say
window.console.log(this); // why not console but window?
I am sorry that my English is not very good, but I am actively learning English now, and I hope to be able to actively discuss the code with everyone
The value of this is defined by the function this is used inside.
You are using it in the global scope. You are just passing it to log. It isn't a keyword inside the log function itself (which is built into the browser and you aren't looking at the source code for it).
This question already has answers here:
What's the difference between '$(this)' and 'this'?
(7 answers)
Closed 6 years ago.
$(this).append('hello');
The above could be a line nested in some function of jquery. I know that this is a correct line, but I was wondering whether you could mix javascript with jquery and write it down like this.
this.append('hello');
The only difference is that in the second line of code the this keyword is not written inside the jquery method, but this should still work because the this keyword itself automatically stores the location of the node at which the function is aimed. Right? Well apparentely it does not work, so when and why do can't you use the this keyword alone?
The only difference as far as I understand is the wrapper, which is the jQuery object: https://learn.jquery.com/using-jquery-core/jquery-object/. This wrapper exposes jQuery methods on the element, whereas just using this returns the element, but does not expose those same methods. As a simple example, this will return the textContent of the div,
$('div').click(function() {
console.log($(this).text());
})
Where as this will not
$('div').click(function() {
console.log(this.text());
})
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.
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How does this JavaScript/JQuery Syntax work: (function( window, undefined ) { })(window)?
(function(window, undefined){})(window);
What is the meaning of this code? I have seen it in many documents, especially in jQuery documents.
How does this work, and why is it defined thus?
You are scoping a piece of code..
By.
Defining it within an anonymous function //function(){...}
Executing it. //(function{})(args)
Also, passing the window parameter allows for faster resolution of the meaning of that variable within your block of code.