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?

• Bergi: Don't use this.
• user1571609: @Bergi But when I change to book2 it still looks for book
• Bergi: OK sorry I have to refine: Don't use this where inappropriate, like here inside the returned function where this refers to the global object :-)

Answer 1

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

Answer 2

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);
 }

Answer 3

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

• user1571609: @RoyiNamir I don't want to change the way I call the functions so I still want to call book.writeName()()
• Royi Namir: @CamSonaris You should have mention this in your question.

Answer 4

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