4

Estou aprendendo a usar objetos em JavaScript, e me deparei com um comportamento imprevisto no meu objeto. No caso quando tento armazenar um elemento via DOM dentro de uma propriedade o console diz que a propriedade é indefinida:

TypeError: this.seletorTimer is undefined [Learn More]

Imagem do erro no console

let Inicial = {
  seletorTimer: document.getElementById("TimerInicial"),
  letrasRegex: /[A-Z]+/,
  maximo: 59,
  SemLetras: this.seletorTimer.addEventListener('keyup', () => {
    if (document.getElementById("TimerInicial").value.match(this.letrasRegex)) {
      this.seletorTimer.value = "";
    }
  }),
  numeroLimite: document.getElementById("TimerInicial").addEventListener('keyup', () => {
    if (this.seletorTimer.value > this.maximo) {
      this.seletorTimer.value = 59;
    }
  }),
};

Código online no jsfiddle

O que eu estou tentando fazer nesse código é basicamente não permitir que o usuário digite letras ou símbolos (apenas números) e quando o usuário colocar um valor maior que 59, o evento reescreva o valor do input para 59. Confesso que não sei se é possível fazer um objeto dessa forma porque a questão do escopo fica um pouco confusa para mim.

6
  • 1
    Ola @Daniel, você poderia melhorar sua pergunta ( eu não consegui entender -- Como perguntar ), vale apena você colocar o erro que apareceu no console, isso pode ajudar a comunidade a solucionar sua dúvida. =P -- não esqueça de dar uma olhada em nosso Tour =D Commented 5/05/2019 às 5:29
  • 1
    @IcaroMartins não tenho o hábito de perguntar no Stack, tentei dar uma caprichada na pergunta, espero que esteja mais legível kkkkk Commented 5/05/2019 às 16:51
  • Também adicione seu código aqui como texto e não como imagem ou link
    – Costamilam
    Commented 5/05/2019 às 16:59
  • Verdade obrigado @Costamilam! Commented 5/05/2019 às 17:06
  • @DanielKenzi, alterei o titulo da sua pergunta, pois acredito que dessa forma possa ajudar outras pessoas. Se sentir que eu alterei o sentido da sua pergunta original acesse esse link (revisions) e clique em reverter na versão que você achar melhor. =D Commented 9/05/2019 às 18:32

1 Resposta 1

6

Parte de seus problemas e o entendimento de algumas coisas em seu código, o primeiro que eu vejo é o seu entendimento do this.

O this é o objeto de contexto de execução, sua utilização é um pouco complicada de entender mesmo, mas uma vez que você entenda sua utilização ele passa a ser muito útil, então vou tentar te explicar abaixo usando comentários no código:

/// ; neste momento o `this` === `window`
console.log( 'this é igual a window ? ',  this === window );


var elTimerInicial = document.getElementById("TimerInicial");


let Inicial = {
  seletorTimer: elTimerInicial,
  letrasRegex: /[A-Z]+/,
  maximo: 59,

  /// ; Neste momento o this ainda é `window` e nele não existe
  /// ; a propriedade `selectorTime`, você esta pensando que nesse
  /// ; momento o `this` era o objeto `Inicial` e por isso estava chamando
  /// ; `this.seletorTimer`.
 
  /// ; Outra coisa que acontece é que neste momento o objeto
  /// ; `Inicial` ainda não foi criado, ou seja, você também não
  /// ; conseguiria acessar usando `Inicial.selectorTime`


  SemLetras: elTimerInicial.addEventListener('keyup', function(){
      
      /// ; Agora complica um pouco, note que eu troquei seu 
      /// ; `Arrow Function` por um `Function normal`.
      /// ; Quando esse evento é disparado o `this` aqui vai ser o
      /// ; elemento que disparou o evento ou seja, nesse caso o `elTimerInicial`

      console.log( 'Function Normal,  this é igual a window ? ', this === window, this );

  }),

  numeroLimite: elTimerInicial.addEventListener('keyup', () => {
  
      /// ; Aqui eu mantive o `Arrow Function` para você ver a diferença
      /// ; ele NÃO cria contexto, então aqui dentro
      /// ; o `this` é o mesmo que era fora dele quando ele 
      /// ; foi criado, ou seja, o `window`.
      /// ; Esse é um dos motivos que levaram ao desenvolvedores
      /// ; a criar esse novo tipo de função, veja um
      /// ; exemplo prático na sessão 'alguns problemas comuns com this'.
      
      console.log( 'Arrow Function,  this é igual a window ? ', this === window );

  }),
};
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Guessing game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
    <h1>PROJETO TIMER</h1>
    <div id="TimerInicial">
        <input type="number"  placeholder="HH" > :
        <input type="number"  placeholder="MM" > :
        <input type="number"  placeholder="SS" >
    </div>
</body>
</html>


Outro problema é que em seu código você esta tentando pegar value do elemento #TimerInicial que é uma <div> e não o <input> que esta recebendo o valor. Então no código abaixo vamos tentar usar o this e mudar seu objeto.

var elTimerInicial = document.getElementById("TimerInicial");

/// ; ao invés de criar um objeto vamos usar o próprio `elTimerInicial` 

elTimerInicial.letrasRegex = /[A-Z]+/;
elTimerInicial.maximo = 59;
elTimerInicial.semLetras = function( input ){
    
    /// ; Quando você chamar essa função desta forma `elTimerInicial.semLetras( )`
    /// ; `this` aqui sera o próprio `elTimerInicial`

    console.log( '2- semLetras - this:' , this, ' input:' , input ); 

    if( input.value.match(this.letrasRegex) ){
        input.value = "";
    }

};
elTimerInicial.numeroLimite = function( input ){

     console.log( '3- numeroLimite - this:' , this, ' input:' , input );

     if ( input.value > this.maximo ) {
          input.value = 59;
     }

};


/// ; Como só os `input`s são filhos do `elTimerInicial` vamos usar a propriedade
/// ; `children` do `elTimerInicial` para pegar seu filhos e adicionar o evento neles
/// ; depois vamos usar o `this` novamente dentro da função:

for( var i = 0, max = 3; i < max ; i++ )
{

    elTimerInicial.children[ i ].addEventListener('keyup', function(){
        
        /// ; Quando essa funcao for chamada o `this` aqui dentro sera o `input`
        /// ; que disparou o evento.

        /// ; vamos usar o `parentNode` para pegar o pai desse `input` nesse caso o 
        /// ; `elTimerInicial` e vamos usar as funções que 
        /// ;  adicionamos a esse elemento `elTimerInicial`
        
        console.log( '1- keyup this:' , this, 'this.parentNode', this.parentNode );

        this.parentNode.semLetras( this );
        this.parentNode.numeroLimite( this );
        /// ;    ^          ^          ^ this === input 
        /// ;    |          função que adicionamos ao `elTimerInicial`
        /// ;    elTimerInicial

    });

}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Guessing game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
    <h1>PROJETO TIMER</h1>
    <div id="TimerInicial">
        <input type="number"  placeholder="HH" > :
        <input type="number"  placeholder="MM" > :
        <input type="number"  placeholder="SS" >
    </div>
</body>
</html>


Alguns problemas comuns com o this

Fato é que quando você esta usando this a forma como você chama uma função pode alterar o seu contexto.

Imagine que eu tenho um objeto com o nome mObject e nesse objeto existe o método minhafuncao que utiliza o this esperando que ele seja o mObject.

Imagine que por algum motivo ao invés de chamar o mObject.minhafuncao() assim, ou seja de forma direta, você precise chamar essa função dentro de um setTimeout, passar ela como uma callback ou associar essa função a uma variável para poupar tempo digitando etc... , como no exemplo abaixo:

var mObject = {
   minhafuncao:function(){
       console.log( 'this é:', this===window ? 'window' : this );
   }
};

/// ; Exemplo callback
function chamaCallback( callback ){
    callback();
}

chamaCallback( mObject.minhafuncao );

/// ; Exemplo associar a função a uma variável
var func = mObject.minhafuncao;
func();

/// ; Exemplo setTimeout
setTimeout( mObject.minhafuncao, 1 ); 

  

Se isso ocorrer o você ira perceber que o this que esta dentro da função não vai ser o mObject ele será o window ou algum outro contexto não esperado, agora você já deve ter notado que isso ocorreu porque o contexto da chamada mudou.

Isso pode ser solucionado de forma simples com o uso do apply, call, bind para manipular o contexto ou no caso do exemplo do setTimeout uma simples function já resolveria, veja o código abaixo:

var mObject = {
   minhafuncao:function(){
       console.log( 'this é:', this===window ? 'window' : this );
   }
};

/// ; Exemplo associar a função a uma variável
var func = mObject.minhafuncao;

func.call( mObject );
/// ; func.call( mObject, parametro1, parametro2, ...  );
/// ;            ^        ^ os parâmetros da função começa aki
/// ;            contexto, isso sera o `this` dentro da função   


/// ; Exemplo setTimeout
setTimeout( function(){
 
    mObject.minhafuncao();
    /// ; o contexto dessa chamada voltou a ser o `mObject`        
 
}, 1 );


 /// ; Exemplos com o `bind`
 var novaFunc = mObject.minhafuncao.bind( mObject );
 /// ; bind retorna a função com o contexto sendo o parâmetro


 /// ; Agora quando eu chamar a função `novaFunc` ela vai manter o contexto
 /// ; Então essa chamada o `this` sera o `mObject`
 novaFunc();
 
 
 /// ; Chamando pela callback
 function chamaCallback( callback ){
     callback();
 }
 chamaCallback( novaFunc );     

 /// ; O mesmo ocorre com o `setTimeout` o contexto da função vai ser mantido
 /// ; por causa do `bind` então o `this` sera o `mObject`
 setTimeout( novaFunc, 1 );

 /// ; Ou seja com `bind`, `call`, `apply` você vai conseguir manipular o
 /// ; contexto e modificar como quiser veja esse outro exemplo:
 novaFunc = mObject.minhafuncao.bind( {name:"### Mudei o contexto totalmente ###"} );
 setTimeout( novaFunc, 10 );
 

Um outro exemplo, imagina que você tem uma <div> em que você colocou um evento onClick, e você vai utilizar o this dentro do evento para alterar o style, className, etc... dessa <div> e depois de x tempo vai voltar ao normal, ou seja, utilizar um setTimeout dentro do evento.

/// ; criar a div
var div = document.createElement('DIV');

/// ; adicionar ele ao body da pagina
document.body.appendChild( div );

/// ; colocar o texto e mudar style `bgcolor`
div.innerHTML = 'MEU TESTE';
div.style['backgroundColor'] = 'red';

/// ; adicionar o evento de onclick
div.onclick = function(){
    
    /// ; `this` quando esse evento for disparado sera a `<div>`
      
    this.style['backgroundColor'] = 'green';
    this.innerHTML = "eu cliquei aki";
  
    /// ; agora dentro da função do setTimeout o `this` será a `window`
    /// ; para solucionar esse problema alem das soluções já mostradas
    /// ; podemos associar o `this` a uma variável local dentro do
    /// ; evento e utilizar essa variável dentro do `setTimeout` veja abaixo

    var self = this;

    setTimeout( function(){
       
       console.log( 'settimeout this é:', this === window ? 'window':'outra coisa');

       self.style['backgroundColor'] = 'red';

    }, 600 );
    
    /// ; Outra solução seria o uso do `Arrow function` 
    /// ; isso porque como eu já disse antes um dos 
    /// ; objetivos dele é de NÃO criar contexto, então 
    /// ; o `this` dentro dele será o mesmo que era fora dele

    setTimeout( ()=>{ 

       console.log( 'arrow function this é:', this === window ? 'window': this);

        this.innerHTML = "MEU TESTE";

    }, 600);
}


Outros links que podem ajudar

Links SOpt:

“this” uma referencia confiavel?

Qual a diferença entre $(this) e $this e this?

Para que serve o paramêtro THIS?

Links Externos:

codigosimples.net - Saiba mais sobre o “this” utilizado javascript

Referencias da Mozilla Developer Docs:

Arrow functions, this, children, apply, call, bind

2
  • 1
    Nossa me esclareceu muito sobre o uso do this! E não sabia que dava para inserir propriedades dessa forma, muito legal. A única dúvida que me surgiu é se o loop no final é uma boa prática, porque eu estava tentando usar objetos justamente para evitar de criar variáveis globais ou deixar addeventListeners "soltos". Bom muito obrigado pela resposta! Commented 5/05/2019 às 23:44
  • O for no fim pode ser melhorado, uma melhoria seria retirar a criação de função de dentro dele addEventListener('keyup', function(){ ... });, criar a função fora do for por exemplo function eventoKeyUp(){ ... } ou elTimerInicial.eventoKeyUp=function(){ ... }, e mudar para addEventListener('keyup', eventoKeyUp) ou addEventListener('keyup', elTimerInicial.eventoKeyUp) Commented 6/05/2019 às 0:55

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 .