Javascript scope and variables

Question

var name = "Bob";

var book = {
    name: "Harry Potter",
    writeName: function() {
        return function() {
            document.writeln(this.book.name);
        }
    }
};

When I call this

book.writeName()();

I want it to print Harry Potter (not Bob) which it does above, however this:

var book2 = book;
book = null;
book2.writeName()();

Now looks for this.book (which is null) where it should be looking for this.book2

How can I reference the variable?

OK sorry I have to refine: Don't use `this` where inappropriate, like here inside the returned function where [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) refers to the global object :-) — Bergi, Feb 17 '14 at 13:32

score 5 · Accepted Answer · edited May 23 '17 at 11:45

What you need here is a variable in the writeName closure:

var book = {
    name: "Harry Potter",
    writeName: function() {
        var name = this.name; // turn dynamic property into closure variable
        return function() {
            document.writeln(name);
        }
    }
};
book.writeName()(); // Harry Potter

Instead of storing only the name in the closure, you also could store a reference to the object like in @Quentin's answer. It might make a difference if you plan to change the .name property before calling the returned function.

For the question whether to use this or book for referencing your object see Javascript: Object Literal reference in own key's function instead of 'this'.

score 3 · Answer 2 · answered Feb 17 '14 at 13:25

Since you are returning a function, you are going to lose whatever context you got from calling the function that generates it.

You need that context to reference the object, so you need to preserve it.

writeName: function() {
    var myBook = this;

You then need to use that preserved context:

    return function() {
        document.writeln(myBook.name);
    }

Royi Namir · Answer 3 · 2014-02-17T13:31:25.523

2

try this : http://jsbin.com/pagumiwi/4/edit

var name = "Bob";

var book = {
    name: "Harry Potter",
    writeName: function() {
        return function() {
            document.writeln(this.name);
        }
      }()
    };



book.writeName(); //would also work
var book2 = book;
book = null;
book2.writeName(); //would also work

edited Feb 17 '14 at 13:31

answered Feb 17 '14 at 13:23

Royi Namir

144,742
138
468
792

@RoyiNamir I don't want to change the way I call the functions so I still want to call book.writeName()(); – Feb 17 '14 at 13:30
@CamSonaris You should have mention this in your question. – Royi Namir Feb 17 '14 at 13:30

Andy · Answer 4 · 2014-02-17T13:35:25.583

1

Because this changes when the context changes you need to save a reference to the original this. Here I've used _this

var book = {
  name: "Harry Potter",
  writeName: function() {
    var _this = this;
    return function() {
      console.log(_this.name);
    }
  }
};

book.writeName()() //  Harry Potter

var book2 = book;
book = null;
book2.writeName()();  //  Harry Potter

Demo

edited Feb 17 '14 at 13:35

answered Feb 17 '14 at 13:29

Andy

61,948
13
68
95

Javascript scope and variables

4 Answers4