Resumo : neste tutorial, você aprenderá sobre o Function
tipo 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 Function
tipo. 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: length
e prototype
.
- A
length
propriedade determina o número de argumentos nomeados especificados na declaração da função. - A
prototype
propriedade 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 x
e y
. Portanto, a length
propriedade retorna dois.
novo.target
Normalmente, você chama uma função normalmente assim:
let result = add(10,20);
console.log(result); // 30
Linguagem de código: JavaScript ( javascript )
Além disso, você pode chamar uma função com new
palavra-chave como construtor:
let obj = new add(10,20);
Linguagem de código: JavaScript ( javascript )
ES6 introduziu a new.target
pseudopropriedade que permite detectar se uma função ou construtor foi chamado usando o new
operador.
Se uma função for chamada normalmente, o new.target
is undefined
. No entanto, se a função for chamada usando a new
palavra-chave como construtor, ela new.target
retornará 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 new
palavra-chave como construtor, você pode gerar um erro verificando new.target
assim:
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 this
valor 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 cat
e dog
com 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 cat
objeto. Portanto, o this
objeto na say()
função faz referência ao cat
objeto.
Quarto, chame say()
a função e passe o dog
objeto:
say.apply(dog, ['What does a dog say?']);
Linguagem de código: CSS ( css )
Neste exemplo, o this
na say()
função faz referência ao dog
objeto.
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 this
valor 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 car
objeto:
let taxiing = car.start.bind(aircraft);
Linguagem de código: JavaScript ( javascript )
Nesta instrução, alteramos o this
valor dentro do start()
método do car
objeto para o aircraft
objeto. O bind()
método retorna uma nova função atribuída à taxiing
variá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/h
Linguagem de código: JavaScript ( javascript )
O seguinte usa o call()
método para chamar o start()
método no aircraft
objeto:
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 car
objeto 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
Function
tipo, que são os objetos que possuem propriedades e métodos. - Uma função tem duas propriedades importantes:
length
eprototype
. - Uma função também possui três métodos importantes:
call()
,apply()
ebind()
.