Still confusing about Closure in Javascript with example

Question

I'm a fresh hand in Javascript. Now I'm trying to understand Closure. In most common case it's easy to understand. But there are still something very confusing. This might be a question about this in javascript. I'm not sure about it.

Here are 3 examples: 1:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return this.name;
  }
};

console.log(object.getNameFunc()); // 'My Object'

2:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return function() {
      return this.name;
    };
  }
};

console.log(object.getNameFunc()()); // 'The Window'

and last one:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    var that = this;
    return function() {
      return that.name;
    };
  }
};

console.log(object.getNameFunc()()); // 'My Object'

First one is very easy to understand. But why second one return The Window and third one return My Object.

duplicate question : https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 — Navid Yousefzai, Jan 10 '19 at 07:22
2 and 3 don't run at all, you have an invalid `;` after the `getNameFunc` function. — Barmar, Jan 10 '19 at 07:23
When I fix that, 2 and 3 print the function definitions, not a string. Can you fix the snippets to show the actual code? — Barmar, Jan 10 '19 at 07:25
Everything in JavaScript is an object, in 3 when you use 'that' you are saving the context of 'this' when you delve into another function 'this' changes. — SPlatten, Jan 10 '19 at 07:34
@NavidYousefzai Actually I can understand cases in that question. They are all like the first one. But nothing like second or third one. This might be about `this` I'm not sure about it. — ThanksSirAlex, Jan 10 '19 at 07:35
Did you look on this: https://stackoverflow.com/questions/6476521/this-keyword-in-object-method-points-to-window? — Or Assayag, Jan 10 '19 at 07:41
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Inigo, Jun 15 '20 at 17:06

score 2 · Answer 1 · answered Jan 10 '19 at 07:38

this is a special keyword, not an ordinary variable, and it's not saved in closures. So in the 2nd version, the inner closure does not use the value of this that was received by getNameFunc(), it defaults to the global value, which is the Window object.

The 3rd version works because that is a normal variable, so it's preserved in the closure.

You can either bind the function like this:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return (function() {
      return this.name;
    }).bind(this);
  }
};

console.log(object.getNameFunc()()); // 'The Window'

or use an arrow function:

var name = "The Window";

var object = {
  name: "My Object",
  getNameFunc: function() {
    return () => this.name;
  }
};

console.log(object.getNameFunc()()); // 'The Window'

For more information, see How to access the correct `this` inside a callback?

So in 2nd `object.getNameFunc()` return `function() { return this.name }`. It equals to define a function in window. So it get `The Window`. Am I right? — ThanksSirAlex, Jan 10 '19 at 08:11

Still confusing about Closure in Javascript with example

1 Answers1