Javascript ES6 ITA 43: OOP, quinta parte (this, this e ancora this!)

preview_player
Показать описание


IN QUESTO VIDEO
- Come internamente le funzioni costruttore riescano a dare uno stato interno separato ad ogni oggetto creato
- this è un concetto relativo... Tutte le sfaccettature di una keyword `schizofrenica`
- completiamo con l`emulazione dei membri statici di una classe: property prototype di una funzione

Il video contiene solo la registrazione con il mio commento audio (senza altri video, immagini o audio) di una sessione di lavoro con software liberamente scaricabili ed utilizzabili da chiunque oppure di cui ho regolare licenza. Il fine è esclusivamente didattico.

The video contains only the registration of my voice while I'm using only open source or freely downloadable software. No extra video, photos or audio. The goal is only educational.
  1. fcamuso
  2. Educational
  3. Corso javascript ITA
  4. es2015
  5. es6
  6. ecma script 2015
Рекомендации по теме
Javascript ES6 ITA 0:10:10

Javascript ES6 ITA 43: OOP, quinta parte (this, this e ancora this!)

Javascript ES6 ITA 0:08:20

Javascript ES6 ITA 44: OOP, ES6 class - prima parte

Javascript ES6 ITA 0:11:41

Javascript ES6 ITA 39: OOP, prima parte

Javascript ES6 ITA 0:09:03

Javascript ES6 ITA 42: OOP, quarta parte

Javascript ES6 ITA 0:06:23

Javascript ES6 ITA 45: OOP, ES6 class - seconda parte (getters e setters)

Javascript ES6 ITA 0:08:57

Javascript ES6 ITA 46: OOP, ES6 class - terza parte

Javascript ES6 ITA 0:05:45

Javascript ES6 ITA 47: OOP, ES6 class - quarta parte

Javascript ES6 ITA 0:09:31

Javascript ES6 ITA 40: OOP, seconda parte

Javascript ES6 ITA 0:08:45

Javascript ES6 ITA 53: chiusura di playlist, cenni alla prossima

Javascript ES6 ITA 0:11:07

Javascript ES6 ITA 48: ES6 Symbols (nuovo tipo di dato primitivo)

Javascript ES6 ITA 0:13:14

Javascript ES6 ITA 41: OOP, terza parte (prototype)

Javascript ES6 ITA 0:07:20

Javascript ES6 ITA 36: array, prima parte

Javascript ES6 ITA 0:14:34

Javascript ES6 ITA 3: costanti e variabili - prima parte

Javascript ES6 ITA 0:07:55

Javascript ES6 ITA 27: le funzioni - prima parte

Javascript ES6 ITA 0:07:11

Javascript ES6 ITA 31: funzioni espressione, prima parte

Javascript ES6 ITA 0:09:20

Javascript ES6 ITA 38: array terza parte

Javascript ES6 ITA 0:07:33

Javascript ES6 ITA 11: Approfondimento (UNICODE - prima parte) ...

Javascript ES6 ITA 0:10:08

Javascript ES6 ITA 7: assaggiamo JQuery? - prima parte

Javascript ES6 ITA 0:11:03

Javascript ES6 ITA 51: Destructuring, operatore rest

Javascript ES6 ITA 0:08:52

Javascript ES6 ITA 29: le funzioni - terza parte (parametri in n. variabile, opzionali e rest)

Javascript ES6 ITA 0:07:59

Javascript ES6 ITA 33: funzioni espressione, visibilità variabili

Javascript ES6 ITA 0:07:58

Javascript ES6 ITA 49: ES6 Iterators e iterable, prima parte

Javascript ES6 ITA 0:07:56

Javascript ES6 ITA 28: le funzioni - seconda parte

Javascript ES6 ITA 0:07:23

Javascript ES6 ITA 12: Approfondimento (UNICODE - seconda parte) ...

Комментарии
Автор

Grazie per aver spiegato le variabili statiche con proto js5, era un problema che mi assillava da tempo.

vagnonivagnoni
Автор

La definizione di variabili locali con let ( es. let local_var=9999 ) a mio parere non è da considerarsi un errore, spesso questo metodo è utile per simulare private properties/method accessibili solo nell' oggetto stesso.

FrancescoDalpra
Автор

Professor Camuso intanto la ringrazio per la grandissima mano che mi sta dando nello studio di JS...essendo io un povero autodidatta voglio chiederle una cosa in merito alle property di una instance of prototype, in quanto se io ho la sola necessità di cambiare una property di un'istanza è giusto operare un overriding? oppure c'è un altro modo che a me è sfuggito?

niosliceoflife
Автор

Volevo segnalare altri 2, a mio avviso, utilizzi del this:

1 il this passato come parametro di una funzione lanciata da un evento onclick, esempio:
<input onclick="funzione(this)" id="name" name="name">
<script>funzione(e) { alert(e); }</script>

Fa riferimento a tutto il tag input

2 il this nelle arrow function fa sempre riferimento allo scope in cui si trova, esempio:
let obj = {
name : 'Faghy',
displayName : function() {
console.log(this.name);
}
};
obj.displayName();

In questo caso il this fa riferimento all' inero oggetto obj in cui si trova la funzione anonima

christianserafino
Автор

Buongriorno grande maestro.
Credo di aver rintracciato un caso particolare (le chiedo conferma). Lavorando ad un file html che richiama un file.js esterno ho notato che nel momento in cui viene effettuato il parsing del file.js (richiamato nella head del file.html) il contenuto della variabile globale che si trova all'interno del file.js in cui è stata memorizzata la mia funzione espressione, è subito disponibile, senza che la funzione espressione venga chiamata. Nella lezione di approfondimento sull'hoisting avevo imparato che il meccanismo dell'hoisting mette in evidenza (solleva) solo le dichiarazioni delle variabili e delle funzioni(in questo caso della funzione espressione) e non anche le inizializzazioni o comunque i dati interni alla variabile.

Di seguito le riporto le righe di codice per essere più chiaro:

<!-- file.html -->
<head>
<script src="file.js"
</head>
<body>
<button onclick="valuta()"></button>
</body>


/*file.js*/
var DOMobj = function(){
var psw =
}
function valuta() {
// DOMobj();
psw.style.color = "red";
}


nel codice sopra il commento fa riferimento all'istruzione che credevo fosse necessaria per accedere e modificare il valore della "var psw" contenuta in "var DOMobj". In realtà anche senza quell'istruzione ho libero accesso a "var psw". Cosa che non si verifica invece se estraggo da "var DOMobj" la "var psw" e la espongo come una normale variabile globale.
Situazione peraltro paradossale, in quanto la funzione "valuta(){}" essendo richiamata da un file esterno a quello in cui si trova è comprensibile che non mi faccia accedere alle variabili del file.js (se pur globali), dato che l'invocazione, come è giusto che faccia, salta direttamente alla funzione "valuta(){}", senza considerare tutto il contesto che vi è intorno, ma com'è possibile invece che si abbia accesso alle variabili interne di una funzione espressione senza che essa venga prima invocata e che per di più esse vengano considerate globali?!

(so bene che è una worse practice la modifica della variabile globale (dell'attributo in realtà) accedendo ad essa direttamente, omettendo la parola "var" all'interno della funzione. Ma nel codice sopra ho esemplificato così anche per rimarcare che sto proprio modificando una variabile globale (e non una sua copia), alla quale non mi spiego perché ho libero accesso.)

Mi scuso anticipatamente nel caso in cui questa osservazione e richiesta di chiarimenti dipenda da una mia mancanza e non ho prestato particolare attenzione alle sue lezioni in cui casi analoghi erano già stati osservati e discussi.
Mi scuso inoltre dell'aver inserito questo commento in questa lezione (che è l'ultima e non quella relativa agli argomenti trattati) ma volevo avere la certezza che mi avrebbe letto.

troppodolore
Автор

Salve, non ho capito perchè a 6:45 per creare una proprietà nuova nel prototipo usa Persona.prototype ed invece a 8:45 per modificare la stessa proprietà utilizza si può utilizzare la prima forma in entrambi i i casi? Anche perché se creo un oggetto da un costruttore, do per scontato che conosco il costruttore stesso, no?

limbo
Автор

IL nuovo comando class risolve il this.
class Root{
constructor(){
this.nome = "Giuseppe";
}
}
console.log(nome);
new_javascript.js:12 Uncaught ReferenceError: nome is not defined

vagnonivagnoni
Автор

Prof. Camuso ma alla riga 24 non vanno due punti e virgola? Il primo dopo il return e il secondo dopo la graffa??

BiagioRosarioGreco