Portée au niveau du bloc
ES5 n'a pas de portée au niveau du bloc, seule portée globale et portée de la fonction. Pour cette raison, la portée des variables est très large, vous devez donc la créer immédiatement dès que vous entrez dans la fonction. Cela provoque la soi-disant augmentation variable.
La fonction «d'amélioration variable» de l'ES5 provoque souvent une erreur si vous ne faites pas attention:
1. La variable intérieure couvre la variable extérieure
var tmp = new Date (); fonction f () {console.log (tmp); if (false) {// exécuter undefinedvar tmp = "Hello world";}}2. Variable se fuit dans les variables globales
var s = 'hello'; for (var i = 0; i <s.length; i ++) {console.log (s [i]);} console.log (i); // 5Dans le passé, nous utilisons souvent des fermetures pour résoudre ce problème (comme les fonctions auto-exécutantes). Maintenant, sur la base de ce problème, ES6 a ajouté la portée au niveau du bloc, il n'est donc pas nécessaire d'exécuter des fonctions en soi.
Let et const
ES6 est compatible vers l'arrière, et le maintien de la compatibilité en arrière signifie ne jamais modifier le comportement du code JS sur la plate-forme Web, de sorte que la portée des variables créées par VAR sera toujours la portée globale et la portée de la fonction. De cette façon, même si vous avez une portée au niveau du bloc, il ne peut pas résoudre le problème de "l'amélioration des variables" de ES5. Par conséquent, ici ES6 a ajouté deux nouveaux mots clés: let et const.
1.
"Let est un var plus parfait", il a de meilleures règles de portée.
2.Conde
const déclare une constante en lecture seule. Une fois déclaré, la valeur de la constante ne peut pas être modifiée, mais l'objet déclaré par const peut avoir des changements de propriété (objet objet objet.freeze)
const a = []; a.push ('bonjour'); // exécutable a = ['dave']; // signaler une erreurVous pouvez également utiliser objet.freeze pour geler l'objet
const foo = object.freeze ({}); // En mode normal, la ligne suivante ne fonctionne pas; // En mode strict, la ligne rapportera une erreur foo.prop = 123; //Utiliser LET et const:
• Les variables ne sont valables que dans la portée au niveau du bloc où se trouve la déclaration
• La déclaration variable ne peut être utilisée que (zone morte temporaire)
• Les variables ne peuvent pas être définies à plusieurs reprises
• La variable globale déclarée, attributs qui n'appartiennent pas aux objets globaux
var a = 1; window.a // 1let b = 1; window.b // non défini
Ce mot-clé
Nous savons que cela dans la fonction ES5 pointe vers la portée où se trouve le temps d'exécution. Par exemple
fonction foo () {setTimeout (function () {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 21Ici, je déclare une fonction FOO, qui est en interne une fonction de retard setTimeout, imprimant un this.id toutes les 100 ms. Nous l'appelons via foo.call ({id: 42}) et définissons la portée de cette fonction. Il faut 100 millisecondes pour exécuter réellement. Étant donné que cela indique la portée où se trouve l'exécution, cela pointe ici vers la fenêtre d'objet global, pas la fonction FOO. ici:
• Utilisez l'appel pour modifier le contexte d'exécution de FOO afin que le contexte d'exécution de la fonction ne soit plus une fenêtre, afin de distinguer ce pointeur dans Settimeout
• La méthode Settimeout est suspendue sous l'objet Window, donc cela pointe vers la portée de l'exécution - l'objet Window.
Le code appelé délai d'attente est exécuté dans la portée globale, donc la valeur de cela dans la fonction pointe vers l'objet Window en mode non stricte, et n'est pas défini en mode strict - 《JavaScript Advanced Programming》
Pour résoudre ce problème, notre pratique habituelle est d'attribuer cela à d'autres variables:
fonction foo () {var that = this; setTimeout (function () {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42Maintenant, ES6 a lancé la fonction Arrow pour résoudre ce problème.
Fonction de flèche
Identifiant => Expression
var sum = (num1, num2) => {return num1 + num2; } // équivalent à var sum = fonction (num1, num2) {return num1 + num2;};• Si la fonction n'a qu'un seul paramètre, les parenthèses peuvent être omises
• Si la fonction n'a qu'une seule instruction de retour, les accolades et le retour peuvent être omis
• Si la fonction renvoie directement un objet, des parenthèses doivent être ajoutées à l'extérieur de l'objet. (Parce qu'un objet vide {} et un bloc vide {} ressemblent exactement.
En réponse au problème de ce mot-clé, ES6 spécifie la portée où cette liaison est définie dans la fonction de flèche, plutôt que de pointer de la portée où se trouve le temps d'exécution. Depuis ce point, ce point a été fixé, ce qui est propice à l'encapsulation des fonctions de rappel.
fonction foo () {var that = this; setTimeout (() => {console.log ('id:', that.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42Remarque: La fixation pointant vers la fonction de flèche Ce n'est pas parce qu'il existe un mécanisme pour le lier à l'intérieur de la fonction de flèche. La raison réelle est que la fonction de flèche n'a pas du tout cela. La fonction Arrow n'a pas du tout la sienne, et l'internes est ceci dans le bloc de code extérieur. Cela mène à:
• ne peut pas être utilisé comme constructeur
• Vous ne pouvez pas utiliser Call (), Appliquer (), Bind () et d'autres méthodes pour modifier la direction de ce
Cours et héritage
ECMAScript traditionnel n'a pas le concept de classes. Il décrit le concept de chaînes prototypes et utilise des chaînes prototypes comme méthode principale pour mettre en œuvre l'héritage. L'idée de base est d'utiliser des prototypes pour permettre un type de référence pour hériter des propriétés et des méthodes d'un autre type de référence. La façon traditionnelle d'atteindre ce comportement est par le constructeur:
Point de fonction (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return '(' + this.x + ',' + this.y + ')';}; var p = nouveau point (1, 2);Ici, le point de constructeur aura un objet prototype (prototype), qui contient un pointeur vers le point (constructeur), et l'instance P contient un pointeur interne vers l'objet Prototype (PROP). Ainsi, tout l'héritage est mis en œuvre via la chaîne prototype. Pour plus de détails, consultez cet article de mon: prototype et constructeur en javascript
classe
ES6 fournit un style d'écriture plus proche des langues traditionnelles, introduisant le concept de classe comme modèle pour les objets. Grâce au mot clé de la classe, vous pouvez définir une classe. Mais les classes ne sont que du sucre syntaxique pour le motif orienté objet basé sur un prototype. Il y a des critiques mitigées sur l'introduction de la classe, et beaucoup de gens pensent que c'est un défaut majeur, mais pour moi, c'est un bon sucre de syntaxe, car la façon habituelle de hériter des chaînes de prototypes peut souvent m'enrouler pendant un certain temps.
// définir le point de classe de classe {constructeur (x, y) {this.x = x; this.y = y;} toString () {return '(' + this.x + ',' + this.y + ')';}} var p = new Point (1, 2);• Il existe une méthode de constructeur dans la classe, qui est la méthode par défaut de la classe. Cette méthode est automatiquement appelée lors de la génération d'une instance d'objet via la nouvelle commande. Une classe doit avoir une méthode de constructeur. S'il n'est pas défini explicitement, une méthode de constructeur vide sera ajoutée par défaut.
• Le mot clé dans la méthode du constructeur représente un objet d'instance.
• Lors de la définition de la méthode de «classe» (comme le toString dans l'exemple ci-dessus), vous n'avez pas besoin d'ajouter la fonction de mot-clé avant lui, il suffit de mettre la définition de la fonction.
• Lorsque vous l'utilisez, vous utilisez également la nouvelle commande directement sur la classe, ce qui est exactement la même que l'utilisation du constructeur.
• Toutes les méthodes d'une classe sont définies sur la propriété prototype de la classe
Héritage de la classe - étendre
L'héritage entre la classe peut être réalisé grâce à des mots clés étend, ce qui est beaucoup plus clair et plus pratique que l'héritage d'ES5 en modifiant la chaîne prototype.
Class ColorPoint étend Point {Constructor (x, y, couleur) {super (x, y); // appelle le constructeur (x, y) de la classe parent (x, y) this.color = couleur;} toString () {return this.color + '' + super.toString (); // appelle le toString () de la classe parent}}• Le mot-clé super, lorsqu'il est appelé en fonction (c'est-à-dire super (... args)), représente le constructeur de la classe parent; Lorsqu'il est appelé comme objet (c'est-à-dire super.prop ou super.method ()), représente la classe parent. Ici, il représente le constructeur de la classe parent et est utilisé pour créer cet objet de la classe parent.
• La sous-classe doit appeler la méthode Super dans la méthode du constructeur, sinon une erreur sera signalée lors de la création d'une nouvelle instance. En effet, la sous-classe n'a pas son propre objet, mais hérite de cet objet de la classe parent, puis le traite. Si la méthode Super n'est pas appelée, la sous-classe n'obtiendra pas cet objet.
Modulaire
Historiquement, JavaScript n'a jamais eu de système de modules, et il est impossible de diviser un grand programme en petits fichiers interdépendants, puis de les assembler de manière simple, ce qui a créé un énorme obstacle au développement de projets importants et complexes. Afin de s'adapter au développement de grands modules, la communauté a formulé certaines solutions de chargement de modules, telles que CMD et AMD.
Écriture modulaire d'ES6:
import {stat, existant, readFile} de 'fs';L'essence du code ci-dessus est de charger 3 méthodes du module FS, et les autres méthodes ne sont pas chargées. Ce type de chargement est appelé «chargement de temps de compilation», c'est-à-dire que ES6 peut terminer le chargement du module au moment de la compilation, ce qui est plus efficace que la méthode de chargement du module CommonJS. Bien sûr, cela conduit également à l'incapacité de référencer le module ES6 lui-même, car ce n'est pas un objet.
La fonction du module est principalement composée de deux commandes:
•exporter
L'interface externe utilisée pour spécifier le module et l'interface externe doivent établir une relation de correspondance individuelle avec les variables à l'intérieur du module.
// Méthode d'écriture Une exportation var m = 1; // Erreur Exportation 1; // Méthode d'écriture deux var m = 1; export {m}; // Erreur Export M; // Méthode d'écriture trois noms var n = 1; export {n comme m};•importer
Utilisé pour entrer les fonctions fournies par d'autres modules. Il accepte un objet (représenté en accolades) qui spécifie le nom de la variable à importer à partir d'autres modules (peut également être chargé en utilisant * au total)
Interpolation de cordes
Dans le développement de JavaScript, nous avons souvent besoin de sortir des modèles comme ceci:
Fonction Sayshello (name) {return "Bonjour, mon nom est" + Name + "I Am" + Getage (18);} Fonction Getage (Age) {return Age;} Sayhello ("Brand") // "Bonjour, mon nom est Brand I's 18"Nous devons utiliser + pour concaténer les chaînes et les variables (ou expressions). Les exemples sont relativement simples, donc ils semblent inoffensifs, mais une fois qu'ils sont plus compliqués, ils sembleront assez encombrants et gênants, et cette utilisation nous rend également ennuyeux. À cet égard, ES6 introduit des chaînes de modèle, qui peuvent facilement et gracieusement insérer les valeurs JS dans les chaînes.
Chaîne de modèle
Pour les chaînes de modèle, IT:
• Emballez avec des backtincs ``;
• Utilisez $ {} pour produire des valeurs;
• Le contenu dans $ {} peut être une expression JavaScript, donc les appels de fonction et les opérations arithmétiques sont légaux;
• Si une valeur n'est pas une chaîne, elle sera convertie en chaîne;
• Gardez tous les espaces, les nouvelles lignes et les retraits et les sortir dans la chaîne de résultat (les chaînes multiples peuvent être écrites)
• Utilisez des backtincs et des accolades en interne pour s'échapper et utilisez des barres réalisatrices /
Pour l'exemple ci-dessus, la chaîne de modèle est écrite comme suit:
Fonction Sayshello (name) {return `Bonjour, mon nom est $ {name} Je suis $ {getage (18)}`;} Fonction Getage (Age) {return Age;} Sayhello ("Brand") // "Bonjour, mon nom est Brandi Am 18"Mode strict
L'un des objectifs du mode strict est de permettre un débogage plus rapide des erreurs. La meilleure façon d'aider les développeurs à déboguer est de lancer des erreurs lorsque certains modèles se produisent au lieu d'échouer en silence ou de montrer un comportement étrange (se produisant souvent en mode non strict). Le code en mode strict lancera plus de messages d'erreur, ce qui peut aider les développeurs à remarquer rapidement certains problèmes qui doivent être résolus immédiatement. Dans ES5, le mode strict est facultatif, mais dans ES6, de nombreuses fonctionnalités nécessitent l'utilisation de mode strict, ce qui nous aide à écrire un meilleur javascript.
Ce qui précède est le problème "défaut" de JavaScript amélioré ES6 que l'éditeur vous a présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!