How to access variables in closure if there are local variables with the same name?

Question

I took this from the Google Code playground http://code.google.com/apis/ajax/playground/

/*CLOSURE
* When a function is defined in another function and it
*    has access to the outer function context even after
*    the outer function returns
* An important concept to learn in Javascript
*/

function outerFunction(someNum) {
  var someString = 'Hai!';
  var content = document.getElementById('content');
  function innerFunction() {
    content.innerHTML = someNum + ': ' + someString;
    content = null; // IE memory leak for DOM reference
  }
  innerFunction();
}

outerFunction(1);

///////////////////////

All this is normal, but if I have a local variable in the internal function with the same name as the variable in the external function, then how do I access this variable?

function outerFunction(someNum) {
  var someString = 'Hai!';
  var content = document.getElementById('content');
  function innerFunction() {
    var someString='Hello';
    content.innerHTML = someNum + ': ' + someString;
    content = null; // IE memory leak for DOM reference
  }
  innerFunction();
}

outerFunction(1);

Answer 1

You cannot, because the variable of the outer region is obscured by the one in the inner function.

The scope chain innerFunctiondoes not look something like this:

  innerFunction outerFunction global object
 ______________________         ________________________        _______________
|* someString = 'Hello'| <---- |  someString = 'Hai!'    | <---|* outerFunction|
 ----------------------        |* content = [HTMLElement]|     |    .....      |
                               |* someNum (argument)     |      ---------------
                               |* innerFunction          |
                                -------------------------

* Denotes a resolvable identifier from the scope of innerFunction.

, , .

, .

, , , , , ReferenceError.

:

• ECMA262-3 :
• JavaScript

Answer 2

"" , :

function outerFunction(s) {
  var someString = 'Hai!';
  function innerFunction() {
    var someString='Hello';
    alert(someString);
  }
  innerFunction();
}
outerFunction();

Hello.

- , :

function outerFunction(s) {
  var someString = 'Hai!';
  function innerFunction(outer) {
    var someString='Hello';
    alert(outer);
  }
  innerFunction(someString);
}
outerFunction();        

Hai!

, .

Answer 3

.varname , .

this.someString in your example.

Answer 4

You could

• just don't create a local variable with the same name or
• make a local copy of this closing variable before declaring a local variable with the same name (if you really need a local variable with the same name)

(had a workaround, but deleted it after it was stated that it actually didn't work)

Answer 5

function outerFunction(someNum) {
var someString = 'Hai!';
var content = document.getElementById('content');
function innerFunction() {
this.someString = 'Hello'; 
content.innerHTML = someNum + ': ' + someString;
content = null; // IE memory leak for DOM reference
 }
    innerFunction();

} outerFunction (1);