Noções básicas sobre chamar, aplicar e vincular em JavaScript com exemplos simples

Ao trabalhar com JavaScript, você pode encontrar três métodos poderosos: chamar, aplicar e vincular. Esses métodos são utilizados para controlar o valor de this nas funções, facilitando o trabalho com objetos. Vamos analisar cada método com exemplos simples para entender como eles funcionam.

1. método de chamada

O método call permite invocar uma função com um valor this específico e passar argumentos um por um.

const person = {
  name: 'Alice',
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Bob' };

person.greet.call(anotherPerson, 'Hello');
// Output: "Hello, my name is Bob"

Neste exemplo, call altera o valor this de person para anotherPerson, então a função greet imprime "Olá, meu nome é Bob".

2. aplicar método

O método apply é semelhante ao call, mas recebe argumentos como um array em vez de um por um.

const person = {
  name: 'Alice',
  greet: function(greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`);
  }
};

const anotherPerson = { name: 'Charlie' };

person.greet.apply(anotherPerson, ['Hi', '!']);
// Output: "Hi, my name is Charlie!"

Aqui, apply também altera este valor para anotherPerson e permite que você passe vários argumentos como um array.

3. Método de ligação

O método bind não chama a função imediatamente. Em vez disso, ele retorna uma nova função com um valor this vinculado que você pode chamar mais tarde.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hi, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Diana' };

const greetDiana = person.greet.bind(anotherPerson);

greetDiana();
// Output: "Hi, my name is Diana"

Neste exemplo, bind cria uma nova função greetDiana com esta vinculada a anotherPerson. Quando você chama greetDiana, ele imprime "Olá, meu nome é Diana".

Resumo

• call: invoca imediatamente a função com um valor this específico e argumentos passados ​​um por um.
• apply: invoca imediatamente a função com um valor this específico e argumentos passados ​​como um array.
• bind: Retorna uma nova função com um valor this específico, que você pode chamar mais tarde.

Esses métodos são úteis quando você precisa emprestar métodos de um objeto para usar com outro ou quando deseja mais controle sobre o valor this em suas funções.