L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
La portée de ceci et les fonctions fléchées
Scope, this et les fonctions fléchées sont des concepts complexes qui ne sont pas faciles à saisir, en particulier lorsque vous commencez à utiliser JavaScript et Angular. Examinons-les ensemble!
Que signifie Scope en JavaScript? 🤔
Il est difficile de dire ce que cela signifie dans un oscilloscope si nous ne définissons pas d'abord ce que signifie réellement un champ .
Souvenez-vous que scène populaire dans Le Roi Lion où le gros chat dit au chat smol que tout ce que la lumière touche sera son royaume? Il faisait en fait référence à la portée de ce que comprend sa terre.
Tout ce qui se trouve dans le champ de cette terre qui est touché par la lumière est considéré comme étant dans la portée . Il fait partie du règne. Tout ce qui est en dehors de la terre qui est touché par la lumière, où vivent les hyènes, est hors de portée.
La portée dans le langage JavaScript est l'endroit où vit une variable, une fonction ou un objet et comment y accéder. Certaines variables vivent au pays des chats, d'autres au pays des hyènes.
Nous avons deux types de portées en JavaScript: globale et locale. Examinons les deux plus en détail.
Global Scope 🌍
Tout ce qui se trouve dans la portée globale est accessible n'importe où dans votre code, y compris l'environnement JavaScript lui-même. Dans notre exemple, chaque animal qui vit à l'intérieur du pays de la lumière est dans la portée globale.
Par exemple, lorsque vous êtes dans les outils de développement du navigateur (clic droit, inspectez l'élément, ouvrez l'onglet de la console) et que vous écrivez window. document, vous voyez l'intégralité du code HTML de la page sur laquelle vous vous trouvez dans la console. Cela est possible car l'objet window est global dans le navigateur.
Les éléments globaux sont accessibles n'importe où sans code, même s'ils sont appelés ou utilisés dans d'autres fonctions ou méthodes à l'intérieur des objets.
console . log ( window )
var globalVar = 'HAI'
function insideAFunction ( ) {
console . log ( window globalVar )
var nestedFunction = function ([19659015]) {
console . log ( window globalVar )
}
}
Local Scope
Tout ce qui a été déclaré ou "né »À l'intérieur d'une fonction existe dans la portée locale de cette fonction, ce qui signifie que tout code en dehors de la fonction n'en sera absolument pas conscient.
Quand vous pensez à la portée locale, pensez à la confidentialité de votre votre propre maison – tout ce qui se passe à l'intérieur n'est pas connu du monde extérieur (espérons-le!), mais uniquement des personnes qui y vivent.
Maintenant, pensez à votre quartier —Il a en lui-même de nombreuses maisons, chacune avec sa propre portée locale, mais le quartier lui-même est aussi une zone plus grande qui a sa propre portée locale, et ainsi de suite jusqu'à ce que vous atteigniez la limite globale. :
function meUsesLocalScope () {
var meIsLocal = «Salut! Je suis nouveau. »;
console . log ( meIsLocal ) ;
} ;
meUsesLocalScope () ;
console . log ( meIsLocal ) ;
Regardons cet exemple étendu, qui mélange les deux portées, car nous avons parfois besoin d'utiliser des éléments globaux dans notre fonctions:
var meIsGlobal = 'Salut! Tout le monde me connaît. Je vais vous présenter! »;
function meUsesGlobalAndLocalScopeElements () {
var meIsLocal = « Salut! Je suis nouveau. »;
console . log ( meIsLocal ) ;
console . log ( meIsGlobal ) ;
} ;
meUsesGlobalAndLocalScopeElements () ;
console . log ( meIsGlobal ) ;
console . log ( meIsLocal ) ;
Un rappel rapide sur ce que c'est
Le mot this est un spécial mot-clé en JavaScript, ce qui signifie qu'il peut être utilisé n'importe où dans votre code.
Ce est une référence au soi d'un élément. Pensez au mot me en anglais. Moi en soi dépend de qui l'orateur est, quand je dis moi je veux dire Marina Mosti. Quand vous dites moi cela prend un contexte et une signification complètement différents.
Tout comme en anglais, this prend le sens de qui l'utilise – en général, l'objet contenant ou la fonction dans laquelle il est écrit, à quelques exceptions près.
How Do Scope and This Play Together?
Selon l'endroit d'où vous appelez ce il vous donnera des résultats différents. Terrible, je sais 😱 – gardez à l'esprit l'exemple de moi .
Vous souvenez-vous de notre exemple concernant la portée globale dans le navigateur? Si vous appelez this dans la portée global vous obtiendrez l'objet window.
L'impression de ce document donne le même résultat que window.document. Essayez-le dans votre navigateur!
Prenons l'exemple suivant:
function simpleMath () {
function add ( a b ) {
const c = a + b ;
console . log ( `a + b = $ { c } ` )
} [19659119] const a = 3 ;
const b = 5 ;
console . log ( `a = $ { a } and b = $ { b } ` )
add ( a b ) ;
}
simpleMath [19659015] () ;
this . simpleMath () ;
Ce code s'exécutera sans erreur. Mais que se passe-t-il si vous essayez de changer add (a, b) à l'intérieur de la fonction simpleMath en this.add (a, b) ?
Maintenant, le code renvoie une erreur. Mais pourquoi? La logique indiquerait que ceci devrait indiquer la portée de simpleMath et que add devrait être dans cette portée. Cependant, dans ce cas, ceci se réfère à la portée globale. Et la portée globale ne connaît pas une fonction nommée add .
Si vous exécutez ce code dans la console du navigateur, this est l’objet fenêtre. Donc, si vous console.log (this) à l'intérieur de simpleMath vous verrez l'objet window imprimé dans la console – y compris la référence à simpleMath puisqu'il lui-même est sur la portée globale.
Ok, gardons le même concept mais écrivons-le un peu différemment.
const math = {
a : 3
b : 5
ajouter : function () {
const c = this . a + [19659028] ceci . b ;
console . log ( `a + b = $ { c } ` )
} [19659015]
multiplier : fonction () {
const d = this . a * [19659028] ceci . b ;
console . log ( `a * b = $ { d } " ) ; [19659172]}
print : function () {
console . log ( `a = $ { this . a } and b = $ { this . b } ` ) ;
this . add ( ]) ;
this . multiplié () ;
console . log ( this )
}
}
math . print () ;
Cette fois, nous avons créé un objet appelé math qui contient toute notre logique mathématique.
Dans ce exemple, this se réfère à la portée locale ou à l'objet math donc tout ce qui se trouve à l'intérieur de cet objet se trouve dans this . Les objets se comportent comme des personnes: quand une personne dit moi ils se veulent eux-mêmes; quand un objet dit ceci cela signifie lui-même.
Essayez console.log (this) dans l'une des fonctions. Vous verrez tout ce qui est déclaré à l'intérieur de math imprimé dans la console.
Maintenant, écrivez console.log (this) juste après math.print () . Vous verrez à nouveau l'objet window, car maintenant ce est appelé en dehors de math ce qui signifie qu'il fait référence à la portée globale.
Il y a encore une chose dont nous avons besoin pour soyez conscient quand il s'agit d'utiliser cette – fonctions fléchées. Respirez profondément et abordons-le ensemble.
Les fonctions de flèche et celle-ci
Les fonctions de flèche ont été introduites dans ES6. C'est une manière abrégée d'écrire une fonction smol.
Pre ES6:
let numbers = [ 10 15 , 20 25 30 ] ;
let greaterThanFifteen = numbers . [19659014] filtre ( fonction ( numéro ) {
retour numéro > 15 ;
} ) ;
Utilisation des fonctions fléchées:
let nombres = [ 10 15 , 20 25 30 ] ;
let greaterThanFifteen = numbers . [19659014] filtre ( numéro => numéro > 15 )
Si vous avez besoin d'un rappel sur la syntaxe, vous peut en savoir plus sur les fonctions fléchées sur MDN .
Si vous êtes comme moi et que vous préférez le bonbon pour les yeux de => à la fonction vous devez soyez conscient d'un effet secondaire qu'elle peut provoquer avec la portée et le mot-clé this .
La portée d'une fonction fléchée n'a pas de this qui lui est propre. Il hérite du ce de la portée englobante. C'est la chose la plus importante dont vous devez vous souvenir.
Revenons à notre objet (simplifié) math .
const math = {
a : 3
b : 5
ajouter : function () {
let c = this . a + [19659028] ceci . b ;
console . log ( `a + b = $ { c } ` )
} [19659015]
print : function () {
console . log ( `a = $ { this . a } and b = $ { this . b } ` ) ;
this . add ( ]) ;
}
}
math . print () ;
Tout va bien, ça marche comme prévu. Réécrivons maintenant ajouter avec la syntaxe de la flèche.
const math = {
a : 3
b : 5
ajouter : () => {
let c = this . a + ceci . b ;
console . log ( `a + b = $ { c } ` )
} [19659015]
print : function () {
console . log ( `a = $ { this . a } and b = $ { ceci . b } ` ) ;
this . add ( ]) ;
}
}
math . print () ;
Si vous exécutez ce code, vous obtiendrez une erreur disant ceci n'est pas défini dans cette ligne: [19659013] let c = this . a + this . b ;
C'est car ce est hérité de la portée englobante, qui dans ce cas signifie la portée de la fonction print et seulement cette portée.
Si vous appelez math.add () en dehors de l'objet math puis le this inside add va pointer vers la portée globale, et this.b recherchera en fait b inside window.b .
L'une des solutions possibles pour conserver notre structure d'objet serait dans le code illustré ci-dessous .
const math = {
a : 3
b : 5
ajouter : ( a b ) => a + b
print : function () {
console . log ( `a = $ { this . a } and b = $ { ceci . b } ` ) ;
let c = this ]. ajouter ( this . a this . b ) ;
console . log ( c )
}
}
Nous devons passer a et b comme arguments à ajouter . Plus d'erreurs.
Conclusion
Scope, this et les fonctions fléchées sont des concepts complexes qui ne sont pas faciles à saisir. Ne vous sentez pas mal si cela vous prend un peu de temps pour les entourer. Une fois que vous avez fait, vous débloquerez beaucoup de puissance dans JavaScript et Angular!
L'important est que vous gardiez toujours à l'esprit que si vous rencontrez une sorte de comportement «étrange» dans une fonction fléchée, un coupable habituel et un bon endroit pour commencer le débogage est de voir s'il y a une mauvaise utilisation du mot-clé this .
Pour plus d'informations concernant this veuillez consulter cette documentation MDN page .
Comme toujours, merci d'avoir lu et partagez avec moi vos expériences sur Twitter à: @marinamosti .
PS Tous saluent l'avocat magique! 🥑
P.P.S. ❤️🔥🐶☠️
Source link