JavaScript
Aula 2 - Funções
Alex Rios
@alextrending
alex.rios1337@gmail.com
var a = 1;
var b = 2;
//soma
x = a + b;
Comentários?!? :´(
Um bom motivo para usar funções é para evitar o uso de comentários.
Refatorando :)
var a = 1;
var b = 2;
x = soma(a, b);
function soma(a, b) {
return a + b;
}
Boas Notícias!
Nessa aula iremos falar da parte mais
interessante de JS
FUnções
each: function( obj, callback, args ) {
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj );
if ( args ) {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
} else {
for ( i in obj ) {
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}
return obj;
}
Função each retirada do JQuery
Não se Assute!
Funções nada mais são do que um conjunto de
declarações/chamadas com um nome
altamente descritivo.
Usando funções garantimos...
Modularidade
Funções em JS são a principal unidade para
o controle da modularidade.
ganhamos nosso precioso tempo com...
Reutilização de código
Ou você pensou em escrever uma função de soma sempre que precisar?
INFORMATION HIDING
Ninguém mais precisa se preocupar/entender como funciona seu complexo algoritmo de soma, está tudo lá e com garantias da integridade do seu comportamento.
Composition
Um snippet vale mais que 1k palavras
soma(soma(1,3), soma(2,2));
Repita comigo
Funções são Objetos!
Funções são Objetos!
Funções são Objetos!
Prototype Linkage
Da mesma forma como seus
object literals estão ligados a Object.prototype,
Suas fucntions estão ligadas a Function.prototype.
NOta RáPIDA
Toda function que é criada tem
2 propriedades escondidas
Seu contexto (Context) e seu código (Code)
Prototype
Sua function criada tem uma propriedade
prototype.
O valor dessa propriedade é um objeto que tem como
propriedade:
contructor
valor:
a própria função
anyFunction.prototype.constructor // Mostrará o código de sua função
Se são objetos
Então podemos utilizar funções em:
Variáveis
Objetos
Arrays
Argumentos para outras funções
Retorno de outras funções
Um novo mundo de possibilidades :)
Mas perai...
Se são mesmo objetos, funções podem ter métodos?
A resposta é um sonoro SIM!
Function Literals
var soma = function (a, b) {
return a + b;
}
Anatomia
Function Literals estão divididas em 4 partes
1 - function
A primeira parte é a palavra reservada da linguagem
function soma (a, b) {
return a + b;
}
2 - Nome
O nome da função, sendo não obrigatório, o que caracterizará funções anonimas.
function soma (a, b) {
return a + b;
}
3 - Parâmetros
Devem ser envoltos por parênteses e separados por virgulas.
Diferentemente de variaveis, os parâmetros não são inicializados com 'undefined', mas com os argumentos passados no momento da invocação.
function soma (a, b) {
return a + b;
}
4 - Corpo
Conjunto de declarações e chamadas
envoltos por chaves e
são executados quando a função é invocada.
function soma (a, b) {
return a + b;
}
Inner Functions
Funções também podem ser declaradas dentro de funções.
Inner functions não tem acesso as váriaveis da função de fora.
Porém a função tem acesso aos parâmetros e variavéis da inner function.
NOTA RáPIDA
Uma function object criada por uma function literal tem um link para o contexto externo (outer context).
Isso nos leva a definição de um closure.
Invocation
Ao invocar uma função é suspenso a execução da função corrente passando o controle e argumentos para nova função
Parâmetros
Toda função recebe 2 parâmetros adicionais:
this e arguments
This
É um objeto importante no mundo orientado a objetos.
O seu valor é dado pelo seu invocation pattern.
Invocation Pattern
Existem 4 invocation patterns em JS.
A principal diferença entre eles é a forma na qual this é inicializada.
Invocation Operator
Um par de parenteses seguido de uma expressão que produz um valor.
Esses parenteses podem conter uma ou mais expressões separadas por virgulas.
Cada expressão produzirá um valor para o argumento.
Esse argumento será associado ao parâmetro da função.
values Matching
No caso do número de parâmetros ser diferente ao número de argumentos, nenhum erro irá acontecer.
Parâmetros > Argumentos
undefined será associado aos valores faltantes
.
soma(10);//na realidade ocorrerá soma(10, undefined);
Parâmetros < Argumentos
Valores adicionais serão ignorados.
soma(10,11,12,13);//na realidade ocorrerá soma(10, 11);
Invocation PAttern
Chegou a hora de conhecer os 4 padrões de invocação de funções em JS.
Animados? :)
1 - Method Invocation PAttern (MIP)
Quando uma função é armazenado em uma variavel, nós chamamos isso de método.
Quando o método é invocado, this é associado a esse objeto.
MIP EXAMPLE
var person = {
age: 0,
getOld: function (years) {
this.age += typeof years === 'number' ? years : 1;
}
};
person.getOld( );
console.age // 1
person.getOld(2);
console.age // 3
MIP
O método pode usar this para acessar o objeto e então recuperar valores ou até mesmo modificá-lo.
O binding do this ao objeto acontece durante a invocação.
Esse binding tardio fazem das funções que utilizam-se do this altamente reutilizáveis.
Métodos que pegam o contexto de seus objetos via this são chamados métodos públicos
Function Invocation PAttern
Quando uma função não é uma propriedade de um objeto então ela será invocada como uma função.
var resultado = soma(10, 10); // 20
FIP
Quando uma função é invocada com esse padrão,
this é associada ao objeto global.
Isso é um péssimo erro no design da linguagem.
FIP
O certo seria manter o valor this do contexto externo.
Com essa falha uma inner function nunca irá compartilhar o contexto externo com this, pois this estará associado ao valor errado (global object).
FIP WORKAROUND
Se o método definir a variável e associa-la ao valor de this,
a inner function terá acesso a this via essa variavel.
A convenção é chamar essa variavel de that
FIP WORKAROUND
obj.double = function () {
var that = this; // Workaround
var helper = function() {
that.value = add(that.value, that.value);
};
helper(); // Invocando helper como uma function.
}
//Invocando double como um método
obj.double();
obj.value; // 6
Constructor invocation pattern
js_functions
By Alex Rios
js_functions
- 192