Gostaria de entender e ajudar a comunidade com uma informação.
Qual a diferença do uso de this
e self
no JavaScript?
Basicamente: O qué? Por quê utilizar? Como utilizar?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeGostaria de entender e ajudar a comunidade com uma informação.
Qual a diferença do uso de this
e self
no JavaScript?
Basicamente: O qué? Por quê utilizar? Como utilizar?
O this
pode ser qualquer coisa, depende de onde foi aplicado, ele é usado junto com classes no JavaScript e prototype
para se referir ao objeto, se não for um objeto então podem ocorrer duas situações:
window
global
Por exemplo:
function Foo() {
alert(this);
}
//Chama como função
Foo(); //Retorna [object Window]
//Chama como classe
new Foo; //[object Object]
O self
é equivalente ao window.self
e é usado somente em navegadores, no caso com self
você pega a janela/aba atual, ou frame/iframe atual e pode comparar com parent
(mesmo que window.parent
), o parent
neste caso pega o escopo da página que é pai da atual se estiver em um <iframe>
por exemplo, caso contrário parent
e self
terão o mesmo valor.
O valores que você pode usar para comparar a janela são:
window.self
retorna o objeto da janela atual
window.parent
retorna o objeto da janela pai se houver, caso contrário o valor será igual ao de self
window.top
retorna o objeto da janela acima de todas, por exemplo se uma página tiver um iframe chamado #frame1
e este iframe tiver outro iframe chamado #frame2
, então em #frame2
usar window.top
ele irá retornar o objeto página que embarcou o #frame1
Um exemplo interessante que você pode aplicar o self
seria checar se um site externo esta embarcando alguma página sua, então fazer algo como:
if (window.top !== window.self) {
window.top.location.href = window.location.href;
}
Se a aba ou janela não for a mesma que self
então é porque a sua página esta embarcada em outra página, podendo ser no seu site ou não, então o site que embarcou uma página sua será redirecionada para o seu site/página, claro que é apenas um código de exemplo, existem outras maneiras de bloquear o embarcar nos navegadores modernos, como por exemplo controlando X-Frame-Options
ou Content-Security-Policy
.
Um detalhe importante é que em WebWorkers também temos o self
, mas ele não acessa a janela, ele é usado semelhante ao this
, mas ao invés de pegar o escopo de uma de uma classe ou prototype, ele pega o escopo do WebWorker atual.
O this
também pega o escopo do Worker, mas se o this
estiver dentro de uma classe dentro Worker ele não vai pegar o Worker e sim o "objeto" da classe, por exemplo:
Na página:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var worker = new Worker('webworker.js');
worker.addEventListener('message', function(e) {
alert('Worker respondeu: ' + e.data);
}, false);
function sayHello()
{
worker.postMessage('oi, tudo bem?'); // Envia mensagem ao werbworker.js
}
function sayTchau()
{
worker.postMessage('tchau'); // Envia mensagem ao werbworker.js
}
</script>
<button onclick="sayHello();">Diga Oi!</button>
<button onclick="sayTchau();">Diga Tchau!</button>
</body>
</html>
Dentro do webworker.js
this.addEventListener('message', function(e) {
switch (e.data) {
case 'oi, tudo bem?':
this.postMessage('Tudo sim :)'); // Envia resposta para a página de "saudação"
break;
case 'tchau':
this.postMessage('Tchau, até mais'); // Envia resposta para a página de "despedida"
break;
}
}, false);
Mas se fizer isto não vai funcionar, pois this
não será mais o escopo do Worker:
function Classe()
{
this.addEventListener('message', function(e) {
switch (e.data) {
case 'oi, tudo bem?':
this.postMessage('Tudo sim :)'); // Envia resposta para a página de "saudação"
break;
case 'tchau':
this.postMessage('Tchau, até mais'); // Envia resposta para a página de "despedida"
break;
}
}, false);
}
new Classe;
Então seria melhor assim:
function Classe()
{
self.addEventListener('message', function(e) {
switch (e.data) {
case 'oi, tudo bem?':
self.postMessage('Tudo sim :)'); // Envia resposta para a página de "saudação"
break;
case 'tchau':
self.postMessage('Tchau, até mais'); // Envia resposta para a página de "despedida"
break;
}
}, false);
}
new Classe;
THIS é usado pra acessar o objeto que chama uma funcão, já do SELF é usado pra acessar o webworker Tem essa play list aqui fala tudo sobre o THIS, todos seus usos é bem explicado: 👉https://www.youtube.com/watch?v=zDmNNvLCKHo&list=PLbHwN8DV27wahfNXgS8BJbnirT_IVALFM