• (71) 0000-0000
  • (71) 0000-0000

Javascript: entendendo o this

O operador this é um dos maiores responsáveis por erros e pegadinhas em um código JavaScript. Entender o seu mecanismo de funcionamento e criação é um grande passo para tirar maior proveito da linguagem mp4 player musik download kostenlos.

Contexto de execução

Toda função JavaScript, ao ser executada, gera uma associação do objeto criado pelo interpretador através da palavra reservada this scratch spiele herunterladen. A especificação da ECMAScript chama isso de ThisBinding, um evento que acontece toda vez que um código JavaScript é executado e um novo contexto de execução é estabelecido einkommensteuererklärung formulare herunterladen. O valor do this é constante e ele existe enquanto este contexto de execução existir.

No browser, o this “padrão” referencia o objeto global window radio hörspiele kostenlos downloaden. Toda função declarada no escopo global também vai possuir o objeto window como valor do this (no strict mode vai ser undefined) music paradise pro kostenlos downloaden.

function myFunc () {
     console.log(this);   
}

var myFunc2 = function () {
     console.log(this);   
}

myFunc(); // Window (...)
myFunc2();  // Window (...)

Objetos

Quando uma função representa um método de um objeto, o valor do this passa a ser o objeto referenciado divx filme kostenlos deutsch. Por exemplo:

var myObj = {
    init: function () {
        console.log(this);   
    }
};

myObj.init(); // Object {init: function}

O mesmo acontece quando um objeto é criado utilizando uma função construtora, só que nesse caso o this representa o objeto instanciado automatically download whatsapp uit.

function MyObj () {
    console.log(this);   
}

var obj = new MyObj(); // MyObj {}

Callbacks & Eventos

Um dos erros mais comuns acontece quando utilizamos a palavra reservada this dentro de um callback e confundimos seu valor Download video from page online. O this dentro do callback vai guardar o valor do objeto pai da função callback e não da função que recebe o callback ganze serien staffeln downloaden.

var myObj = {
    init: function (callback) {
        callback(); 
    }
};

myObj.init(function () {
    console.log(this); // Window (...)  
});

Para esses casos especiais, podemos definir o valor do this utilizando os métodos call e apply (falo mais sobre eles logo, logo) lieder auf iphoneen.

Outro ponto que merece atenção é o uso do this na hora de anexar eventos a um elemento. Nesse caso, o valor da palavra reservada representa o elemento e não a função.

var myObj = {
    init: function () {
        this.link = document.querySelector('a');
        this.link.onclick = function (e) {
            console.log(this);   
        };
    }
};

myObj.init();
// clique no link: <a href="#">link</a>

Aqui a solução é armazenar o estado do objeto em uma variável, normalmente chamada de that ou self e utilizá-la na função do evento.

var myObj = {
    init: function () {
        var that = this;
        this.link = document.querySelector('a');
        this.link.onclick = function (e) {
            console.log(that);   
        };
    }
};

myObj.init();
// clique no link: Object {init: function, link: a}

call & apply

Os métodos call e apply permitem que seja definido um valor para o this de uma função. Vejamos o nosso exemplo de callback, agora utilizando uma chamada com o método call:

var myObj = {
    init: function (callback) {
        callback.call(this); 
    }
};

myObj.init(function () {
    console.log(this); // Object {init: function}
});

Notem que o valor retornado pelo log do console agora foi o próprio objeto ao invés do objeto global window. Isto porque executamos o callback através do método call, definindo o valor do this no contexto de execução como sendo o this do objeto.

Sobre os métodos call e apply, a principal diferença entre eles é que um permite a passagem de argumentos utilizando um array enquanto o outro aceita os argumentos como strings:

fun.apply(thisArg[, argsArray])

fun.call(thisArg[, arg1[, arg2[, ...]]])

Referências

Fonte: Tableless

Posts Relacionados