Noções básicas de this; call/apply/bind (introdução)
Entenda a que this se refere em funções e métodos; aprenda sobre o this das funções de seta e experimente call/apply/bind.
Noções básicas de this; call/apply/bind (introdução) é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.
Introdução ao this
Objetivo: veja a que this se refere em diferentes chamadas, aprenda sobre o this das funções de seta e experimente call/apply/bind em pequenos passos.
- Chamada de método e chamada simples
- this em funções de seta
- call/apply/bind
this em chamadas de método
Em uma chamada de método, this aponta para o objeto que aparece antes do ponto.
// Method call: this is the object before the dot
const user = {
name: "Ayla",
say() {
console.log("I am", this.name);
}
};
user.say();
this em chamadas simples
Em uma chamada simples, this é undefined no modo estrito. Nos navegadores sem modo estrito, ele pode ser window.
// Plain function call: this is undefined in strict mode
function show() {
console.log("this is", this);
}
show();
this léxico das funções de seta
Uma função de seta usa o this externo (léxico). Isso é ótimo para funções de retorno de chamada dentro de métodos.
// Arrow functions do not have their own this
// They capture this from the surrounding scope
const team = {
title: "Blue",
start() {
const report = () => {
console.log("Team:", this.title);
};
report();
}
};
team.start();
call versus apply
call e apply executam a função imediatamente com o this fornecido.
// call/apply invoke the function with a chosen this
function intro(lang1, lang2) {
console.log("User:", this.name, "knows", lang1, "and", lang2);
}
const person = { name: "Mina" };
// call passes arguments normally
intro.call(person, "JS", "TS");
// apply passes arguments as an array
intro.apply(person, ["JS", "TS"]);
Noções básicas de bind
bind retorna uma nova função que se lembra do this escolhido para chamadas futuras.
// bind creates a new function with this fixed
function sayHi() {
console.log("Hi from", this.name);
}
const dev = { name: "Lena" };
const sayHiFromLena = sayHi.bind(dev);
sayHiFromLena();
sayHiFromLena();
Quiz sobre bind e call/apply
Verificação rápida: fixando this.
Recapitulação
Recapitulação: chamadas de método definem this como o objeto, chamadas simples têm this como undefined no modo estrito, funções de seta capturam o this externo, call/apply o definem para uma chamada e bind o fixa para chamadas posteriores.
Perguntas Frequentes
A aula “Noções básicas de this; call/apply/bind (introdução)” é grátis?
Sim — o texto completo de “Noções básicas de this; call/apply/bind (introdução)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.
O que vou aprender em “Noções básicas de this; call/apply/bind (introdução)”?
Entenda a que this se refere em funções e métodos; aprenda sobre o this das funções de seta e experimente call/apply/bind. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Noções básicas de this; call/apply/bind (introdução)”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Declarações vs expressões e noções básicas de funções de seta
- Parâmetros, valores padrão, rest e retornos
- Noções básicas de this; call/apply/bind (introdução)