Javascript - Access variable

Question

Situation

I am deepening my study a Javascript, and I came up with a little doubt.
In closure, encapsulation and variable scope, all show how to use the var and talk about Local and Global scope, however in all the examples I’ve seen we always use variables with different names to media that "go down".

Example

function x() {              // "x" tem acesso a "a"
    var a;
    function y() {          // "y" tem acesso a "a" e "b"
        var b;
        function z() {      // "z" tem acesso a "a", "b", e "c"
            var c;

Doubt

How to access the "parent" variable when it exists at the location?

Example

function x() {              // "x" tem acesso a "a"
    var a;
    function y() {          // "y" tem acesso a "x.a" e "a"
        var a;
        function z() {      // "z" tem acesso a "x.a", "x.y.a", e "a"
            var a;

Testing

When the variable is global (is not recommended) I can do it like this:

var a = 'Global';
function(){
    var a = 'Local';
    console.log(window['a']);
    console.log(a);
}

Answer 1

In the case of accessing the function variable previously to the declared scope, I would suggest that you do this in the function property, as it would become difficult or impossible to access the previously declared variable.

Instead of doing like this:

function x() {
    var a = 1;

    function z() {
        var a = 2;
    }
}

It could be done like this:

function x() {  
    x.a = 1;
    function z() {
        z.a = 2;
        console.log(x.a); // Imprime '1'
    }
}

Generally, there are some special cases where it is necessary to access a variable with previous scope, to simulate something similar to static variables.

When there is this need, I usually use a self invoking Function, with its declared variables, being accessed by a function in the return.

Example:

var noMultihits = function ()
{
       var timeout = 0;

        return function (time, callback) { 
             // Sempre limpa o timeout anterior
             // A variável é de outro escopo
            clearTimeout(timeout);

            timeout = setTimeout(callback, time)
        }
})();

noMultihits(500, function (){});
noMultihits(500, function (){});
noMultihits(500, function (){}); 
// Só executa o último, pois a variável é do escopo da funçao autoexecutável

The advantage of that is:

• Do not pollute the global scope.

• If it does not pollute the overall scope, there is no risk of collision of variable names.

Still using the self invoking functions (self executable functions) it is possible to join the two solutions, to use something I would call an anonymous object.

var ajaxInfinito = (function anonimo()
{
   anonimo.pagina = 1;

    return function () {
       console.log(anonimo.pagina);
       $.ajax({
          url: 'pagina',
          data: {pagina: anonimo.pagina},
          success: function () { 

              anonimo.pagina++
          }
       });
    }
})()



   ajaxInfinito(); // 1
   ajaxInfinito(); // 2
   ajaxInfinito(); // 3
   ajaxInfinito(); // 4
   ajaxInfinito(); // 5

console.log(anonimo); // undefined, só existe no escopo da self-invoking

In that case we shall make important observations:

• ajaxInfinito will only receive the value of the function that is in the return of expression anonimo.

• anonimo is not a statement of a function, but an expression. I would call it a named closure. Note that the console.log anonymity will say that the variable does not exist. This is because that name is only valid within the scope of the autoexecutable function.

• As we are in another scope, the value of anonimo.pagina will always increase with each call, since it is part of the scope of the autoexecutable function whose internal name is anonimo.

Where access to anonimo, the function could be used with.

Behold:

var soma = (function obj(){
     obj.y = 4;
     obj.z = 5;

   return function () {
        var x = 3;

        with(obj) {
             x += y;               
             x += z;
        }

      return x;
   }
})();

 soma(); // 12

Change of context

@Guilhermelautert commented on the use of this. It is not possible to use it directly, since the context of the functions when called is window. Only when they are instantiated this refers to the object itself.

What can be done is to change the context in which the this is used by the function, passing other values. This is done through the method call.

Example:

function nome (pronome) {
    return pronome + ':' + this.a + ' ' + this.b;
}

nome.call({a : 'Wallace', b : 'Souza'}, 'Senhor'); // Senhor: Wallace Souza
nome.call({a : 'Guilherme', b : 'Lautert'}, 'Mister'); // Mister: Guilherme Lautert

The function $.proxy jQuery does something similar, but it is something that already exists natively.

Answer 2

When you define a local variable with the same name as a higher scope variable, the local variable overrides access to the larger scope variable.

One way around this would be to associate the variable to the function instance. Example:

function alfa()
{
  alfa.a = "valor em alfa.a";

  function beta() {
    var a = "valor de a local";
    console.log(alfa.a);
  }
  beta();
}

alfa();

But this type of code stinks and it would be recommended to use different names for such purpose.