Recommandations d'apprentissage gratuites : tutoriel d'apprentissage javascript
1. Qu'est-ce que JavaScript
1-1 Implémentation de JavaScript
Bien que JavaScript et ECMAScript soient fondamentalement des synonymes, JavaScript est loin d'être limité à ECMA-. 262 tel que défini. L'implémentation JavaScript complète contient :
Les navigateurs Web ne sont qu'un environnement hôte (hostenvironment) dans lequel des implémentations ECMAScript peuvent exister. L'environnement hôte fournit une implémentation de base d'ECMAScript et les extensions nécessaires pour interagir avec l'environnement lui-même. Les extensions (telles que DOM) utilisent les types de base et la syntaxe ECMAScript pour fournir des fonctionnalités supplémentaires spécifiques à l'environnement. D'autres environnements d'hébergement incluent la plate-forme JavaScript côté serveur Node.js et Adobe Flash, qui sera bientôt obsolète.
À un niveau de base, décrit le langage : syntaxe, types, instructions, mots-clés, mots réservés, opérateurs, objets globaux
ECMAScript est juste une description d'un langage qui implémente tous les aspects décrits par cette spécification Appelé
appelle. JavaScript implémente ECMAScript et Adobe ActionScript implémente également
ECMAScript.
1-2, DOM
Le modèle d'objet de document (DOM, Document Object Model) est une interface de programmation d'application (API) permettant d'utiliser des extensions en HTML XML. DOM résume la page entière en un ensemble de nœuds hiérarchiques. Chaque composant d'une page HTML ou XML est un type de nœud
qui contient des données différentes.
DOM permet aux développeurs de contrôler le contenu et la structure des pages web à leur guise en créant une arborescence représentant le document. Grâce à l'API DOM, les nœuds peuvent être facilement supprimés, ajoutés, remplacés et modifiés.
1-3, BOM
IE3 et Netscape Navigator 3 fournissent l'API Browser Object Model (BOM) pour prendre en charge l'accès et manipuler le navigateur. fenêtre. À l'aide de la nomenclature, les développeurs peuvent contrôler des parties de la page autres que celles affichées par le navigateur. La particularité de BOM, et certainement la plus problématique, est qu'il s'agit de la seule implémentation JavaScript sans normes pertinentes. HTML5 change cette situation. Cette version de HTML couvre autant de fonctionnalités de nomenclature que possible sous la forme de spécifications formelles. Grâce à l’émergence du HTML5, de nombreux problèmes liés à la nomenclature ont été résolus.
En général, BOM cible principalement les fenêtres et sous-fenêtres (frames) du navigateur, mais
les gens incluent généralement toutes les extensions spécifiques au navigateur dans la portée de BOM. Voici quelques-unes de ces extensions :
2-1,
élément scriptLa principale façon d'insérer du JavaScript dans HTML est d'utiliser l'élément script. Cet élément a été créé par Netscape et a été implémenté pour la première fois
.
async
src : Facultatif. Représente un fichier externe contenant du code à exécuter.
type : Facultatif. À la place de language , représente le type de contenu (également appelé type MIME) du langage de script dans le bloc de code.
Le code contenu dans le script sera interprété de haut en bas
2-2,
utilise src Le L'élément script de l'attribut ne doit plus contenir d'autre code JavaScript dans les balises script et /script. Si les deux sont fournis, le navigateur téléchargera et exécutera simplement le fichier de script, en ignorant le code en ligne. L'une des fonctionnalités les plus puissantes et les plus controversées de l'élément
script est qu'il peut contenir des fichiers JavaScript provenant de domaines externes. Tout comme l'élément img, l'attribut src de l'élément script peut être une URL complète, et la ressource pointée par cette URL ne peut pas être dans le même domaine que la page HTML la contenant
2 -3. Mode Documentation
Vous pouvez utiliser doctype pour changer le mode document. Il existe deux modes de document initiaux : le Mode mixte (mode bizarreries) et le Mode standard (mode standards). Le premier rend IE comme IE5 (prenant en charge certaines fonctionnalités non standard), et le second permet à IE d'avoir un comportement conforme aux normes. Bien que la principale différence entre les deux modes réside uniquement dans le contenu rendu via CSS, il existe également des effets connexes, ou effets secondaires, sur JavaScript. Ces effets secondaires seront fréquemment mentionnés dans ce livre.
Après qu'IE ait pris en charge pour la première fois le changement de mode de document, d'autres navigateurs ont également emboîté le pas. Avec la généralisation des navigateurs, un troisième mode de document est apparu : le mode quasi-standards (mode presque
standards). Les navigateurs dans ce mode prennent en charge de nombreuses fonctionnalités standard, mais ne sont pas aussi stricts que les standards. La principale différence réside dans la manière dont l'espace blanc autour des éléments de l'image est traité (ce qui est particulièrement visible lors de l'utilisation d'images dans des tableaux).
Le mode Promiscuous est activé dans tous les navigateurs en omettant la déclaration doctype au début du document. Cet accord est déraisonnable, car le mode mixte est très différent selon les navigateurs et il n'y a fondamentalement aucune cohérence dans les navigateurs sans utiliser la technologie noire.
2-4. élément noscript
Compte tenu du problème selon lequel les premiers navigateurs ne prennent pas en charge JavaScript, une solution pour une dégradation gracieuse des pages est nécessaire. Finalement, l'élément a émergé et a été utilisé pour fournir un contenu alternatif aux navigateurs qui ne prenaient pas en charge JavaScript. Bien que les navigateurs actuels prennent en charge JavaScript à 100 %, cet élément a toujours son utilité pour les navigateurs qui désactivent JavaScript. L'élément
peut contenir n'importe quel élément HTML pouvant apparaître dans
3. Bases de la grammaire
3-1 Grammaire
La première chose à savoir est que tout dans ECMAScript est de taille. -Écriture sensible. Qu'il s'agisse d'une variable, d'un nom de fonction ou d'un opérateur, ils sont tous sensibles à la casse. Autrement dit, la variable test et la variable Test sont deux variables différentes. De même, typeof ne peut pas être utilisé comme nom de fonction car il s'agit d'un mot-clé (nous y reviendrons plus tard). Mais Typeof est un nom de fonction parfaitement valide.
3-2. Identifiant
Le soi-disant identifiant est le nom d'une variable, d'une fonction, d'un attribut ou d'un paramètre de fonction. Un identifiant peut être constitué d'un ou plusieurs des caractères suivants :
Les lettres de l'identifiant peuvent être des lettres en ASCII étendu (Extended ASCII) ou des caractères alphabétiques Unicode tels que À et Æ (mais cela n'est pas recommandé).
Par convention, les identifiants ECMAScript utilisent la casse chameau, c'est-à-dire que la première lettre du premier mot est en minuscule et la première lettre de chaque mot suivant est en majuscule
3-3 . Modes stricts
ECMAScript 5 ajoute le concept de mode strict. Le mode strict est un modèle d'analyse et d'exécution JavaScript différent. Certaines méthodes d'écriture non standard d'ECMAScript 3 seront traitées dans ce mode et des erreurs seront générées pour les activités dangereuses
3-4 , Mots-clés et mots réservés
ECMA-262 décrit un ensemble de mots-clés réservés, qui ont des utilisations spéciales, comme indiquer le début et la fin des instructions de contrôle, ou effectuer des opérations spécifiques
Tous les mots-clés spécifiés dans ECMA-262 6e édition :
break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try
Un ensemble de futurs mots réservés est également décrit dans la spécification et ne peut pas non plus être utilisé comme identifiants ou noms d'attributs. Bien que les mots réservés n'aient pas d'objectif spécifique dans le langage, ils sont réservés à une utilisation future de mots clés
3-5 Variables
Les variables ECMAScript sont mal typées, ce qui signifie que les variables. peut être utilisé pour contenir tout type de données. Chaque variable n'est rien de plus qu'un espace réservé nommé utilisé pour contenir une valeur arbitraire. Il existe 3 mots-clés pour déclarer des variables : var, const et let. Parmi eux, var peut être utilisé dans toutes les versions de CMAScript, tandis que const et let ne peuvent être utilisés que dans ECMAScript 6 et versions ultérieures
3-6, mot-clé var
Portée de la déclaration var
Le problème clé est qu'une variable définie à l'aide de l'opérateur var devient une variable locale de la fonction qui la contient. Par exemple, utiliser var pour définir une variable à l'intérieur d'une fonction signifie que la variable sera détruite à la sortie de la fonction
promotion de la déclaration var
Lors de l'utilisation de var, le code suivant ne Une erreur sera signalée. En effet, les variables déclarées à l'aide de ce mot-clé seront automatiquement promues en haut de la portée de la fonction
3-7, let déclaration
let suivi de var fait la même chose, mais avec une différence très importante. La différence la plus évidente est que la portée des déclarations let est la portée du bloc, tandis que la portée des déclarations var est la portée de la fonction.
Zone morte temporaire
Une autre différence importante entre let et var est que les variables déclarées avec let ne seront pas promues dans le scope.
Déclaration globale
Contrairement au mot-clé var, les variables déclarées dans la portée globale à l'aide de let ne deviendront pas des attributs de l'objet window (les variables déclarées avec var will)
Déclaration conditionnelle
Lors de l'utilisation de var pour déclarer une variable, puisque la déclaration sera promue, le moteur JavaScript fusionnera automatiquement les déclarations redondantes en une seule déclaration en haut de la portée. Parce que la portée de let est un bloc, il est impossible de vérifier si une variable du même nom a été précédemment déclarée en utilisant let, et il est également impossible de la déclarer sans déclaration
dans une boucle for L'instruction let
avant que let apparaisse, la variable d'itération définie par la boucle for pénétrera à l'extérieur du corps de la boucle
instruction const
Le comportement de const est fondamentalement le même que let, le seul. La différence importante est que lorsque vous déclarez une variable avec, vous devez également initialiser la variable, et essayer de modifier une variable déclarée avec const entraînera une erreur d'exécution.
3-8. Style déclaratif et bonnes pratiques
ECMAScript 6 ajoute let et const pour rendre objectivement ce langage plus précis. Portée et sémantique de la déclaration. fournir un meilleur soutien. La communauté JavaScript est troublée par divers problèmes causés par des variables au comportement étrange depuis de nombreuses années. Avec l’émergence de ces deux nouveaux mots-clés, de nouvelles bonnes pratiques permettant d’améliorer la qualité du code émergent progressivement.
4. Types de données
ECMAScript dispose de 6 types de données simples (également appelés types primitifs) : Non défini, Null, Booléen, Nombre, Chaîne et Symbole. Le symbole (symbole) est nouveau dans ECMAScript 6. Il existe également un type de données complexe appelé Objet. L'objet est une collection non ordonnée de paires nom-valeur. Étant donné que vous ne pouvez pas définir vos propres types de données dans ECMAScript, toutes les valeurs peuvent être représentées par l'un des sept types de données mentionnés ci-dessus. Seuls 7 types de données ne semblent pas suffisants pour représenter toutes les données. Cependant, les types de données d'ECMAScript sont très flexibles. Un type de données peut être utilisé comme plusieurs types de données
4-1 type d'opérateur
En raison des types de. ECMAScript Le système est lâche, donc un moyen est nécessaire pour déterminer le type de données de n'importe quelle variable. C'est là qu'intervient le type d'opérateur. L'utilisation de l'opérateur typeof sur une valeur renverra l'une des chaînes suivantes :
"undefined" signifie que la valeur n'est pas définie ;
"boolean" signifie que la valeur est une valeur booléenne
"string" signifie la valeur ; est une chaîne ;
« nombre » signifie que la valeur est une valeur numérique ;
« objet » signifie que la valeur est un objet (pas une fonction) ou
« fonction » signifie que la valeur est une fonction ; ;
« symbole » signifie que la valeur est un symbole.
4-2. Type non défini
Le type non défini n'a qu'une seule valeur, qui est la valeur spéciale undéfini . Lorsqu'une variable est déclarée à l'aide de var ou let mais non initialisée, cela équivaut à attribuer une valeur non définie à la variable
Même si une variable non initialisée se verra automatiquement attribuer une valeur non définie, nous vous recommandons tout de même de déclarer la variable en même temps. De cette façon, lorsque typeof renvoie "undefined", vous saurez que c'est parce que la variable donnée n'a pas encore été déclarée, plutôt que parce qu'elle a été déclarée mais non initialisée.
4-3. Type Null
Le type Null n'a également qu'une seule valeur, la valeur spéciale null . Logiquement parlant, la valeur nulle représente un pointeur d'objet nul, c'est pourquoi passer null à typeof renverra "objet"
Lors de la définition de variables qui stockeront les valeurs d'objet à l'avenir, il est recommandé d'utiliser null pour les initialiser. N'utilisez pas d'autres valeurs. De cette façon, rien qu'en vérifiant si la valeur de cette variable est nulle, vous pouvez savoir si cette variable se verra ultérieurement réattribuer une référence à un objet
L'utilisation de l'opérateur d'égalité (==) pour comparer null et undefined renvoie toujours vrai. Mais sachez que cet opérateur convertit ses opérandes à des fins de comparaison.
Même si null et undefined sont liés, leurs utilisations sont complètement différentes. Comme mentionné précédemment, vous n'avez jamais besoin de définir explicitement une valeur de variable sur undefined . Mais null n'est pas comme ça. Chaque fois qu'une variable contient un objet et qu'il n'y a aucun objet à contenir, la variable doit être remplie avec null. Cela maintient la sémantique selon laquelle null est un pointeur vers un objet null et le distingue davantage d'indéfini.
null est une fausse valeur. Il peut donc être détecté de manière plus concise si nécessaire. N'oubliez pas cependant qu'il existe de nombreuses autres valeurs possibles qui sont également fausses. Vous devez donc être clair sur le fait que ce que vous voulez détecter est la valeur littérale de null, pas seulement la fausse valeur
4-4, de type booléen
Booléen (Boolean value) type C'est l'un des types les plus fréquemment utilisés dans ECMAScript et a deux valeurs littérales : vrai et faux. Ces deux valeurs booléennes sont différentes des valeurs numériques, donc vrai n'est pas égal à 1 et faux n'est pas égal à 0
Remarque : les littéraux booléens vrai et faux sont sensibles à la casse, donc Vrai et Faux (et autre forme de cas mixtes) est un identifiant valide, mais pas une valeur booléenne.
4-5. Type de nombre
Le type de données le plus intéressant dans ECMAScript est peut-être le nombre. Le type Number représente des entiers et des valeurs à virgule flottante (également appelées valeurs double précision dans certains langages) en utilisant le format IEEE 754. Différents types numériques ont également différents formats littéraux numériques
Valeur à virgule flottante
Pour définir une valeur à virgule flottante, la valeur doit contenir un point décimal et le point décimal doit être suivi de
Il manque un numéro. Bien qu’il ne soit pas nécessaire d’avoir un nombre entier avant la virgule décimale, cela est recommandé.
Plage de valeurs
En raison de limitations de mémoire, ECMAScript ne prend pas en charge la représentation de toutes les valeurs du monde. La valeur minimale qu'ECMAScript peut représenter est stockée dans Number.MIN_VALUE. Cette valeur est 5e-324 dans la plupart des navigateurs. La valeur maximale pouvant être représentée est stockée dans Number.MAX_VALUE. Cette valeur est 1,797 693 134 862 315. 7e+308. Si le résultat numérique d'un calcul dépasse la plage que JavaScript peut représenter, la valeur sera automatiquement convertie en une valeur Infinity spéciale. Tout nombre négatif non représentable est représenté par -Infini (infini négatif) et tout nombre positif non représentable est représenté par Infini (infini positif). Si un calcul renvoie un Infinity positif ou un Infinity négatif, la valeur ne peut plus être utilisée dans aucun calcul. En effet, Infinity n'a pas de représentation numérique pouvant être utilisée pour les calculs. Pour déterminer si une valeur est finie (c'est-à-dire entre les valeurs minimales et maximales que JavaScript peut représenter), vous pouvez utiliser la fonction isFinite()
NaN
Là est une valeur spéciale appelée NaN, ce qui signifie "Pas un nombre" et est utilisée pour indiquer que l'opération qui était censée renvoyer une valeur a échoué (au lieu de générer une erreur). Par exemple, diviser un nombre par zéro entraîne généralement une erreur dans d’autres langages, annulant l’exécution du code. Mais dans ECMAScript, la division par 0, +0 ou -0 renverra NaN
Conversion numérique
Il existe 3 fonctions qui peuvent convertir des valeurs non numériques en valeurs numériques : Number(), parseInt() et parseFloat(). Number() est une fonction de conversion qui peut être utilisée pour n'importe quel type de données. Ces deux dernières fonctions sont principalement utilisées pour convertir des chaînes en valeurs numériques. Pour les mêmes paramètres, ces trois fonctions effectuent des opérations différentes.
4-6, NaN
Il existe une valeur spéciale appelée NaN, qui signifie "Pas un nombre", utilisée pour indique que l'opération qui était censé renvoyer une valeur a échoué (plutôt que de générer une erreur).
4-7. Conversion numérique
Il existe 3 fonctions qui peuvent convertir des valeurs non numériques en valeurs numériques : Number(), parseInt() et parseFloat. (). Number() est une fonction de conversion qui peut être utilisée pour n'importe quel type de données. Ces deux dernières fonctions sont principalement utilisées pour convertir des chaînes en valeurs numériques. Pour les mêmes paramètres, ces trois fonctions effectuent des opérations différentes. La fonction Number() effectue une conversion basée sur les règles suivantes. Valeur booléenne, vrai converti en 1, faux converti en 0.
Valeur numérique, renvoyée directement. null , renvoie 0. undefined , renvoie NaN .
4-8. Type de chaîne
Le type de données String (string) représente une séquence de zéro ou plusieurs caractères Unicode de 16 bits. Les chaînes peuvent être marquées par des guillemets doubles ("), des guillemets simples (') ou des guillemets inverses (`),
Littéraux de caractères
Le type de données chaîne contient des littéraux de caractères, utilisés pour représentent des caractères non imprimables ou des caractères à d'autres fins
Caractéristiques des chaînes
Les chaînes dans ECMAScript sont immuables, ce qui signifie qu'une fois créées, leurs valeurs ne peuvent pas être modifiées. valeur de chaîne dans une variable, vous devez d'abord détruire la chaîne d'origine, puis enregistrer une autre chaîne contenant la nouvelle valeur dans la variable
Convertir en chaîne
Il existe deux façons de convertir une valeur en chaîne. La première consiste à utiliser la méthode toString() qui est disponible sur presque toutes les valeurs. Le seul but de cette méthode est de renvoyer l'équivalent en chaîne de la valeur actuelle<.>
Litéraux de modèle
ECMAScript 6 ajoute la possibilité d'utiliser des littéraux de modèle pour définir des chaînes. Contrairement à l'utilisation de guillemets simples ou doubles, les littéraux de modèle conservent les caractères de nouvelle ligne et peuvent définir des chaînes sur plusieurs lignes
Interpolation de chaîne
L'une des fonctionnalités les plus couramment utilisées des littéraux de modèle est la prise en charge des caractères String l'interpolation signifie qu'une ou plusieurs valeurs peuvent être insérées dans une définition continue. Techniquement parlant, un littéral de modèle n'est pas une chaîne, mais une expression syntaxique JavaScript spéciale, mais le résultat après évaluation est une chaîne. Les littéraux de modèle sont immédiatement évalués et convertis en instances de chaîne lorsqu'ils sont définis, et toutes les variables insérées prennent également leurs valeurs de leur portée la plus proche
Fonction de balise littérale de modèle
Littéraux de modèle prend également en charge la définition des fonctions de balise, et le comportement d'interpolation peut être personnalisé via les fonctions de balise. La fonction label reçoit le modèle séparé par des jetons d'interpolation et le résultat de l'évaluation de chaque expression. La fonction tag elle-même est une fonction régulière qui applique un comportement personnalisé en le préfixant à un littéral de modèle
chaîne d'origine
Vous pouvez également obtenir directement le littéral de modèle d'origine à l'aide d'un littéral de modèle. contenu (tel que les caractères de nouvelle ligne ou les caractères Unicode), plutôt que la représentation des caractères convertie. À cette fin, vous pouvez utiliser la fonction de balise String.raw par défaut
5. Opérateurs
ECMA-262 décrit un ensemble d'opérations qui peut être utilisé Opérateurs pour les valeurs de données, y compris les opérateurs mathématiques (tels que l'addition, la soustraction), les opérateurs au niveau du bit, les opérateurs relationnels, les opérateurs d'égalité, etc. Les opérateurs dans ECMAScript sont uniques dans le sens où ils peuvent être utilisés sur diverses valeurs, notamment des chaînes, des nombres, des valeurs booléennes et même des objets. Lorsqu'ils sont appliqués à un objet, les opérateurs appellent généralement les méthodes valueOf() et/ou toString() pour obtenir une valeur calculable. 3.5.1 Opérateur unaire Un opérateur qui n'opère que sur une seule valeur est appelé opérateur unaire. L'opérateur unaire est l'opérateur le plus simple dans ECMAScript.
5-1. Opérateurs unaires
2. Addition et soustraction unaires
Paire d'opérateurs d'addition et de soustraction unaire Ils sont familiers à la plupart des développeurs ; ils sont utilisés dans ECMAScript de la même manière qu’ils le sont en mathématiques au lycée. L'addition unaire est représentée par un signe plus (+), qui est placé devant la variable et n'a aucun effet sur la valeur
5-2 Opérateurs de bits
L'opérateur NOT au niveau du bit est représenté par le symbole tilde (~), et sa fonction est de renvoyer le complément à un d'une valeur. Bitwise NOT est l'un des rares opérateurs mathématiques binaires dans ECMAScript
L'opérateur bitwise AND est représenté par l'esperluette (&), il y a deux opérandes. Essentiellement, AND au niveau du bit consiste à aligner chaque bit de deux nombres, puis à effectuer l'opération AND correspondante sur chaque bit en fonction des règles de la table de vérité.
L'opérateur OU au niveau du bit est représenté par le symbole barre verticale ( | ) et comporte également deux opérandes.
Le XOR au niveau du bit est représenté par le curseur ( ^ ). Il a également deux opérandes
. L'opérateur de décalage vers la gauche est représenté par deux signes inférieurs à ( << ), qui déplaceront tous les bits de la valeur vers la gauche en fonction du nombre de chiffres spécifié. Par exemple, si la valeur 2 (binaire 10) est décalée de 5 bits vers la gauche, vous obtiendrez 64 (binaire 1000000)
Le décalage à droite signé consiste en deux supérieurs à Le signe ( >> ) signifie que les 32 bits de la valeur seront décalés vers la droite tout en préservant le signe (positif ou négatif). Le décalage à droite signé est en fait l'opération inverse du décalage à gauche
Le décalage à droite non signé est représenté par 3 signes supérieurs à ( >>> ), Décalera les 32 bits de la valeur à droite. Pour les nombres positifs, les résultats du décalage à droite non signé et du décalage à droite signé sont les mêmes
5-3, opérateurs booléens
L'opérateur NON logique est représenté par un point d'exclamation (!) et peut être appliqué à n'importe quelle valeur dans ECMAScript. Cet opérateur renvoie toujours une valeur booléenne, quel que soit le type de données auquel il est appliqué. L'opérateur logique NON convertit d'abord l'opérande en valeur booléenne puis l'inverse
L'opérateur logique ET est représenté par deux esperluettes (&&), s'applique à deux valeurs
L'opérateur OU logique est représenté par deux caractères barres ( || )
5- 4. Opérateur multiplicatif
L'opérateur multiplicatif est représenté par un astérisque ( * ) et peut être utilisé pour calculer la valeur de deux valeurs.
L'opérateur de division est représenté par une barre oblique (/) et est utilisé pour calculer le quotient de division du premier opérande par le deuxième opérande
6. Déclarations
ECMA-262 décrit certaines instructions (également appelées instructions de contrôle de flux), et la plupart de la syntaxe d'ECMAScript est reflétée dans le déclaration. Les instructions utilisent généralement un ou plusieurs mots-clés pour accomplir une tâche donnée. Les déclarations peuvent être simples ou complexes. Cela peut être aussi simple que de dire à la fonction de quitter, ou aussi complexe que de lister un ensemble d'instructions à exécuter à plusieurs reprises.
6-1. Instruction do-while
L'instruction do-while est une instruction de boucle post-test, c'est-à-dire après que le code dans le corps de la boucle est exécuté
Ce n'est qu'alors que la condition de sortie sera évaluée. En d'autres termes, le code dans le corps de la boucle s'exécute
au moins une fois
6-2 Instruction While
L'instruction while est une instruction de boucle qui teste. d'abord, c'est-à-dire d'abord Détectez la condition de sortie, puis exécutez le code à l'intérieur de la boucle. Par conséquent, le code dans le corps de la boucle while peut ne pas être exécuté
7. Fonctions
Les fonctions sont des composants essentiels de tout langage car elles peuvent encapsuler des instructions, puis les exécuter n'importe où, n'importe quand. Les fonctions dans ECMAScript sont déclarées à l'aide du mot-clé function, suivi d'un ensemble de paramètres, puis du corps de la fonction.
Les fonctions dans ECMAScript n'ont pas besoin de spécifier si elles doivent renvoyer une valeur. N'importe quelle fonction peut utiliser l'instruction return à tout moment pour renvoyer la valeur de la fonction, suivie de la valeur à renvoyer
La fonction sum() ajoutera les deux valeurs et renverra le résultat. Notez qu'il n'y a pas de déclaration spéciale autre que l'instruction return indiquant que la fonction a une valeur de retour
Le mode strict a également certaines restrictions sur les fonctions :
les fonctions ne peuvent pas être nommées avec des paramètres eval ou
; des fonctions ne peuvent pas être appelées eval ou arguments ;
Les paramètres de deux fonctions ne peuvent pas être appelés avec le même nom.
8. Variables, portée et mémoire
4-1 Valeur d'origine et valeur de référence
Les variables ECMAScript peuvent contenir. deux types de données différents : les valeurs primitives et les valeurs de référence. La valeur primitive est la donnée la plus simple et la valeur de référence est un objet composé de plusieurs valeurs.
Lors de l'attribution d'une valeur à une variable, le moteur JavaScript doit déterminer si la valeur est une primitive ou une référence. Le chapitre précédent traitait de 6 valeurs primitives : Indéfini, Null, Booléen, Nombre, Chaîne et Symbole. Les variables qui contiennent des valeurs brutes sont accessibles par valeur car nous opérons sur la valeur réelle stockée dans la variable.
Les valeurs de référence sont des objets stockés en mémoire. Contrairement à d’autres langages, JavaScript ne permet pas d’accéder directement aux emplacements mémoire, il ne peut donc pas opérer directement sur l’espace mémoire où se trouve l’objet. Lors de l'exploitation d'un objet, ce qui est réellement exploité est la référence à l'objet plutôt que l'objet lui-même. A cet effet, la variable contenant la valeur de référence est accessible par référence
Les valeurs primitives et les valeurs de référence sont définies de manière très similaire, elles créent toutes deux une variable puis lui attribuent une valeur. Cependant, ce qui peut être fait avec la valeur une fois que la variable la contient est très différent. Pour les valeurs de référence, vous pouvez ajouter, modifier et supprimer leurs propriétés et méthodes à tout moment
En plus des différentes méthodes de stockage, la valeur d'origine et la valeur de référence également ont des différences lorsqu'ils sont copiés via des variables différentes. Lors de l'attribution d'une valeur originale à une autre variable via une variable, la valeur originale est copiée à l'emplacement de la nouvelle variable.
Lors du passage des paramètres par valeur, la valeur sera transmise. être copié dans une variable locale (c'est-à-dire un paramètre nommé ou, dans le langage ECMAScript, un emplacement dans l'objet arguments). Lors du passage de paramètres par référence, l'emplacement de la valeur en mémoire sera enregistré dans une variable locale, ce qui signifie que les modifications apportées à la variable locale seront reflétées en dehors de la fonction
Par définition, toutes les valeurs de référencesont des instances de Object, donc toute valeur de référence détectée par l'opérateur instanceof et le Le constructeur d'objet retournera true . De même, si vous utilisez instanceof pour détecter une valeur primitive, elle renverra toujours false car la valeur primitive n'est pas un objet.
Notez que l'opérateur typeof renvoie également "fonction" lorsqu'il est utilisé pour détecter des fonctions. Lorsqu'il est utilisé pour détecter des expressions régulières dans Safari (jusqu'à Safari 5) et Chrome (jusqu'à Chrome 7), typeof renvoie également « fonction » en raison des détails d'implémentation. ECMA-262 indique que tout objet qui implémente la méthode interne [[Call]] doit renvoyer « fonction » lors du type de détection. Étant donné que les expressions régulières dans les navigateurs ci-dessus implémentent cette méthode, typeof renvoie également « fonction » pour les expressions régulières. Dans IE et Firefox, typeof renvoie « objet » pour les expressions régulières.
4-2. Contexte et portée d'exécution
Le concept de contexte d'exécution (ci-après appelé « contexte ») est assez important en JavaScript. Le contexte d'une variable ou d'une fonction détermine à quelles données elles peuvent accéder et comment elles se comportent. Chaque contexte a un objet variable associé, et
toutes les variables et fonctions définies dans ce contexte existent sur cet objet. Bien que l'objet variable ne soit pas accessible via le code, il est utilisé pour traiter les données en arrière-plan.
Le contexte global est le contexte le plus extérieur. En fonction de l'environnement hôte de l'implémentation ECMAScript, l'objet représentant le contexte global peut être différent. Dans le navigateur, le contexte global est ce que nous appelons souvent l'objet window (sera présenté en détail au chapitre 12), donc toutes les variables et fonctions globales définies via
var deviendront des propriétés et des méthodes de l'objet window. Les déclarations de niveau supérieur utilisant let et const ne sont pas définies dans le contexte global, mais ont le même effet sur la résolution de la chaîne de portées. Le contexte sera détruit une fois que tout son code aura été exécuté, y compris toutes les variables et fonctions qui y sont définies (le contexte global ne sera détruit qu'après la fermeture de l'application, comme la fermeture de la page Web ou la sortie du navigateur).
Chaque appel de fonction a son propre contexte. Lorsque le flux d'exécution de code entre dans une fonction, le contexte de la fonction est placé sur une pile de contexte. Une fois la fonction exécutée, la pile de contexte affichera le contexte de la fonction et rendra le contrôle au contexte d'exécution précédent. ECMAScript
Le flux d'exécution du programme est contrôlé via cette pile de contexte. Lorsque le code du contexte est exécuté, il crée une chaîne de portée d'objets variables. Cette chaîne de portée détermine l'ordre dans lequel les variables et les fonctions sont accessibles par le code à chaque niveau de contexte. L'objet variable du contexte dans lequel le code s'exécute est toujours au début de la chaîne de portées. Si le contexte est une fonction, son objet d'activation est utilisé comme objet variable. L'objet actif n'a initialement qu'une seule variable définie : les arguments. (Il n'existe pas de variable de ce type dans le contexte global.) L'objet variable suivant dans la chaîne de portée provient du contexte conteneur, et l'objet suivant provient du contexte conteneur après cela. Et ainsi de suite jusqu'au contexte global ; l'objet variable du contexte global est toujours le dernier objet variable de la chaîne de portée
Amélioration de la chaîne de portée
Bien que le contexte d'exécution inclut principalement le contexte global et fonctions Il existe deux contextes (un troisième contexte existe dans l'appel eval()), mais il existe d'autres moyens d'améliorer la chaîne de portées. Certaines instructions entraînent l'ajout temporaire d'un contexte au début de la chaîne de portées, qui est supprimé après l'exécution du code
.
Déclaration de variable
Après ES6, la déclaration de variable JavaScript a subi des changements bouleversants. Jusqu'à
ECMAScript 5.1, var était le seul mot-clé pour déclarer des variables. ES6 ajoute non seulement les mots-clés
let et const, mais fait également en sorte que ces deux mots-clés dépassent largement
var comme premier choix.
Déclaration de la portée de la fonction à l'aide de var
Lors de la déclaration d'une variable à l'aide de var, la variable est automatiquement ajoutée au contexte le plus proche. Au sein d'une fonction, le contexte le plus proche est le contexte local de la fonction. Dans une instruction with, le contexte le plus proche est également le contexte de la fonction. Si une variable est initialisée sans être déclarée, elle sera automatiquement ajoutée au contexte global 注意：未经声明而初始化变量是JavaScript编程中一个非常常见的错误，会导致很多问题。为此，读者在初始化变量之前一定要先声明变量。在严格模式下，未经声明就初始化变量会报错
La déclaration var sera déplacée en haut de la fonction ou de la portée globale, avant tout le code de la portée. Ce phénomène est appelé « levage ». Le levage permet au code dans la même portée d'utiliser la variable sans avoir à se soucier de savoir si elle a été déclarée. Cependant, dans la pratique, la promotion peut également conduire au phénomène légal mais étrange de l'utilisation de variables avant qu'elles ne soient déclarées.
Utiliser la déclaration de portée au niveau du bloc de let
Le nouveau mot-clé let dans ES6 est très similaire à var, mais sa portée est au niveau du bloc, ce qui est également le cas dans JavaScript New concept. La portée au niveau du bloc est délimitée par la paire d’accolades {} la plus proche. En d'autres termes, les blocs if, les blocs while, les blocs fonctionnels et même les blocs individuels relèvent de la portée des variables déclarées let.
Utiliser la déclaration de constante const
En plus de let , ES6 ajoute également le mot-clé const. Les variables déclarées à l'aide de const doivent également être initialisées à une valeur. Une fois déclaré, il ne peut être réaffecté à une nouvelle valeur à aucun moment de son cycle de vie
注意 开发实践表明，如果开发流程并不会因此而受很大影响，就应该尽可能地多使用 const 声明，除非确实需要一个将来会重新赋值的变量。这样可以从根本上保证提前发现重新赋值导致的bug
Collecte des déchets.
JavaScript est un langage qui utilise le garbage collection, ce qui signifie que l'environnement d'exécution est responsable de la gestion de la mémoire lorsque le code est exécuté. Dans des langages comme C et C++, le suivi de l’utilisation de la mémoire est une lourde charge pour les développeurs et la source de nombreux problèmes. JavaScript soulage les développeurs de ce fardeau et implémente l'allocation de mémoire et le recyclage des ressources inutilisées grâce à la gestion automatique de la mémoire. L’idée de base est simple : déterminer quelle variable ne sera plus utilisée, et libérer la mémoire qu’elle occupe. Ce processus est cyclique, c'est-à-dire que le programme de récupération de place s'exécutera automatiquement à certains intervalles (ou à une heure de collecte planifiée pendant l'exécution du code). Le processus de récupération de place est une solution approximative et imparfaite, car la question de savoir si un certain morceau de mémoire est encore utile est un problème « indécidable », ce qui signifie qu'il ne peut pas être résolu par des algorithmes.
Prenons comme exemple le cycle de vie normal des variables locales dans une fonction. Les variables locales dans une fonction existeront lorsque la fonction est exécutée. À ce stade, la mémoire de la pile (ou du tas) allouera de l'espace pour enregistrer la valeur correspondante. La fonction utilise des variables en interne puis se termine. À ce stade, la variable locale n’est plus nécessaire et la mémoire qu’elle occupe peut être libérée pour une utilisation ultérieure. Il est évident que les variables locales ne sont plus nécessaires dans ce cas, mais ce n'est pas toujours évident. Le garbage collector doit garder une trace des variables qui sont encore utilisées et de celles qui ne sont plus utilisées afin de récupérer de la mémoire. Il peut y avoir différentes implémentations sur la façon de marquer les variables inutilisées. Cependant, dans l'histoire du développement des navigateurs, deux stratégies de balisage principales ont été utilisées : la désinfection du balisage et le comptage de références.
Marquer le balayage
La stratégie de récupération de place la plus couramment utilisée en JavaScript est le marquage et le balayage. Lorsqu'une variable entre dans le contexte, par exemple en déclarant une variable dans une fonction, la variable est marquée comme existant dans le contexte. Les variables qui ne sont pas dans le contexte ne devraient logiquement jamais libérer leur mémoire, car elles peuvent être utilisées tant que le code dans le contexte est en cours d'exécution. Lorsqu'une variable quitte le contexte, elle est également marquée comme sortant du contexte.
Il existe de nombreuses façons d'étiqueter les variables. Par exemple, lorsqu'une variable entre dans le contexte, inversez un certain bit ; ou vous pouvez conserver deux listes de variables « en contexte » et « hors contexte », et vous pouvez déplacer les variables d'une liste à l'autre. La mise en œuvre du processus de notation n'est pas importante, la clé est la stratégie.
Lorsque le programme de récupération de place s'exécute, il marquera toutes les variables stockées en mémoire (rappelez-vous qu'il existe de nombreuses façons de marquer). Il supprime ensuite les balises de toutes les variables du contexte, ainsi que les variables référencées par les variables du contexte. Les variables marquées après ceci doivent être supprimées car elles ne sont plus accessibles à aucune variable du contexte. Le garbage collector effectue ensuite un nettoyage de la mémoire, détruisant toutes les valeurs marquées et récupérant leur mémoire.
En 2008, IE, Firefox, Opera, Chrome et Safari utilisaient tous le nettoyage de balisage (ou une variante de celui-ci) dans leurs implémentations JavaScript, ne différant que par la fréquence à laquelle ils exécutaient le garbage collection.
Comptage de références
Une autre stratégie de collecte des ordures moins couramment utilisée est le comptage de références. L'idée est d'enregistrer pour chaque valeur le nombre de fois où elle a été référencée. Lorsque vous déclarez une variable et lui attribuez une valeur de référence, le numéro de référence de cette valeur est 1. Si la même valeur est affectée à une autre variable, le numéro de référence est augmenté de 1. De même, si la variable contenant une référence à la valeur est écrasée par une autre valeur, le nombre de références est décrémenté de un. Lorsque le nombre de références d'une valeur est 0, cela signifie que la valeur n'est plus accessible, sa mémoire peut donc être récupérée en toute sécurité. Le programme de récupération de place
libérera la mémoire avec un numéro de référence de 0 lors de sa prochaine exécution. Le comptage de références a été adopté pour la première fois par Netscape Navigator 3.0, mais s'est rapidement heurté à un problème sérieux : les références circulaires. La référence dite circulaire signifie que l'objet A a un pointeur pointant vers l'objet B, et que l'objet B fait également référence à l'objet A.
待更新。。。
Recommandations d'apprentissage gratuites associées : javascript (vidéo)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
