8.1 Método call
Os métodos call, bind e apply em JavaScript desempenham um papel crucial na gestão
do contexto de execução das funções, permitindo definir o valor de this ao chamar funções. Esses métodos são
especialmente úteis ao trabalhar com objetos e programação funcional, fornecendo ferramentas poderosas para gerenciar
o código de forma flexível. Bora dar uma olhada em cada um deles mais detalhadamente e explorar alguns exemplos de uso.
O método call invoca uma função com um valor de this especificado e argumentos passados em formato separado por vírgulas.
Isso nos possibilita especificar explicitamente o contexto no qual a função deve ser executada.
Sintaxe:
func.call(thisArg, arg1, arg2 ...);
Exemplo:
Neste exemplo, a função greet é chamada com o contexto de person, permitindo que ela utilize
a propriedade name do objeto person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 Método apply
O método apply é semelhante ao call, mas passa os argumentos como um array. Isso é conveniente quando temos
um array de argumentos que queremos passar para uma função.
Sintaxe:
func.apply(thisArg, [argsArray]);
Exemplo:
Este exemplo é semelhante ao anterior, mas os argumentos são passados como um array.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 Método bind
O método bind cria uma nova função que, ao ser chamada, define um valor específico para this.
Os argumentos passados para bind são fixados na nova função. Isso permite criar funções com um contexto fixo.
Sintaxe:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
Exemplo:
Neste exemplo, é criada uma nova função boundGreet, que sempre será executada no contexto do objeto person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 Análise detalhada do uso dos métodos
1. Uso de call para herança de métodos:
O método call é frequentemente usado para herdar métodos de um objeto para outro. Isso permite
emprestar métodos e propriedades sem a necessidade de herança explícita.
Neste exemplo, o construtor Product é chamado no contexto do objeto Food, permitindo
herdar as propriedades name e price.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. Uso de apply para passar um array de argumentos:
O método apply é útil quando queremos passar um array de argumentos para uma função que aceita parâmetros separados.
Neste caso, o array numbers é passado para a função sum como argumentos separados.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. Uso de bind para criar função com contexto fixo:
O método bind permite criar funções com um contexto fixo, o que é especialmente útil ao lidar com eventos e callbacks.
Aqui, a função getX é vinculada ao objeto module com bind, permitindo obter corretamente o valor de x ao chamar a função.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 Exemplos da vida real
Exemplo de uso de call para empréstimo de método de array:
Neste exemplo, o método forEach do array é usado para o objeto arguments com call.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
Exemplo de uso de apply para unir arrays:
Aqui, o método push é usado para unir dois arrays com apply.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
Exemplo de uso de bind para criar função parcial:
A função double é criada com o primeiro argumento fixado em 2 com bind.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION