Seguindo por partes:
Primeiro, a sua variável objeto
presente no $(document).ready(...
não possui o var
logo ela declarada no escopo global (reutilizável em todas as funções dentro do script), essa variável receberá o new Obj1()
, que é uma função no escopo.
Dentro da Obj1()
existe:
var minhaFunc = function(){
document.write(texto);
}
Vamos deixar ela quieta, voltaremos a ela posteriormente.
Em outro momento do código da função Obj1()
, nela há uma nova declaração da variável objeto
, porém desta vez com a utilização do var
, ou seja, está restrita a essa função, qualquer chamada a ela dentro dessa função receberá, ao invés de Obj1()
o Obj2()
.
Logo após temos:
this.passa = function(){
objeto.setFunc(minhaFunc);
objeto.exec();
}
A função passa()
, chama a var objeto
, que neste momento refere-se a função Obj2()
, função a qual possui outra "subfunção" a setFunc()
:
this.setFunc = function(func){
minhaOutraFunc = func;
}
Essa função recebe como um parâmetro/argumento uma outra function que será armazenada na var minhaOutraFunc
, sabendo que ela pertence a Obj2()
. Mas no Obj1()
passamos a ela o minhaFunc()
:
objeto.setFunc(minhaFunc);
Ou seja, a var minhaOutraFunc
no Obj2()
agora possui a minhaFunc()
, já dita anteriormente ("voltaremos a ela posteriormente"). Esta irá imprimir na tela "Primeiro Objeto".
Mas dentro da função passar()
, também há:
objeto.exec();
O exec()
no Obj2()
é uma função que executa a var minhaOutraFunc
, lembra que esta possui a minhaFunc()
que pertence ao Obj1()
e que nele escreve na tela este texto? Pois é. Olhe:
this.exec = function(){
minhaOutraFunc.call();
}
O grande problema foi porque a var texto
dentro de cada Obj, está declarada dentro de cada função restriva, devido ao uso do var
.
Por isso ao executar uma função dentro do escopo de cada função, a variável texto fará correspondência a função em questão.
Exatamente por isso, imprime-se na tela o texto da da função Obj1()
.
Mas, e se eu quisesse, nesse caso, escrever o texto do Obj2()
Bastaria declarar, a variável texto
, no escopo global, ou seja, sem o uso do var
. Olhe:
var objeto;
$(document).ready(function(){
objeto = new Obj1();
objeto.passa();
});
var texto;
function Obj1(){
texto = "Primeiro Objeto";
var minhaFunc = function(){
document.write(texto);
}
var objeto = new Obj2();
this.passa = function(){
objeto.setFunc(minhaFunc);
objeto.exec();
}
}
function Obj2(){
texto = "Segundo Objeto";
var minhaOutraFunc;
this.setFunc = function(func){
minhaOutraFunc = func;
}
this.exec = function(){
minhaOutraFunc.call();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Isso acontece porque dentro do $(document).ready(...
a última execução é a da função passa()
do Obj1()
. E a última execução dentro dessa função, é a o chamado da escrita na tela, como o que será escrito é a variável texto
e a última declaração dela dentro do escopo global (já que dessa vez foi declarada sem o var
) foi feita no Obj2()
, será impresso o que está nessa função.
E outra coisa, uma variável por mais que sua chamada/utilização não seja com var
, para ser considerada global, deve ser declarada sim com o var
, porém no escopo em que se queira reutilizar, no global, ou em uma função. Isso também vale para a variável objeto
no início de seu código.
E porque funcionou na situação anterior?
O javascript vai tentar lhe a dar quantidade menor possível de erros, principalmente quando falamos de reutilização de variáveis. Por isso que não precisamos determinar seu tipo, por isso que podemos fazer coisas como essa:
"5" * 8; // 40
Informação relevante dentro de todo esse texto: sempre que executar códigos que envolvam variáveis, sua execução vai levar em consideração a última declaração dessas variáveis.