Método JavaScript apply()

Resumo : neste tutorial, você aprenderá sobre o apply()método JavaScript do Functiontipo e como usá-lo de forma eficaz.

Introdução ao apply()método JavaScript

O Function.prototype.apply()método permite chamar uma função com um determinado thisvalor e argumentos fornecidos como um array . Aqui está a sintaxe do apply()método:

fn.apply(thisArg, [args]);
Linguagem de código:  JavaScript  ( javascript )

O apply()método aceita dois argumentos:

• The thisArgé o valor this fornecido para a chamada à função fn.
• O argsargumento é uma matriz que especifica os argumentos da função fn. Desde o ES5, o argsargumento pode ser um objeto semelhante a um array ou um objeto array.

O apply()método é semelhante ao call()método, exceto que utiliza os argumentos da função como uma matriz em vez dos argumentos individuais.

pply()Exemplos de métodos JavaScript

Vejamos alguns exemplos de uso do apply()método.

1) apply()Exemplo de método JavaScript simples

Suponha que você tenha um personobjeto:

const person = {
    firstName: 'John',
    lastName: 'Doe'
}
Linguagem de código:  JavaScript  ( javascript )

…e uma função greet()com o seguinte nome:

function greet(greeting, message) {
    return `${greeting} ${this.firstName}. ${message}`;
}
Linguagem de código:  JavaScript  ( javascript )

A greet()função aceita dois parâmetros: greetinge message. Dentro da greet()função, referenciamos um objeto que possui a firstNamepropriedade.

O exemplo a seguir mostra como usar o apply()método para chamar a greet()função com o thisconjunto para o personobjeto:

let result = greet.apply(person, ['Hello', 'How are you?']);

console.log(result);
Linguagem de código:  JavaScript  ( javascript )

Saída:

Hello John. How are you?
Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, definimos o thisvalor dentro da função para o personobjeto. Os argumentos da greet()função foram passados ​​para o apply()método como um array.

O apply()método invocou a greet()função com o thisvalor definido para o personobjeto e os argumentos como um array ['Hello', 'How are you?'].

Se você usar o call()método, precisará passar os argumentos da greet()função separadamente da seguinte forma:

let result = greet.call(person, Hello', 'How are you?');
Linguagem de código:  JavaScript  ( javascript )

2) Empréstimo de função

O apply()método permite que um objeto pegue emprestado o método de outro objeto sem duplicar o código.

Suponha que você tenha o seguinte computerobjeto:

const computer = {
    name: 'MacBook',
    isOn: false,
    turnOn() {
        this.isOn = true;
        return `The ${this.name} is On`;
    },
    turnOff() {
        this.isOn = false;
        return `The ${this.name} is Off`;
    }
};
Linguagem de código:  JavaScript  ( javascript )

… e o seguinte serverobjeto:

const server = {
    name: 'Dell PowerEdge T30',
    isOn: false
};
Linguagem de código:  JavaScript  ( javascript )

O serverobjeto não possui os métodos turnOn()e turnOff().

Para executar o turnOn()método do computerobjeto no serverobjeto, você pode usar o apply()método da seguinte forma:

let result = computer.turnOn.apply(server);

console.log(result);
Linguagem de código:  JavaScript  ( javascript )

Saída:

The Dell PowerEdge T30 is On
Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o serverobjeto pega emprestado o turnOn()método do computerobjeto.

Da mesma forma, você pode chamar o turnOff()método do objeto computador no objeto servidor:

let result = computer.turnOff.apply(server);
console.log(result);Linguagem de código:  JavaScript  ( javascript )

Saída:

The Dell PowerEdge T30 is OffLinguagem de código:  JavaScript  ( javascript )

3) Usando o apply()método para anexar um array a outro

O apply()método permite anexar elementos de um array a outro:

let arr = [1, 2, 3];
let numbers = [4, 5, 6];

arr.push.apply(arr, numbers);

console.log(arr); 
Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o apply()método modifica o array original arr. Observe que o Array.prototype.concat()método também fornece o mesmo resultado, exceto que retorna o novo array em vez de modificar o array original.

Resumo

• O apply()método invoca uma função com um determinado thisvalor e argumentos fornecidos como um array.
• O apply()método é semelhante ao call()método, exceto que aceita os argumentos da função como uma matriz em vez de argumentos individuais.