Método de chamada JavaScript()

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

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

Em JavaScript, uma função é uma instância do Functiontipo. Por exemplo:

function add(x, y) {
  return x + y;
}

console.log(add instanceof Function); // trueLinguagem de código:  JavaScript  ( javascript )

O Function.prototypetipo possui o call()método com a seguinte sintaxe:

functionName.call(thisArg, arg1, arg2, ...);Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe, o call()método chama uma função functionNamecom os argumentos ( arg1, arg2,…) e o thisconjunto para thisArgobjeto dentro da função.

• The thisArgé o objeto ao qual o thisobjeto faz referência dentro da função functionName.
• Os arg1, arg2, .. são os argumentos da função passados ​​para o functionName.

O call()método retorna o resultado da chamada do functionName().

O exemplo a seguir define a add()função e a chama normalmente:

function add(x, y) {
  return x + y;
}

let result = add(10, 20);
console.log(result); // 30Linguagem de código:  JavaScript  ( javascript )

O seguinte chama a add()função, mas usa o call()método:

function add(x, y) {
  return x + y;
}

let result = add.call(this, 10, 20);
console.log(result); // 30Linguagem de código:  JavaScript  ( javascript )

Por padrão, o thisinterior da função é definido como o objeto global , ou seja, windownos navegadores da web e globalno Node.js.

Observe que no modo estrito, o this interior da função é definido como undefinedem vez do objeto global.

Considere o seguinte exemplo:

var greeting = 'Hi';

var messenger = {
    greeting: 'Hello'
}

function say(name) {
    console.log(this.greeting + ' ' + name);
}Linguagem de código:  JavaScript  ( javascript )

Dentro da say()função, referenciamos o greetingatravés do thisvalor. Se você apenas invocar a say()função por meio do call()método a seguir:

say.call(this,'John');Linguagem de código:  JavaScript  ( javascript )

Ele mostrará a seguinte saída para o console:

"Hi John"Linguagem de código:  JavaScript  ( javascript )

No entanto, quando você invoca o call()método do sayobjeto de função e passa o messengerobjeto como thisvalor:

say.call(messenger,'John');Linguagem de código:  JavaScript  ( javascript )

A saída será:

"Hello John"Linguagem de código:  JavaScript  ( javascript )

Neste caso, o thisvalor dentro da say()função faz referência ao messengerobjeto, não ao objeto global.

Usando o método JavaScript call() para encadear construtores para um objeto

Você pode usar o call()método para encadear construtores de um objeto. Considere o seguinte exemplo:

function Box(height, width) {
  this.height = height;
  this.width = width;
}

function Widget(height, width, color) {
  Box.call(this, height, width);
  this.color = color;
}

let widget = new Widget('red', 100, 200);

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

Saída:

Widget { height: 'red', width: 100, color: 200 }Linguagem de código:  JavaScript  ( javascript )

Neste exemplo:

• Primeiro, inicialize o Boxobjeto com duas propriedades: heighte width.
• Segundo, invoque o call()método do Boxobjeto dentro do Widgetobjeto e defina o thisvalor para o Widgetobjeto.

Usando o método JavaScript call() para empréstimo de função

O exemplo a seguir ilustra como usar o método call() para funções de empréstimo:

const car = {
  name: 'car',
  start() {
    console.log('Start the ' + this.name);
  },
  speedUp() {
    console.log('Speed up the ' + this.name);
  },
  stop() {
    console.log('Stop the ' + this.name);
  },
};

const aircraft = {
  name: 'aircraft',
  fly() {
    console.log('Fly');
  },
};

car.start.call(aircraft);
car.speedUp.call(aircraft);
aircraft.fly();Linguagem de código:  JavaScript  ( javascript )

Saída:

Start the aircraft
Speed up the aircraft
FlyLinguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, defina um objeto carro com um nome de propriedade e três métodos start, speedUpe stop:

const car = {
  name: 'car',
  start() {
    console.log('Start the ' + this.name);
  },
  speedUp() {
    console.log('Speed up the ' + this.name);
  },
  stop() {
    console.log('Stop the ' + this.name);
  },
};Linguagem de código:  JavaScript  ( javascript )

Segundo, defina o objeto aeronave com um nome de propriedade e um método:

const aircraft = {
  name: 'aircraft',
  fly() {
    console.log('Fly');
  },
};Linguagem de código:  JavaScript  ( javascript )

Terceiro, chame o método start()and speedUp()do carobjeto e o fly()método do aircraftobjeto. No entanto, passando the aircraftcomo primeiro argumento para os métodos start()and speedUp():

car.start.call(aircraft);
car.speedUp.call(aircraft);
aircraft.fly();Linguagem de código:  JavaScript  ( javascript )

Dentro dos métodos start()e , faz referência ao objeto, não ao objeto. Portanto, o retorna a string. Portanto, os métodos geram a seguinte mensagem:speedUp()thisaircraftcarthis.name'aircraf'

Start the aircraft
Speed up the aircraftLinguagem de código:  texto simples  ( texto simples )

Tecnicamente, o aircraftobjeto empresta o método start()e speedUp()do carobjeto. E o empréstimo de função refere-se a um objeto que usa um método de outro objeto.

O exemplo a seguir ilustra como o argumentsobjeto empresta o filter()método de Array.prototypeatravés da call()função:

function isOdd(number) {
  return number % 2;
}

function getOddNumbers() {
  return Array.prototype.filter.call(arguments, isOdd);
}

let results = getOddNumbers(10, 1, 3, 4, 8, 9);
console.log(results);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 1, 3, 9 ]Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, defina a isOdd()função que retorna verdadeiro se o número for ímpar:

function isOdd(number) {
  return number % 2;
}Linguagem de código:  JavaScript  ( javascript )

Segundo, defina a getOddNumbers()função que aceita qualquer número de argumentos e retorna um array que contém apenas números ímpares:

function getOddNumbers() {
  return Array.prototype.filter.call(arguments, isOdd);
}Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o argumentsobjeto pega emprestado o método filter() do Array.prototypeobjeto.

Terceiro, chame a getOddNumbers()função:

let results = getOddNumbers(10, 1, 3, 4, 8, 9);
console.log(results);Linguagem de código:  JavaScript  ( javascript )

Neste tutorial, você aprendeu sobre o call()método JavaScript e como usá-lo de forma mais eficaz.