0

I got confused, because I always thought that this refers to the object owner, or the owner of the function, or method, but according to w3schools, this refers to the caller of the function, and the example they provided really does shows that.

function myFunc(name) { 
    
  this.name = name;
  this.showName = function() { 
    console.log(this)   
  }
}
window.addEventListener('load', myObj.showName)

Why does this here refer to the caller, in this case, the window object?

When invoked as a method, it refers to the object owner:

myObj.showName()

In here, it refers to the owner of the function, which is the myObj instance.

So, when I invoked the function as a call back, am I not invoking again the object method? How is it different? Isn't the owner of the function still the object myObj even when invoked as a call back? Does the object owner change?

Is there any difference between this inside the method, and this inside the constructor, i.e. this in here: this.name = name, and this inside the method: this.showName() = function() { console.log(this) }?

This explanation does not explain why this refers to the caller when used as a callback, or whether definitely this inside a constructor refers to the object owner or the caller.

happy_story
  • 1
  • 1
  • 7
  • 17
  • because `myObj.showName` is a LINK to showName function, so that you "said" here, hey window object I want YOU call function that stores here myObj.showName (address in memory). One more time here `window.addEventListener('load', myObj.showName)` you are NOT CALL the function, just gives LINK to it for window object and later when event LOAD happened WINDOW object call the function – Oleksandr Sakun Aug 27 '21 at 21:14
  • @MinusFour No.. – happy_story Aug 27 '21 at 21:29
  • @OleksandrSakun I understand that the window object is calling the function, but why does `this` inside the function now refer to the `window` rather than to its object owner? Does `window` now become the object owner? – happy_story Aug 27 '21 at 21:31
  • this - refers to caller rather than owner. Owner is scope/namespace. Owner can be used to call a function with its context like so: obj.showName() or to give a link for the function so that it could be called with another contex (object) like so window.showName = obj.showName or like you posted in the question via callback – Oleksandr Sakun Aug 27 '21 at 21:44
  • `Owner is scope/namespace.` what is that mean? All the explanation of `this` that I've read from multiple sources say that when inside a constructor function it refers to the object owner, or the new instance of the constructor. Now you're telling me that ACTUALLY it refers to the caller? I am going to need some real definitive answer at least from multiple people. – happy_story Aug 27 '21 at 22:11
  • "*why `this` refers to the caller when used as a callback*" - it does not. It refers to whatever the caller chose as the `this` context. "*whether definitely `this` inside a constructor refers to the object owner or the caller*" - neither, it refers to the newly constructed object. – Bergi Aug 27 '21 at 22:58
  • @IloveCoffee Functions do not have an owner. They are standalone objects (consider `function f() {}` `f();`). Only if you call them as a method on an object (`obj.method()` syntax), the `this` value gets dynamically bound to the object they were accessed from as a member. Please see the linked canonical question. – Bergi Aug 27 '21 at 23:00
  • @Bergi Isn't the newly constructed object the object owner? I know `this` inside a constructor refers to the new instance of the constructor aka the `object owner`. But then why when you create a new method inside the constructor, `this` inside that method refers to whoever invoked the method rather than the object owner, or the instance of the constructor? – happy_story Aug 28 '21 at 11:02
  • @Bergi Is it because when you invoke the method as a callback, it's considered a standalone function? If that's true, why? – happy_story Aug 28 '21 at 11:03
  • @Bergi I read the suggested answer, but it's way, way too complicated, and ultra convoluted explanation. The information overload is having the opposite effect. Too much unnecessary information only confuses, rather than clarify. I did caught however this `Properties set on this in the constructor will end up on the resulting instance object`.. So, again as I thought all along from the beginning, `this` inside a constructor refers to the object owner, the new instance. Why then does it refer to the caller when the method is invoked via callback!? I just want a simple answer, not an essay. – happy_story Aug 28 '21 at 11:20
  • @IloveCoffee Then read one of the other answers or the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). "*Isn't the newly constructed object the object owner?*" - an "object owner" is not an established term (and objects aren't "owned" by anything), so I had no idea what you were referring to. – Bergi Aug 28 '21 at 11:57
  • @IloveCoffee "*Why when you create a new method inside the constructor, `this` inside that method refers to whoever invoked the method*" - because it doesn't matter where the method is created, the value of the `this` keyword in methods is always dynamically bound at the time of the call. The `this` in the method is not the same as the `this` in the constructor (if you wanted that, you'd use an arrow function). And no, it doesn't refer to "*whoever invoked the method*" ("who" is that even? the code that makes the call?), it just is *determined* by the caller. – Bergi Aug 28 '21 at 11:57
  • @IloveCoffee "*Is it because when you invoke the method as a callback, it's considered a standalone function?*" - no. The function object is always standalone. Typically multiple objects contain (or inherit) the exact same function object. And especially when you pass the function object around, it doesn't take any context with it. See also [How to access the correct `this` / context inside a callback?](https://stackoverflow.com/q/20279484/1048572) – Bergi Aug 28 '21 at 11:59
  • @Bergi By `object owner` I mean the new instance of the constructor. When you instantiate a new object, all the properties you have defined inside the constructor become properties of the new object .. the new object is the `owner` of any property or method defined inside the constructor. I've read & heard countless time that `this` inside a constructor refers to the new object instance, so now you're telling me that no.. that's not true, it actually refers to the caller. `The this in the method is not the same as the this in the constructor` how so? – happy_story Aug 28 '21 at 17:25
  • `(if you wanted that, you'd use an arrow function)` .. why? you can't create a constructor with an arrow function. `The function object is always standalone` -- but I am talking about a constructor and the instance of that constructor aka the object. – happy_story Aug 28 '21 at 17:27
  • @IloveCoffee There is no magic about properties "defined inside the constructor" - you're just creating properties on an object by assignment, like you can create them on any other object. And notice that you can assign the same value to properties on multiple objects - is it then "owned" by all of them? That's why we don't talk about ownership in JavaScript. "*now you're telling me that no.. that's not true, [`this`] actually refers to the caller.*" - no, I didn't tell you that. It's not even clear what "the caller" is - the function calling the method? No, it definitely doesn't refer to that – Bergi Aug 28 '21 at 19:35
  • @IloveCoffee "*The this in the method is not the same as the this in the constructor*" - because they're two separate `function`s, and each has its own `this` value when being called. "*you can't create a constructor with an arrow function*" - I was referring to creating `showName` as an arrow function. – Bergi Aug 28 '21 at 19:36

0 Answers0