18

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?

1

2 Respostas 2

22
+50

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:

  • Em navegadores this assume o valor de window
  • No Node.js o this assume o valor de 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.

Web Worker

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;
2
  • 1
    Guilherme Nascimento. A inclusão do exemplo em WebWorker foi top. Obrigado. Commented 3/05/2017 às 0:33
  • @BrunoHeringer atualizei a resposta ;)
    – Syzoth
    Commented 3/05/2017 às 1:31
4

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.

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 .