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

Made with Slides.com

js_functions

  • 186

More from Alex Rios