Skip to content

The "new Function" syntax #194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jan 31, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-js/05-data-types/04-array/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ Gli array sono uno speciale tipo di oggetto, studiati per immagazzinare e gestir
- La proprietà `length` è la lunghezza dell'array, in realtà per essere precisi, contiene l'indice dell'ultimo elemento più uno. Questo valore viene aggiornato automaticamente.
- Se decrementiamo manualmente `length`, l'array viene troncato.

Possiamo utilizzare un array come deque con le seguenti operazioni:
Possiamo eseguire sugli arrays le seguenti operazioni:

- `push(...items)` aggiunge `items` in coda.
- `pop()` rimuove un elemento dalla coda e lo ritorna.
Expand Down
74 changes: 36 additions & 38 deletions 1-js/06-advanced-functions/07-new-function/article.md
Original file line number Diff line number Diff line change
@@ -1,56 +1,56 @@

# The "new Function" syntax
# La sintassi "new Function"

There's one more way to create a function. It's rarely used, but sometimes there's no alternative.
Esiste un ulteriore modo per creare una funzione. E' raramente utilizzato, ma a volte è l'unica alternativa.

## Syntax
## Sintassi

The syntax for creating a function:
La sintassi per la creazione di una funzione con questo metodo è la seguente:

```js
let func = new Function ([arg1, arg2, ...argN], functionBody);
```

The function is created with the arguments `arg1...argN` and the given `functionBody`.
La funzione viene creata con gli argomenti `arg1...argN` ed il corpo `functionBody`.

It's easier to understand by looking at an example. Here's a function with two arguments:
E' più semplice da comprendere guardando un esempio. Nel seguente abbiamo una funzione con due argomenti:

```js run
let sum = new Function('a', 'b', 'return a + b');

alert( sum(1, 2) ); // 3
```

And here there's a function without arguments, with only the function body:
In quest'altro esempio, invece, non abbiamo argomenti, c'è solo il corpo della funzione:

```js run
let sayHi = new Function('alert("Hello")');

sayHi(); // Hello
```

The major difference from other ways we've seen is that the function is created literally from a string, that is passed at run time.
La differenza dalle altre modalità di creazione delle funzioni che abbiamo visto, è che qui la funzione viene creata letteralmente da una stringa, che viene passata in fase di esecuzione.

All previous declarations required us, programmers, to write the function code in the script.
Tutte le dichiarazioni di funzione precedenti richiedevano di scrivere il codice della funzione nello script.

But `new Function` allows to turn any string into a function. For example, we can receive a new function from a server and then execute it:
Ma `new Function` ci permette di trasformare qualsiasi stringa in una funzione. Per esempio potremmo ricevere una nuova funzione da un server e quindi eseguirla:

```js
let str = ... receive the code from a server dynamically ...
let str = ... riceviamo il codice della funzione dinamicamente, da un server ...

let func = new Function(str);
func();
```

It is used in very specific cases, like when we receive code from a server, or to dynamically compile a function from a template, in complex web-applications.
Viene utilizzato in casi molto specifici, come quando riceviamo del codice da un server, o per compilare dinamicamente una funzione da un modello, in applicazioni web complesse.

## Closure
## Closure (chiusura)

Usually, a function remembers where it was born in the special property `[[Environment]]`. It references the Lexical Environment from where it's created (we covered that in the chapter <info:closure>).
Di solito, una funzione memorizza dove è nata nella proprietà speciale `[[Environment]]`. Questa fa riferimento al Lexical Environment in cui è stata creata (lo abbiamo trattato nel capitolo <info:closure>).

But when a function is created using `new Function`, its `[[Environment]]` is set to reference not the current Lexical Environment, but the global one.
Ma quando una funzione viene creata con `new Function`, il suo `[[Environment]]` non fa riferimento all'attuale Lexical Environment, ma a quello globale.

So, such function doesn't have access to outer variables, only to the global ones.
Quindi, tale funzione non ha accesso alle variabili esterne, ma solo a quelle globali.

```js run
function getFunc() {
Expand All @@ -66,7 +66,7 @@ function getFunc() {
getFunc()(); // error: value is not defined
```

Compare it with the regular behavior:
Confrontiamolo con il normale comportamento:

```js run
function getFunc() {
Expand All @@ -79,45 +79,43 @@ function getFunc() {
return func;
}

getFunc()(); // *!*"test"*/!*, from the Lexical Environment of getFunc
getFunc()(); // *!*"test"*/!*, dal Lexical Environment di getFunc
```

This special feature of `new Function` looks strange, but appears very useful in practice.
Questa caratteristica speciale di `new Function` sembra strana, ma si rivela molto utile nella pratica.

Imagine that we must create a function from a string. The code of that function is not known at the time of writing the script (that's why we don't use regular functions), but will be known in the process of execution. We may receive it from the server or from another source.
Immaginiamo di dover creare una funzione da una stringa. Il codice di questa funzione è sconosciuto nel momento in cui scriviamo lo script (per questo non usiamo i normali metodi), ma lo conosceremo durante l'esecuzione. Potremmo riceverlo dal server o da un'altra fonte.

Our new function needs to interact with the main script.
La nostra nuova funzione ha bisogno di interagire con lo script principale.

What if it could access the outer variables?
E se potesse accedere alle variabili esterne?

The problem is that before JavaScript is published to production, it's compressed using a *minifier* -- a special program that shrinks code by removing extra comments, spaces and -- what's important, renames local variables into shorter ones.
Il problema è che, prima che JavaScript venga messo in produzione, viene spesso compresso utilizzando un *minifier*, ossia un programma speciale che riduce il codice rimuovendo commenti, spazi e, cosa importante, rinominando le variabili locali utilizzando nomi più brevi.

For instance, if a function has `let userName`, minifier replaces it with `let a` (or another letter if this one is occupied), and does it everywhere. That's usually a safe thing to do, because the variable is local, nothing outside the function can access it. And inside the function, minifier replaces every mention of it. Minifiers are smart, they analyze the code structure, so they don't break anything. They're not just a dumb find-and-replace.
Ad esempio, se una funzione contiene `let userName`, il minifier lo sostituisce con `let a` (o con un'altra lettera se questa è già occupata), e lo fa ovunque. Solitamente è una procedura sicura: poiché la variabile è locale, nulla al di fuori della funzione può accedervi. Mentre all'interno della funzione il minifier sostituisce ogni sua menzione. I minifiers sono intelligenti, analizzano la struttura del codice e non rompono nulla. Non sono degli stupidi trova-e-sostituisci.

So if `new Function` had access to outer variables, it would be unable to find renamed `userName`.
Quindi se `new Function` avesse accesso alle variabili esterne, non sarebbe in grado di trovare la variabile `userName` rinominata.

**If `new Function` had access to outer variables, it would have problems with minifiers.**
**Se `new Function` avesse accesso alle variabili esterne, ci sarebbero problemi con i minifiers.**

Besides, such code would be architecturally bad and prone to errors.
Inoltre, tale codice sarebbe pessimo dal punto di vista architetturale e soggetto ad errori.

To pass something to a function, created as `new Function`, we should use its arguments.
Per passare qualcosa a una funzione, creata con `new Function`, dovremmo usare i suoi argomenti.

## Summary
## Riepilogo

The syntax:
La sintassi:

```js
let func = new Function ([arg1, arg2, ...argN], functionBody);
```
Per ragioni storiche, gli argomenti possono anche essere passati come elenco separato da virgole.

For historical reasons, arguments can also be given as a comma-separated list.

These three declarations mean the same:
Queste tre dichiarazioni hanno lo stesso significato:

```js
new Function('a', 'b', 'return a + b'); // basic syntax
new Function('a,b', 'return a + b'); // comma-separated
new Function('a , b', 'return a + b'); // comma-separated with spaces
new Function('a', 'b', 'return a + b'); // sintassi base
new Function('a,b', 'return a + b'); // elenco separato da virgola
new Function('a , b', 'return a + b'); // elenco separato da virgola e spazio
```

Functions created with `new Function`, have `[[Environment]]` referencing the global Lexical Environment, not the outer one. Hence, they cannot use outer variables. But that's actually good, because it insures us from errors. Passing parameters explicitly is a much better method architecturally and causes no problems with minifiers.
Nelle funzioni create con `new Function`, `[[Environment]]` fa riferimento al Lexical Environment globale, non a quello esterno. Quindi queste funzioni non possono utilizzare variabili esterne. In realtà ciò è un bene perché ci mette al riparo da errori. Passare i parametri in modo esplicito è un metodo migliore dal punto di vista architetturale e non causa problemi con i minifiers.
6 changes: 3 additions & 3 deletions 1-js/09-classes/01-class/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ Ci sono però delle importanti differenze.
}

alert(typeof User); // funzione
User(); // Errore: Il costruttore della classe può essere riciamato solo attraverso 'new'
User(); // Errore: Il costruttore della classe può essere richiamato solo attraverso 'new'
```

Inoltre, nella maggior parte dei motori JavaScript il costruttore comincia con "class"
Expand Down Expand Up @@ -368,7 +368,7 @@ Ci sono due differenti approcci per affrontare questo problema, come discusso ne
1. Passare una funzione contenitore, come `setTimeout(() => button.click(), 1000)`.
2. Associare il metodo all'oggetto, e.g. nel costruttore.

I campi di una classe fornicono un'altra sintassi molto più elegante:
I campi di una classe forniscono un'altra sintassi molto più elegante:

```js run
class Button {
Expand All @@ -391,7 +391,7 @@ Il campo della classe `click = () => {...}` viene creato per ogni oggetto, abbia

Questo è particolarmente utile in ambiente browser, per gli event listeners (ascoltatori di eventi).

## Riepilog
## Riepilogo

Il seguente esempio riporta la sintassi base di una classe:

Expand Down
32 changes: 16 additions & 16 deletions 1-js/09-classes/02-class-inheritance/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ QUi vediamo come rappresentare l'oggetto `animal` e la classe `Animal` graficame

...Potremmo voler creare un'altra `class Rabbit`.

Poichè i conigli sono animali, la classe `Rabbit` dovrebbe essere basata su `Animal`, avendo accesso a tutti i metodi di `Animal`, in questo modo `Rabbit` può assumere tutti i comportamenti di base di un `Animal`.
Poiché i conigli sono animali, la classe `Rabbit` dovrebbe essere basata su `Animal`, avendo accesso a tutti i metodi di `Animal`, in questo modo `Rabbit` può assumere tutti i comportamenti di base di un `Animal`.

La sintassi utilizzate per estendere un'altra classe è: `class Child extends Parent`.

Expand Down Expand Up @@ -64,7 +64,7 @@ Ad esempio, per trovare il metodo `rabbit.run`, il motore JavaScript controlla (
2. Il suo prototype, che è `Rabbit.prototype` (possiede `hide`, ma non `run`).
3. Il suo prototype, che è (a causa di `extends`) `Animal.prototype`, che possiede il metodo `run`.

Come ricordiamo dal capitolo <info:native-prototypes>, JavaScript stesso usa l'ereditarietà per prototipi per gli oggetti integrati. E.g. `Date.prototype.[[Prototype]]` è `Object.prototype`. Questo è il motoivo per cui le date hanno accesso ai metodi generici di un oggetto.
Come ricordiamo dal capitolo <info:native-prototypes>, JavaScript stesso usa l'ereditarietà per prototipi per gli oggetti integrati. E.g. `Date.prototype.[[Prototype]]` è `Object.prototype`. Questo è il motivo per cui le date hanno accesso ai metodi generici di un oggetto.

````smart header="Qualsiasi espressione è ammessa dopo `extend`"
Usare la parola chiave `class` permette di specificare non solo una classe, ma anche un'espressione dopo la parola `extends`.
Expand Down Expand Up @@ -230,9 +230,9 @@ Ops! Abbiamo ricevuto un errore. Ora non possiamo creare conigli (rabbits). Cosa

La risposta breve è:

- **I costruttori nelle classi che ereditano devono chiamare `super(...)`, e bisongna farlo (!) prima di utilizzare `this`.**
- **I costruttori nelle classi che ereditano devono chiamare `super(...)`, e bisogna farlo (!) prima di utilizzare `this`.**

...Ma perchè? Cosa sta succedendo?
...Ma perché? Cosa sta succedendo?
In effetti, questa richiesta sembra un po' strana.

Ovviamente una spiegazione c'è. Addentriamoci nei dettagli, così da capire cosa effettivamente succede.
Expand Down Expand Up @@ -284,14 +284,14 @@ alert(rabbit.earLength); // 10
```warn header="Nota avanzata"
Questa nota assume che voi abbiate una certa esperienza con le classi, anche in altri linguaggi di programmazione.

Fornisce una spiegazione più dettagliata del linguaggio e ne illustra il comportamente che potrebbe essere fonte di errori (anche se molto rari).
Fornisce una spiegazione più dettagliata del linguaggio e ne illustra il comportamento che potrebbe essere fonte di errori (anche se molto rari).

Se trovate questa sezione troppo difficile da capire, saltatela pure, continuate a leggere, e rileggetela in un secondo momento.
```

In una sotto-classe possiamo estendere non solo i metodi, ma anche i campi di classe.

Anche se, si verifica un comportamento strano quando proviamo ad accedere ad un campo sovrascritto nel costruttore padre, piuttosto differente da altri linguaggi di programmazzione.
Anche se, si verifica un comportamento strano quando proviamo ad accedere ad un campo sovrascritto nel costruttore genitore, piuttosto differente da altri linguaggi di programmazione.

Consideriamo questi esempio:

Expand All @@ -318,7 +318,7 @@ Qui, la classe `Rabbit` estende `Animal` e sovrascrive il campo `name` con il su

Non c'è alcun costruttore in `Rabbit`, quindi viene invocato quello di `Animal`.

E' interessante notare che in entrambi i casi: `new Animal()` e `new Rabbit()`, l'istruzion di `alert` nella riga `(*)` mostra `animal`.
E' interessante notare che in entrambi i casi: `new Animal()` e `new Rabbit()`, l'istruzione di `alert` nella riga `(*)` mostra `animal`.

**In altre parole, il costruttore genitore utilizza sempre i suoi campi dati, non quelli sovrascritti.**

Expand Down Expand Up @@ -353,33 +353,33 @@ new Rabbit(); // rabbit

Notiamo che l'output è differente.

E questo è quello che ci aspetteremo. Quando il costrutore genitore viene invocato da una classe derivata, utilizzate i metodi sovrascritti.
E questo è quello che ci aspetteremmo. Quando il costruttore genitore viene invocato da una classe derivata, utilizzate i metodi sovrascritti.

...Ma per i campi dati non è cosi. Come già detto, il costruttore genitore utilizza sempre i suoi campi dati.

Perchè c'è questa differenza?
Perché c'è questa differenza?

Il motivo sta nell'ordine di inizializzazione dei campi dati. I campi dati di una classe vengono inizializati:
Il motivo sta nell'ordine di inizializzazione dei campi dati. I campi dati di una classe vengono inizializzati:
- Prima del costruttore per la classe base,
- Subito dopo `super()` per le classi derivate.

Nel nostro caso, `Rabbit` è la classe derivata. Non c'è alcun `constructor()` al suo interno. Come detto precedentemente, questo equivale ad avere un costruttore vuoto con la sola chiamata a `super(...args)`.

Quindi, `new Rabbit()` invoca `super()`, che esegue il costruttore genitore, e (per le regole che segue la classe derivata) solamente dopo vengono inizializzati i suoi campi dati. Al momento dell'esecuziono del costruttore genitore, non esiste alcun capo dato in `Rabbit`, questo è il motivo per cui vengono utilizzati i campi dati di `Animal`.
Quindi, `new Rabbit()` invoca `super()`, che esegue il costruttore genitore, e (per le regole che segue la classe derivata) solamente dopo vengono inizializzati i suoi campi dati. Al momento dell'esecuzione del costruttore genitore, non esiste alcun capo dato in `Rabbit`, questo è il motivo per cui vengono utilizzati i campi dati di `Animal`.

Abbiamo quindi una sottile differenza di trattamento tra i campi dati ed i metodi in JavaScript.

Fortunatamente, questo comportamente si verifica solamente se un campo dati va a sovrascrivere quelli della classe genitore. Potrebber e essere difficile da capire come comportamente, per questo lo abbiamo speigato qui.
Fortunatamente, questo comportamento si verifica solamente se un campo dati va a sovrascrivere quelli della classe genitore. Potrebbe essere difficile da capire come comportamento, per questo lo abbiamo spiegato.

Se dovesse verificarsi questo problema, si possono utilizzare i metodi invece dei campi dati.


## Super: internamente, [[HomeObject]]

```warn header="Informazioni avanzate"
Se state leggengo il tutorial per la prima volta - questa sezione può essere saltata.
Se state leggendo il tutorial per la prima volta - questa sezione può essere saltata.

Qui spiegeremo i meccanisci interni che stanno dietro l'ereditarietà e `super`.
Qui spiegheremo i meccanismi interni che stanno dietro l'ereditarietà e `super`.
```

Andiamo un pò più a fondo del metodo `super`. Scopriremo alcune cose interessanti a riguardo.
Expand Down Expand Up @@ -610,12 +610,12 @@ rabbit.eat(); // Errore nella chiamata a super (dato che [[HomeObject non esist
## Riepilogo

1. Per estendere una classe: `class Child extends Parent`:
- Questo significa che `Child.prototype.__proto__` dventerà `Parent.prototype`, quindi i metodi vengono ereditati.
- Questo significa che `Child.prototype.__proto__` diventerà `Parent.prototype`, quindi i metodi vengono ereditati.
2. Quando sovrascriviamo un costruttore:
- Dobbiamo richiamare il costruttore del padre attraverso `super()` nel costruttore di `Child` prima di utilizzare `this`.
3. Quando sovrascriviamo un metodo:
- Possiamo usare `super.method()` in un metodo di `Child` per richiamare il metodo da `Parent`.
4. Meccaniscmi interni:
4. Meccanismi interni:
- I metodi tengono traccia del loro oggetto o della loro classe nella proprietà `[[HomeObject]]`, così da poter utilizzare `super` per accedere ai metodi della classe padre.
- Non è quindi sicuro copiare un metodo in un altro oggetto attraverso `super`.

Expand Down