Javascript Scope and local variables

I'm really not sure if this is possible in Javascript. Here's my function:

var tree = function(name, callback) {
  if (this.name) {
    this.name.push(name)
    print(this.name)
  } else {
    this.name = []
  }
  callback()
}

I'd like to use it as follows and print out the hierarchy:

tree("john", function() {
  tree("geoff", function() {
    tree("peter", function() {
      tree("richard", function() {
      })
    })
  })
  tree("dave", function() {
  })
})

Here's the desired output:

// ['john']
// ['joh开发者_如何转开发n', 'geoff']
// ['john', 'geoff', 'peter']
// ['john', 'geoff', 'peter', 'richard']
// ['john', 'dave']

but unfortunately I'm getting

// ['john', 'geoff', 'peter', 'richard', 'dave']

for the last function call. Is there a way to get the desired outcome?

Kind regards

Adam Groves

The reason why the last line is printing all the names is because this.names is never removing the names that are being added to it. You're just appending names onto it. So when the function call is made

callback()  

with the value

function() {
  tree("richard", function() {
})  

this.names = ['john', 'geoff', 'peter'] and after the call this.names = ['john', 'geoff', 'peter', 'richard']. So now when you call

tree("dave", function() {
});

this.names is still ['john', 'geoff', 'peter', 'richard'].

Try the following instead, and notice I changed this.name to this.names to make is easier to read.

var tree = function(name, callback) {
  if (!this.names) {
    this.names = [];
  }
  this.names.push(name);
  print(this.names);
  callback();
  this.names.pop();
}  

I'm not certain what callback does, but you should probably use apply() or call() when you invoke it.

callback.apply( this, arguments );