default "this" binding in javascript

Question

I am reading a book and it says that this inside a function is set in 4 different ways. Default, implicit, explicit binding + using a new syntax. In all cases, this is set at function call. Take a look at example.

When I call jajca(), I am expecting this to be set via default binding.. thats is when jajca() is called this is already set to the object that was created using new syntax. Yet for some reason I don't understand, this inside jajca points to window even though that via default binding, this should be pointing to the object created using new.

function jajca() {
   this.musicFolderPath = "value2"; // never gets assigned to the correct this.musicFolderPath
}

function Music(){
  this.musicFolderPath;
  jajca(); // music.musicFolderPath is undefined
  // jajca.call(this); music.musicFolderPath is correctly set
}

    var music = new Music();
    //music.musicFolderPath is undefined

Can you explain why this is not set as I expected? If explicit binding is used, than this points to the object created using new keyword as expected.

Possible duplicate of [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — ic3b3rg, Dec 20 '18 at 20:43
Those two `this` are completely unrelated : One is inside a usual function, one in a constructor function — Vivick, Dec 20 '18 at 20:43
`this` will be whatever value is to the left of the right-most dot used to invoke the function. in your case, there is no dot, so it's `window`. If you made it a method, `Music.prototype.jajca`, and called it as `music.jajca()`, the instance would be to the left of the last dot, and it would be a method instead of a stand-alone function. `call` and `apply` and `bind` over-ride that of course. — dandavis, Dec 20 '18 at 20:44
"_when jajca() is called this is already set to the object that was created using new syntax_" But there is no connection between `jajca` and your object you created. How can the js know what you want `this` attached to in that case? — takendarkk, Dec 20 '18 at 20:44
`jajca()` is a global function: It's parent is the `window` object. Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Window — Marvin, Dec 20 '18 at 20:45
@ic3b3rg: what does `this` have to do with closure? (it's not lexicaly static) — dandavis, Dec 20 '18 at 20:48
You should read [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) — Agnius Vasiliauskas, Dec 20 '18 at 20:51
@csmckelvey the connection is that when jajca is called, `this` is set to the new object. When `jajca` function is called, it first looks around and determines to what `this` is pointing. It than uses that `this` via default binding. So my question can translate. Does default binding look around to determine `this` or is it alwaya pointing to window (in browsers), regardless of what `this` value is right before the function is called. — potato, Dec 20 '18 at 21:00
"_it first looks around and determines to what this is pointing_" If I called `jajca` after creating 5 different random objects, which one of those objects should `this` refer to in that scenario? Again, how do you expect js to know which object to attach `this` to when there is no explicit connection between `jajca` and anything else. — takendarkk, Dec 20 '18 at 21:02
@dandavis ya, I guess https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work is a better choice — ic3b3rg, Dec 20 '18 at 21:05

score -2 · Answer 1 · answered Dec 20 '18 at 20:45

When I call jajca(), I am expecting this to be set via default binding.. thats is when jajca() is called this is already set to the object that was created using new syntax. Yet for some reason I don't understand, this inside jajca points to window even though that via default binding, this should be pointing to the object created using new.

The gist of the idea is that whenever you call another function, the object that this represents will be "reset". (- According to the various rules of what "this" means -- this is what your book goes into. For example, when you do obj.bar(), the value of this in bar will be obj. That's why the "this" value "stays the same" when you do this.baz(): it's just saying, let the this inside baz be equal to the current this value.)

It's a pretty in-depth topic that your book likely goes into better detail than I could write in a brief StackOverflow answer, but if you keep that in mind while you're learning, you'll understand things easier.

In this case, yes, you'd want to do jajca.call(this) to make the value of this inside jajca be what you want it to be.

default "this" binding in javascript

1 Answers1