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