undefined function when accessed from asynchronous function [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 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...

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);

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.

Why "this" is not working? [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 6 years ago.
In java script when we make a new constructor function we use "this.property name". We use "this" to refer the object which currently in use. But in a general function we doesn't use "this" keyword. According to my understanding if we use "this" in function it should point to the current function. However when we used, it was not producing the expected result. Why? Example
function greet(name){ console.log("Hello " + this.name);
}
Output is "Hello" then blank.
Because in general function, we are by default referring 'window' object so anything we make it becomes window level object or variable.
Like,
function fun(){
this.title = "window";
}
fun();
or window.fun(); //both are same. Since we call window.fun, this.title means window.fun.
If you create like this:
var obj = {
}
**Now to make title at obj level, you can do like this:
fun.call(obj);
Now you can call obj.title.**
Read this about this
In most cases, the value of this is determined by how a function is called.
When you use the new keyword in javascript an implicit object is created and returned from the function call. Inside of the function this refers to the newly created object. Calling a function without new does not have the same behavior.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

'this' is undefined in the next scope [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
My problem is as simple as the title.. I have some code which makes an AJAX call. This code is similar to this (JSFiddle):
function Test() {
this.name = "U don't wanna know my name..";
}
Test.prototype.ajax = function() {
$.ajax("url/path", data, function() {
alert(this.name);
});
};
var test = new Test();
test.ajax();
In this case this is undefined. I could place the following code before the ajax call and use that in stead of this:
var diz = this;
I was wondering if there's another way of using this without creating a new variable for it.
In this case this is undefined.
this.name is undefined (assuming you meant that), because this is specific to a function's context. Inside that ajax's callback handler this no more belonged to Test, it belonged to that callback function.
was wondering if there's another way of using this without creating a
new variable for it.
I don't think that without saving the reference to parent's this (Test's this) you can access this that belonged to a more global scope from a function's scope.

How does 'this' works in javascript? [duplicate]

This question already has answers here:
In Javascript, why is the "this" operator inconsistent?
(8 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 9 years ago.
hi i am a little confusion on how exactly this works in javascript.Based on this example:
var myFunction = function(){
function testMe(){
console.log(this) --------> DOMwindow
}
console.log(this) ---------> myFunction
}
var myvariable = new myFunction();
What is happening here?
The value this references depends on circumstances. Any unscoped (i.e. not in an object) function call will have this = window (DOMWindow, if you prefer). Anything that is part of a prototype, or has been changed using apply or bind, will have this as that object ("itself", if you prefer).
So, to illustrate. When you are instantiating using the new keyword, your function automatically inherits this as itself. When you call an IETF within it, this within this IETF will point to the global scope.
If you would like to avoid this, instead of calling testMe literally, you can always do this:
var myFunction = function() {
var testMe = function() {
console.log(this);
}
testMe.bind(this);
}
Which will, in turn, have this within testMe use the object as it should.

Categories