6

Em Javascript, funções são objetos e podem se passadas como parâmetro para outras funções. Mas e quando uma função com dependências em um objeto, como variáveis e outras funções, é passada para outro objeto ? Ela executa sempre a partir do primeiro objeto ? E se eu quisesse que a função acessasse propriedades do segundo objeto ? O código abaixo imprime "primeiro objeto".

$(document).ready(function(){
	objeto = new Obj1();
	objeto.passa();
});

function Obj1(){
	var texto = "Primeiro Objeto";
	var minhaFunc = function(){
		document.write(texto);
	}
	var objeto = new Obj2();

	this.passa = function(){
		objeto.setFunc(minhaFunc);
		objeto.exec();
	}
}

function Obj2(){
	var 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/1.11.3/jquery.min.js"></script>

3
  • Mais especificamente..Você desejaria o que com essa funções? Um métodos que imprimisse algo direfente, como o da primeira função? Commented 17/01/2016 às 1:33
  • Imaginei que, como a função é passada para o segundo objeto, ela imprimiria a variável "texto" do segundo objeto.
    – Carlos
    Commented 17/01/2016 às 1:36
  • Hum.. entendi.. existe algumas explicações para isso. Tentarei juntá-las em uma resposta :) Commented 17/01/2016 às 1:37

3 Respostas 3

9

Pergunta interessante.

Considera o seguinte exemplo:

function a() {
    console.log('a', this);
}

function Obj() {
    var b = function() {
        console.log('b', this);
    }
    this.c = function() {
        console.log('c', this);
    }
    b();
    this.c();
}

function d() {
    function e() {
        console.log('e', this)
    }
    e();
}

a();
var o = new Obj();
o.c.call(window);
d();

Isto vai dar:

a Window
b Window
c Obj {}
c Window
e window

(https://jsfiddle.net/m6faf374/)

Sempre que declaras uma função o contexto de execução depende de alguns fatores. Se a função não fôr propriedade de um objeto ela vai correr com contexto global (casos a, b, e). Quando uma função é uma propriedade de um objeto então o contexto da função é esse objeto. Funções sem contexto defenido (ie que não são propriedade de nenhum objeto) correm contexto global.

Escopo e contexto são coisas diferentes. O escopo faz com que b seja um método privado do objeto, ie não disponível fora dele. O contexto tem a ver com o this dentro dessa função e o que ele é num dado contexto/momento.

Para mudar o contexto de uma função pode usar-se alguns métodos:

  • .bind(novoContexto) que não invoca a função, muda somente o contexto
  • .call(novoContexto, arg1, arg2, etc) este método invoca a função
  • .apply(novoContexto, [array com argumentos]) também invoca a função

Voltando ao teu exemplo imagina que o cenário era este (https://jsfiddle.net/zL9mroqm/), ou seja todas as funções e o texto estão ligados ao contexto de execução.

function Obj1() {
    this.texto = "Primeiro Objeto";
    this.minhaFunc = function() {
        console.log(this.texto);
    }
    var objeto = new Obj2();
    this.passa = function() {
        objeto.setFunc(this.minhaFunc);
        objeto.exec();
    }
}

function Obj2() {
    this.texto = "Segundo Objeto";
    this.setFunc = function(func) {
        this.minhaOutraFunc = func;
    }
    this.exec = function() {
        this.minhaOutraFunc();
    }
}

Neste caso imprime Segundo Objeto. Se mudares this.minhaOutraFunc(); para this.minhaOutraFunc.call(); vai dar undefined porque estás a chamar/invocar a função sem contexto. Se usares this.minhaOutraFunc.call(objeto); vai dar Primeiro Objeto porque defeniste que o contexto é a instância do objeto 1 que criaste dentro do .ready().

4
  • 1
    Só pra constar, eu adoro suas respostas. Como eu posso me tornar um mestre em JavaScript como você, @Sergio? Commented 17/01/2016 às 14:16
  • 3
    @EduardoAlmeida obrigado! Mas eu não sou mestre. Eu aprendi muito aqui, no SOen e com a comunidade do MooTools onde participo ativamente. Para além disso estou atento no YouTube e no Google acerca de novos artigos que vou lendo. Às vezes as perguntas aqui obrigam-me a ler e aprender para responder melhor. Acho que o truque é estar sempre curioso.
    – Sergio
    Commented 17/01/2016 às 14:20
  • Entendi, mas só uma dúvida: Porque b não pertence ao objeto ? Achei que a diferença entre usar "var" ou "this" fosse que, no primeiro caso, a variável é privada e, no segundo, a variável é pública.
    – Carlos
    Commented 17/01/2016 às 18:12
  • @Carlos essa diferênça é entre escopo e contexto. O escopo faz com que b seja um método privado do objeto, ie não disponível fora dele. O contexto tem a ver com o this e o que ele é num dado contexto.
    – Sergio
    Commented 17/01/2016 às 18:45
4

Isso é uma questão de escopo puramente e de overwriting (sobrescrição), já que, em JavaScript, as funções e objetos podem ser manipuladas facilmente como variáveis.

Pra acessar o método ou propriedade só é preciso informar objeto.propriedade ou objeto["propriedade"].

No seu exemplo você criou o objeto objeto ao criar um variável que recebe Obj2(). Pra acessar o texto de Obj2() no objeto Obj1(), você só precisaria de um objeto.texto.

Dentro de um objeto você tem que colocar a palavra-chave this ao declarar campos: this.texto; e ao se referir ao campo fora do objeto: objeto.texto

Se quiser trabalhar com herança, você pode dar uma olhada nos métodos .call() e prototype.

Seu código acessando o texto de Obj2():

$(document).ready(function() {
  objeto = new Obj1();
  objeto.passa();
});

function Obj1() {
  var objeto = new Obj2();
  this.texto = "Primeiro Objeto";
  var minhaFunc = function() {
    document.write(objeto.texto);
  }
  this.passa = function() {
    objeto.setFunc(minhaFunc);
    objeto.exec();
  }
}

function Obj2() {
  this.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>

0
3

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.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .