estigui habilitat

Les funcions són la base de la modularitat en JavaScript. Són utilitzades per reutilitzar codi, ocultar informació i abstracció. Per norma general, les funcions són utilitzades per especificar el comportament dels objectes, encara que poden definir-se funcions a l’marge dels objectes.

Les funcions en JavaScript es defineixen mitjançant la paraula reservada function, seguida del nom de la funció. La seva definició formal és la següent:

Diagrama de definició d'una funció

Diagrama de definició de el cos d'una funció

function nombre_funcion() { ...}

el nom de la funció s’utilitza per cridar a aquesta funció quan sigui necessari . El concepte és el mateix que amb les variables, a les quals se’ls assigna un nom únic per poder utilitzar-les dins de el codi. Després de el nom de la funció, s’inclouen dos parèntesis on indicarem els paràmetres de la funció. Finalment, els símbols { i } s’utilitzen per tancar totes les instruccions que pertanyen a la funció.

7.1 funcions objecte

Les funcions en Javascript són objectes. Les funcions són objectes enllaçats amb Function.prototype (que al seu torn enllaça amb Object.prototype), que inclouen dues propietats ocultes: el context de la funció i el codi que implementa el seu comportament.

Tota funció en JavaScript és creada amb una propietat protoype. El seu valor és un objecte amb una propietat constructor el valor és la pròpia funció. Això és diferent a l’enllaç ocult a Function.prototype. Veurem el significat d’aquesta complicada construcció més endavant. Com les funcions són objectes, poden ser utilitzades com qualsevol altre valor. Poden ser emmagatzemades en variables, objectes o arrays. Poden ser passades com a arguments a altres funcions, i poden ser retornades per altres funcions. A més, a l’ésser objectes, també poden tenir mètodes. El que les fa realment especials és que poden ser cridades.

7.2 Arguments i valors de retorn

Les funcions més senzilles no necessiten cap informació per produir els seus resultats, encara que el normal és que necessitin de dades per produir resultats. Les variables que necessiten les funcions s’anomenen arguments. Abans que pugui utilitzar-los, la funció d’indicar quants arguments necessita i quin és el nom de cada argument. A més, a l’cridar a la funció, s’han d’incloure els valors (o expressions) que se li van a passar a la funció. Els arguments s’indiquen dins dels parèntesis que van darrere del nom de la funció i se separen amb una coma (,).

var s = function suma_y_muestra(n1, n2) { ... }

A continuació, per utilitzar el valor dels arguments dins de la funció, s’ha d’emprar el mateix nom amb el qual es van definir els arguments:

var s = function suma_y_muestra(n1, n2) { var resultado = n1 + n2; console.log("El resultado es " + resultado);}

Dins de la funció, el valor de la variable n1 serà igual a el primer valor que se li passi a la funció i el valor de la variable n2 serà igual a el segon valor que se li passa.

Les funcions no solament pot rebre variables i dades, sinó que també poden tornar els valors que han calculat. Per retornar valors dins d’una funció, s’utilitza la paraula reservada return. Tot i que les funcions poden retornar valors de qualsevol tipus, només poden retornar un valor cada vegada que s’executen.

var c = function (precio) { var impuestos = 1.21; var gastosEnvio = 10; var precioTotal = ( precio * impuestos ) + gastosEnvio; return precioTotal;}

Perquè la funció retorni un valor, només cal escriure la paraula reservada return juntament amb el nom de la variable que es vol tornar. En l’exemple anterior, l’execució de la funció arriba a la instrucció return precioTotal; i en aquest moment, torna el valor que contingui la variable precioTotal .

Com que la funció retorna un valor, en el punt en el qual es realitza la trucada, s’ha d’indicar el nom d’una variable en què es guarda el valor retornat:

var precioTotal = c(23.34);

Si no s’indica el nom de cap variable, JavaScript no mostra cap error i el valor retornat per la funció simplement es perd i per tant, no s’utilitzarà en la resta de el programa. Si la funció arriba a una instrucció de tipus return, es torna el valor indicat i finalitza l’execució de la funció. Per tant, totes les instruccions que s’inclouen després d’un return s’ignoren i per aquest motiu la instrucció return sol ser l’última de la majoria de funcions.

7.3 Trucades

Trucar a una funció suspèn l’execució de la funció actual, passant el control i els paràmetres a la nova funció.A més dels arguments declarats, totes les funcions reben dos arguments extra: this i arguments. El paràmetre this és molt important la programació orientada a objectes, i el seu valor ve determinat pel patró de trucada utilitzat. Hi ha quatre patrons de trucada en JavaScript: el patró de trucada method, el patró de trucada function, el patró de trucada constructor i el patró de trucada apply.

7.3.1 Arguments

el paràmetre extra disponible a les funcions és l’array arguments. Dóna a la funció accés a totes els arguments passats a la trucada, inclosos els arguments extra que no coincideixen amb els paràmetres definits en la funció. Això fa possible escriure funcions que prenen un nombre indefinit de paràmetres.

var sum = function() { var i, sum = 0; for (i = 0; i < arguments.length; i += 1) { sum += arguments; } return sum;}; document.writeln(sum(4, 8, 15, 16, 23, 42)); // 108

A causa d’un problema de disseny, arguments no és realment una matriu, sinó un objecte que es comporta com a vector. Disposa de la propietat length, però no inclou la resta de mètodes dels arrays.

7.4 Funcions anònimes autoexecutables

Un patró comú en JavaScript són les funcions anònimes autoexecutables. Aquest patró consisteix a crear una expressió de funció i immediatament executar-la.

(function(){ var foo = 'Hola mundo';})(); console.log(foo); // indefinido (undefined)

7.5 Funcions com a arguments

en JavaScript, les funcions poden ser assignades a variables o passades a altres funcions com arguments. En frameworks com jQuery per exemple, passar funcions com a arguments és una pràctica molt comuna.

var myFn = function(fn) { var result = fn(); console.log(result);}; myFn(function() { return 'hola mundo'; }); // muestra en la consola 'hola mundo' var myOtherFn = function() { return 'hola mundo';}; myFn(myOtherFn); // muestra en la consola 'hola mundo'

7.6 Abast

l’abast en un llenguatge de programació controla la visibilitat i el cicle de vida de les variables i els paràmetres. Per exemple:

var foo = function () { var a = 3, b = 5; var bar = function () { var b = 7, c = 11; // En este punto, a es 3, b es 7, y c es 11 a += b + c; // En este punto, a es 21, b es 7, y c es 11 }; // En este punto, a es 3, b es 5, y c es undefined bar(); // En este punto, a es 21, b es 5};

La majoria dels llenguatges, amb sintaxi de C, tenen un abast de bloc. Totes les variables definides en un bloc (sentències definides entre claus) no són visibles fora d’aquest bloc. Desafortunadament, JavaScript no té aquesta visibilitat de bloc, tot i que la seva sintaxi així pugui suggerir-, i això pot ser una font de problemes. JavaScript té un abast de funció: això vol dir que els paràmetres i variables definits dins d’una funció no són visibles fora d’aquesta funció, i que una variable definida en qualsevol lloc de la funció, és visible des de qualsevol lloc dins d’aquesta funció.

7.7 funcions de tancament

la bona notícia sobre la visibilitat, és que les funcions internes poden tenir accés als paràmetres i variables de les funcions on han estat definides (amb l’excepció de this i arguments). Abans hem definit un objecte que tenia una propie value i un mètode increment. Suposem que volem protegir aquest valor canvis no autoritzats. En lloc d’inicialitzar aquest objecte com un literal, anem a inicialitzar cridant a una funció que retorni un objecte literal. Anem a definir una variable value i un objecte de retorn amb els mètodes increment i getValue :

var myObject = (function () { var value = 0; return { increment: function (inc) { value += typeof inc === 'number' ? inc : 1; }, getValue: function () { return value; } };}());

En aquest cas, tant el mètode increment com getValue tenen accés a la variable value, però a causa al seu abast de funció, la resta de l’aplicació no té accés al seu valor.

7.8 callbacks

Les funcions poden facilitar el treball amb mètodes asíncrons. Suposem el següent cas en el qual fem una petició a servidor:

request = prepare_the_request();response = send_request_synchronously(request);display(response);

El problema aquí, és que esperem la resposta de servidor , de manera que bloquegem l’execució de l’script fins a obtenir una resposta. Una estratègia molt millor és fer una trucada asíncrona, proporcionant una funció de resposta (callback) que s’executarà quan la resposta estigui disponible:

request = prepare_the_request();send_request_asynchronously(request, function (response) { display(response);});

7.9 Execucions en cascada

Alguns mètodes no retornen cap tipus de dada, ja simplement poden modificar l’estat d’algun tipus de dada. Si fem que aquests mètodes tornin this en lloc de undefined, podem encadenar l’execució d’aquests mètodes en cascada. Les funcions en cascada poden permetre’ns escriure sentències d’aquest tipus:

getElement('myBoxDiv') .move(350, 150) .width(100) .height(100) .color('red') .border('10px outset') .padding('4px') .appendText("Please stand by") .on('mousedown', function (m) { this.startDrag(m, this.getNinth(m)); }) .on('mousemove', 'drag') .on('mouseup', 'stopDrag') .tip('This box is resizeable');

Exercici 6

Veure enunciat

Exercici 7

Veure enunciat

Exercici 8

Veure enunciat

Exercici 9

Veure enunciat

Exercici 10

Veure enunciat

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *