Guida a Javascript: Call e Apply

Nella puntata precedente abbiamo visto l’estensione di un oggetto attraverso il metodo prototype. Non è però il solo, ci possono venire in aiuto anche i metodi CALL e APPLY.

Metodo Call

Riprendiamo l’esempio del post relativo al prototype che ci viene meglio per comprendere. Avevamo definito una funzione Cliente dove poter istanziare poi separatamente il nostro cliente con i dati noti. A questo punto facciamo un po’ più complessa la questione aggiungendo più dati. Nel caso di Call possiamo infatti iniettare dentro la nostra funzione Clienti delle proprietà esterne e non previste inizialmente. Vediamo il codice:

// definisco una funzione cliente
function Cliente(nome, cognome, company){
	this.nome = nome;
	this.cognome = cognome;
	this.company = company;
	// verfica che le proprietà di una funzione esterna siano ereditate
	console.log(this.entrate);
	// compongo il return della funzione
	return nome + ' ' + cognome
	+ ' della ' + company
	+ ' ha entrate per ' + this.entrate
	+ ' e uscite per ' + this.uscite
	+ ' definite in milioni di euro';
}

// creo i dati di fatturato del mio cliente
var caniStracci2018 = {entrate: '3', uscite: '1'}

// definisco l'oggetto Cliente con i valori della cani stracci
var caniStracci = new Cliente('Giovanni', 'Rossi', 'Cani Stracci srl');

// definisco la mia call
var fatturatoCaniStracci = Cliente.call(
	caniStracci2018, 
	caniStracci.nome,
	caniStracci.cognome, 
	caniStracci.company
);

document.write(fatturatoCaniStracci);

In questo caso abbiamo strutturato un po’ meglio la funzione Cliente, visto che il return offrirà direttamente l’output.  Quindi abbiamo definito una variabile che in realtà è un array con le entrate ed uscite per un dato anno, quindi definito l’oggetto relativo al nostro cliente. Quindi alla fine uniamo tutto utilizzando il metodo Call che ci permette di iniettare dentro la funzione Cliente i dati relativi alla cani stracci, comprese due proprietà non native come entrate ed uscite.

Se notate all’interno di Cliente ho messo una console.log proprio ad evidenziare che una volta attivato il codice, vedremo che this.entrate non definito come proprietà sia poi correttamente soddisfatto.

metodo Apply

Il codice precedente con poche modifiche è utilizzabile anche dal metodo Apply. La differenza con Call è che Apply necessita come argomento un Array di dati, anziché i dati separati. vediamo il codice:

// definisco una funzione cliente
function Cliente(nome, cognome, company){
	this.nome = nome;
	this.cognome = cognome;
	this.company = company;
	// verfica che le proprietà di una funzione esterna siano ereditate
	console.log(this.entrate);
	// compongo il return della funzione
	return nome + ' ' + cognome
	+ ' della ' + company
	+ ' ha entrate per ' + this.entrate
	+ ' e uscite per ' + this.uscite
	+ ' definite in milioni di euro';
}

// creo i dati di fatturato del mio cliente
var caniStracci2018 = {entrate: '3', uscite: '1'}

// definisco l'oggetto Cliente con i valori della cani stracci
var caniStracci = new Cliente('Giovanni', 'Rossi', 'Cani Stracci srl');

// definisco la mia apply
var fatturatoCaniStracci = Cliente.apply(
	caniStracci2018, 
	[
		caniStracci.nome, 
		caniStracci.cognome, 
		caniStracci.company
	]
);

document.write(fatturatoCaniStracci);

Come possiamo vedere la var fatturaCaniStracci ha di fatto il primo argomento che è un array a sua volta, ma l’argomento secondario è unificato in un array. Chiaramente nell’esempio Call risulta dal punto di vista di lettura del codice migliore. Ma nel caso abbiamo già degli Array pronti come sorgente, Apply è la soluzione ideale per estendere un oggetto.