Tipo de função JavaScript

Resumo : neste tutorial, você aprenderá sobre o Functiontipo JavaScript, que é o tipo de todas as funções em JavaScript.

Introdução ao tipo de função JavaScript

Em JavaScript, todas as funções são objetos . Eles são as instâncias do Functiontipo. Como as funções são objetos, elas possuem propriedades e métodos como outros objetos.

Propriedades de funções

Cada função tem duas propriedades importantes: lengthe prototype.

• A lengthpropriedade determina o número de argumentos nomeados especificados na declaração da função.
• A prototypepropriedade faz referência ao objeto de função real.

Veja o exemplo a seguir:

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

console.log(add.length); // 2
console.log(add.prototype); // Object{}Linguagem de código:  JavaScript  ( javascript )

A add()função aceita dois argumentos xe y. Portanto, a lengthpropriedade retorna dois.

novo.target

Normalmente, você chama uma função normalmente assim:

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

Além disso, você pode chamar uma função com newpalavra-chave como construtor:

let obj = new add(10,20);Linguagem de código:  JavaScript  ( javascript )

ES6 introduziu a new.targetpseudopropriedade que permite detectar se uma função ou construtor foi chamado usando o newoperador.

Se uma função for chamada normalmente, o new.targetis undefined. No entanto, se a função for chamada usando a newpalavra-chave como construtor, ela new.targetretornará uma referência ao construtor.

Por exemplo:

function add(x, y) {
  console.log(new.target);
  return x + y;
}

let result = add(10, 20);
let obj = new add(10, 20);
Linguagem de código:  JavaScript  ( javascript )

Saída:

undefined
[Function: add]Linguagem de código:  JavaScript  ( javascript )

Usando o new.target, você pode controlar como uma função será chamada.

Por exemplo, para evitar que a add()função seja chamada com a newpalavra-chave como construtor, você pode gerar um erro verificando new.targetassim:

function add(x, y) {
  if (new.target) {
    throw 'The add function cannot be called as a constructor';
  }
  return x + y;
}

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

Métodos de função: aplicar, chamar e vincular

Um objeto de função possui três métodos importantes apply(): call()e bind().

Os apply()e call()métodos

Os métodos apply()e call()chamam uma função com um determinado thisvalor e argumentos.

A diferença entre apply()e call()é que você precisa passar os argumentos para o apply()método como um objeto semelhante a um array, enquanto passa os argumentos para a call()função individualmente. Por exemplo:

let cat = { type: 'Cat', sound: 'Meow' };
let dog = { type: 'Dog', sound: 'Woof' };

const say = function (message) {
  console.log(message);
  console.log(this.type + ' says ' + this.sound);
};

say.apply(cat, ['What does a cat say?']);
say.apply(dog, ['What does a dog say?']);Linguagem de código:  JavaScript  ( javascript )

Saída:

What does a cat sound?
Cat says Meow
What does a dog sound?
Dog says Woof

Neste exemplo:

Primeiro, declare dois objetos cate dogcom duas propriedades:

let cat = { type: 'Cat', sound: 'Meow' };
let dog = { type: 'Dog', sound: 'Woof' };Linguagem de código:  JavaScript  ( javascript )

Segundo, defina a say()função que aceita um argumento:

const say = function (message) {
  console.log(message);
  console.log(this.type + ' says ' + this.sound);
};Linguagem de código:  JavaScript  ( javascript )

Terceiro, chame a say()função através do apply()método:

say.apply(cat, ['What does a cat say?']);Linguagem de código:  CSS  ( css )

Neste exemplo, o primeiro argumento do   apply()método é o catobjeto. Portanto, o thisobjeto na say()função faz referência ao catobjeto.

Quarto, chame say()a função e passe o dogobjeto:

say.apply(dog, ['What does a dog say?']);Linguagem de código:  CSS  ( css )

Neste exemplo, o thisna say()função faz referência ao dogobjeto.

O call()método é semelhante ao apply()método, exceto pela maneira como você passa os argumentos para a função:

say.call(cat, 'What does a cat say?');
say.call(dog, 'What does a dog say?');Linguagem de código:  JavaScript  ( javascript )

O bind()método

O bind()método cria uma nova instância de função cujo thisvalor está vinculado ao objeto que você fornece. Por exemplo:

Primeiro, defina um objeto chamado car:

let car = {
    speed: 5,
    start: function() {
        console.log('Start with ' + this.speed + ' km/h');
    }
};
Linguagem de código:  JavaScript  ( javascript )

Em seguida, defina outro objeto chamado aircraft:

let aircraft = {
    speed: 10,
    fly: function() {
        console.log('Flying');
    }
};Linguagem de código:  JavaScript  ( javascript )

A aeronave não tem start()método. Para iniciar uma aeronave, você pode usar o bind()método do start()método do carobjeto:

let taxiing = car.start.bind(aircraft);Linguagem de código:  JavaScript  ( javascript )

Nesta instrução, alteramos o thisvalor dentro do start()método do carobjeto para o  aircraftobjeto. O bind()método retorna uma nova função atribuída à taxiingvariável.

Agora você pode chamar o start()método através da taxiing variável:

taxiing();

Irá mostrar a seguinte mensagem:

Start with 10 km/hLinguagem de código:  JavaScript  ( javascript )

O seguinte usa o call()método para chamar o start()método no aircraftobjeto:

car.start.call(aircraft);Linguagem de código:  CSS  ( css )

Como você pode ver, o bind()método cria uma nova função que você pode executar mais tarde enquanto o call()método executa a função imediatamente. Esta é a principal diferença entre os métodos bind()e call().

Tecnicamente, o objeto aeronave empresta o start()método do carobjeto por meio do método bind(), call()ou apply().

Por esse motivo, os bind()métodos call(), e apply()também são conhecidos como funções de empréstimo.

Resumo

• Todas as funções são instâncias do Functiontipo, que são os objetos que possuem propriedades e métodos.
• Uma função tem duas propriedades importantes: lengthe prototype.
• Uma função também possui três métodos importantes: call(), apply()e bind().