why does `this` point to object [duplicate] - javascript

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 3 years ago.
In the following code, why test function's second this points to obj, whereas the first this points to window object?
In particular, how can I guess the value of this by looking at a piece of code?
var test = function(){
console.log('first', this)
return function(){
console.log('second', this)
}
}
var obj = {
a: 1,
b: test()
}
obj.b() // execute function

You call test on object creation triggering the first logging and store the created function to the object. You call that function on global level and therefore this gets resolved at that scope.
Is this some sort of interview question?
What are you trying to achieve/understand?
Edit:
See this guide for a good explanation of 'this':
https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/

Related

Why do I need to bind a shadowed function that is called through the same object? [duplicate]

This question already has answers here:
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Closed 4 years ago.
Was doing some dirty things to Array.prototype when I ran into this:
Array.prototype.hook_pop = function(callback) {
var base_pop = this.pop.bind(this); //<-- this works
var base_pop = this.pop; //<-- this doesn't work
this.pop = function() {
var ret = base_pop();
callback(ret, this);
return ret;
}
}
Initially I tried using the non-working option and got an error "Uncaught TypeError: Cannot convert undefined or null to object".
The way I've understood it, unless otherwise bound, "this" should point to the object through which the method is called from, in this case the array instance. When called on the same object though, either way, "this" should be the same when being passed to the pop function, whether its bound or not. Why doesn't the second option work?
var ret = base_pop();
In this line you're invoking base_pop() by itself, and not as a method of any object. Because of this, its this value isn't set.

how object.constructor() works? [duplicate]

This question already has answers here:
Javascript constructor return values [duplicate]
(2 answers)
Closed 5 years ago.
Recently I have attended one interview, Interviewer asked one interesting question have a look
function MyClass(){
this.a = 10;
return 20; // Interesting part
}
var obj1 = new MyClass();
console.log(obj1.a); // 10 works as expected.
console.log(obj1.constructor()); // 20 later I found this
how will you access return value(20) from obj1?
I found the answer after looking proto of the obj1.
obj1.constructor() Works as expected
Please help me to understand this.
See mdn:
The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)
The 20 goes nowhere and cannot be accessed. It isn't an object, so the instance of MyCass is returned instead.

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.

'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.

Categories