Javascript wrapped function and this keyword [duplicate] - javascript

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
I'm learning about "bind", and I found there is another way of using the wrap function, without using "bind". I can code like below.
let user = {
firstName: "John",
sayHi() {
alert(`Hello, ${this.firstName}!`);
}
};
//using wrap function instead of bind
setTimeout(function() {
user.sayHi(); // Hello, John!
}, 1000);
If you use setTimeout(user.sayHi, 1000); instead of wrap function, it doen't work. I know why.
But I can't understand, why does it work when you use wrap function?

Related

Uncaught TypeError is not a function when I call a method from another method using setInterval in Javascript [duplicate]

This question already has answers here:
setTimeout and "this" in JavaScript
(5 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 2 years ago.
I'm having this error when I call a method from another method in a class. This method is been called from setInterval.
class App {
b() {
console.log("BBBBBBBB")
}
t() {
console.log("TTTTTTT")
this.b();
}
}
const t = new App();
setInterval(t.t, 1000);
You need to bind the method to the variable so the value of this stays constant. Read this page for more information.
setInterval(t.t.bind(t), 1000);

undefined function when accessed from asynchronous function [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 5 years ago.
I don't understand, why when I set a function to an object instance, whenever it is accessed from something asynchronous, like setTimeout or a promise, it is undefined. Can someone please explain? Is there a workaround?
Thanks
function Animal() {
this.check = function () {
writeln(typeof this.test);
}
setTimeout(this.check, 1000); // returns undefined
}
var animal = new Animal();
animal.test = function () {
}
animal.check(); // returns function
Because you're losing context here:
setTimeout(this.check, 1000);
So therefore this inside check will be window, which does not have a test property. Maybe do:
setTimeout(this.check.bind(this), 1000);
Side note: Having dynamically assigned functions is a performance killer and therefore bad style. There's always a better way...

Lexical `this` and Timeout [duplicate]

This question already has answers here:
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Closed 5 years ago.
Im reading through the YDKJS books and I thought I understood lexical this for the most part.
However there is a section with code that shows this:
var obj = {
id: "awesome",
cool: function coolFn() {
console.log( this.id );
}
};
var id = "not awesome";
obj.cool(); // awesome
setTimeout( obj.cool, 100 ); // not awesome
Ok so the first obj.cool() makes sense of course....but why is the setTimeout printing not awesome.....I mean it's still calling obj.cool() which this refers to it's own objects id?
Or does setTimeout get called as another function that calls obj.cool()? but even in that case (Which I tried calling obj.cool() inside another function that also had an id property and it still printed the right one......so why would the this change with setTimeout?
Since the OBJ.COOL function is passed by reference, you are not actually passing the context object with it. The function gets new invocation context and executes on the WINDOW object, which now has a property called ID which was defined earlier.

How to pass 'this' into a Promise without caching outside? [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 3 years ago.
I have a variable called LangDataService.isDataReady that is a Promise wawiting to be resolved. Upon resolve some logic will happen. How can I pass this into that Promise?
LangDataService.isDataReady.then(function () {
this.modalOn()
});
I know i can cache var self_ = this; but I'm curious of other alternatives?
LangDataService.isDataReady.then(function () {
this.modalOn()
}.bind(this));

Use a variable as function in jquery [duplicate]

This question already has answers here:
Javascript dynamically invoke object method from string
(5 answers)
Closed 8 years ago.
I want to use a method in which i will pass a function_name as parameter to another function.
On the other function, the parameter will be treated as a function
here's my code example
<div class="btn_crt_acct" onclick="toggle_object('register_div','slideDown');">
CREATE AN ACCOUNT
</div>
whch will call a function like this
function toggle_object(obj,fun)
{
$('#'+obj).fun('slow');
// fun => slideDown
// so $('#'+obj).fun('slow'); => $('#'+obj).slideDown('slow');
}
but i am doing something wrong as it states an error in console, $fun(..) is not a function.
How can i make it work perfectly??
Thanks
You'd do that with bracket notation
$('#'+obj)[fun]('slow');
FIDDLE
But why not use a proper event handler, and slideToggle if you intend to toggle it
$('.btn_crt_acct').on('click', function() {
$('#register_div').slideToggle();
});

Categories