This question already has answers here:
Arrow Functions and This [duplicate]
(5 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 1 year ago.
Why is $(this) returning undefined instead of the clicked element?
I've replaced $(this) with event.target and it works fine but would like to understand the issue with $(this), thank you!
$('.nav-search-options').on('click', (event) => {
console.log($(this))
})
#JamesJavascript.
It is partially right what Justinas said in the comment about arrow function - although there are more things to add.
Arrow functions do not have their own "this", instead they bind one from their parent scope.
To see what I mean, try this and see that it returns you the window object:
const myFunction = () => {
console.log(this);
};
// call it
myFunction();
Read more about it here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Related
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
What is the difference between "let" and "var"?
(39 answers)
Closed 3 months ago.
I want to be able to define a function (either regular or arrow) globally in the js window like this:
function myRegularFunction(){
console.log("hello from the regular function");
}
const myArrowFunction = () => {
console.log("hello from the arrow function");
}
and then be able to invoke it elsewhere like this:
window['myRegularFunction']();
window['myArrowFunction']();
When I define functions as stated above, I am then able to inovke the regular function, but the arrow funcion is not appearing in the js window, and thus I cannot invoke it.
From the console, I get:
window['myArrowFunction']
undefined
Can anyone help me with this issue?
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 8 months ago.
i just created an object with an arrow function :
const user={
fName:"0xN1nja",
about:()=>{
return this.fName;
}
}
now, when i call that arrow function with .call() method, it returns undefined :
a=user.about.call(user);
console.log(a);
>>> undefined
But when i replaced that arrow function with a normal function expression, it returns the value
const user={
fName:"0xN1nja",
about:function(){
return this.fName;
}
}
a=user.about.call(user2);
console.log(a);
>>> 0xN1nja
what is happening here?
PS : im new to javascript
Arrow functions don't bind to this as function do. That's one of the main reason they were introduced (probably the most important one).
You cannot even bind them.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 2 years ago.
$('#title').keyup( () => {
const title_val = $(this).val();
console.log('before');
if (title_val.length >= 20){
console.log(title_val);
}
console.log('after');
});
console.log('before') and console.log('after') works. If-statement only works if I use function() instead of () => {...}, even if the condition is satisfied. Why does it behave like this?
There is no this operator in arrow functions, only in function functions..
when using this in an arrow function, it doesn't refer to the function scope; rather, to the parent scope (usually window)
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
i have this object literal
let p = {
name : 'Amir',
say: () => {
console.log(this.name)
console.log(this)
}
}
and I want the say function works using this
p.say();
but the arrow function obviously gets the window object as 'this'. I know I could use a regular function for 'say' instead of arrow and it will work fine.
BUT
I would like to ONLY change the call to say function to make it work, but the binding won't work.
I mean something like p.say.bind(p)() or p.say.call(p) aint gonna work as desired.
Is it possible to change the call to function ONLY and not the say function?
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Difference between this ES6 arrow function and regular function? [duplicate]
(2 answers)
Closed 6 years ago.
I've got a code in js/jQuery for an event which is.
function extraAction(data) { console.log(data); }
$('a.edit').on('click', function(e) {
e.preventDefault();
var d = $(this).attr('href');
extraAction(d);
});
The code works just fine. But if I try to declare the function(e) as (e) => instead, I get an undefined in the console log. Why is that?
It works regardless if I pass a static string like extraAction('hello');