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?
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?
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() {
console.log(String(this));
}
// Chama como função e exibe [object Window]
Foo();
// Chama como classe e exibe [object Object]
new Foo;
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 Web Workers 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 classe ou prototype, ele pega o escopo do Web Worker atual.
O this
também pega o escopo do Worker, mas se o this
estiver dentro de uma classe dentro do 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) {
console.log('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;
O correto deverá ser:
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;
self
é uma variável global declarada dentro do contexto dos navegadores, que referencia o chamado "objeto global". Em um ambiente de script de página web, o "objeto global" é o Window
, e em um ambiente de Web Worker, o "objeto global" é o WorkerGlobalScope
.
this
é uma palavra da linguagem que referencia "o objeto a partir do qual a função atualfoi invocada". NO ENTANTO, quando o código atual não está dentro de nenhuma função, this
referencia o "objeto global" (o mesmo do self).
function funcao() {
console.log(this)
}
obj.funcao = funcao
obj.funcao(1) // "this === obj" true
console.log(this) // this === window
console.log(this === self) // true
Veja que isto de o this
referenciar uma coisa quando dentro de uma função e outra quando não, é meio que uma "falha de projeto" do JavaScript -- não é legal this
referenciar Window
, pois isso gera confusão. Para remediar a bagunça, posteriormente criaram a variável self
, que SEMPRE referencia o objeto global.
self
não existe no contexto de um script no node.js (pois não é um padrão do javascript, mas apenas uma variável que a API dos navegadores disponibiliza). Para amenizar a bagunça, posteriormente criaram o globalThis
, este sendo realmente um padrão da linguagem JavaScript, que é reservado pra referenciar o objeto global no contexto do script, independente da engine hospedeira.
*(engines hospedeiras: O navegador, o node.js, o cliente do League of Legends, etc).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
(edit) Quando utilizar cada uma?
Se você quer referenciar ao objeto global, utilize sempre globalThis
ou window
. Evite o this
.
NO ENTANTO...
Note que globalThis
é um recurso relativamente recente do JS, então ele pode não funcionar em navegadores pré-históricos. Se você está programando pra um navegador antigo e não está usando o babel, use outro tipo de referência direta, como o window
.
Evite o this
pra referenciar o objeto global pois causa confusão.
Use o this
pra referenciar o contexto da classe do qual seu método está sendo invocado, como usual.