Compréhension approfondie du mode strict javascript (mode strict)_compétences javascript

Le mode strict introduit dans ECMAScript5 permet aux développeurs de disposer d'un « meilleur » langage JavaScript en permettant à l'environnement d'exécution JavaScript de gérer différemment certaines des erreurs les plus courantes et les plus difficiles à trouver dans le processus de développement. Pendant longtemps, j’ai été sceptique quant au mode strict puisque seul Firefox le supportait. Mais aujourd'hui, tous les principaux navigateurs prennent en charge le mode strict dans leurs dernières versions (y compris IE10, Opera12 et Android4, IOS5).

Quel rôle joue le mode strict ?

Le mode strict introduit de nombreux changements dans JavaScript, et je les divise en deux catégories (évidentes et subtiles). Le but des améliorations mineures est de résoudre certains problèmes détaillés du JavaScript actuel, que je n'aborderai pas en profondeur ici. Si vous êtes intéressé, veuillez lire l'excellent document ECMA-262-5 en détail, chapitre 2, mode strict, de Dmitry Soshnikov ; . Je vais me concentrer ici sur les changements évidents introduits par le mode strict, les concepts que vous devez connaître avant d'utiliser le mode strict et les changements qui vous aideront le plus.

Avant de commencer à apprendre des fonctionnalités spécifiques, n'oubliez pas que l'un des objectifs du mode strict est de vous permettre de déboguer plus rapidement et plus facilement. Il est préférable que l'environnement d'exécution génère explicitement une erreur lorsqu'il détecte un problème plutôt que d'échouer silencieusement ou de se comporter de manière étrange (comme c'est souvent le cas avec les environnements d'exécution JavaScript qui n'activent pas le mode strict). Le mode strict générera davantage d'erreurs, mais c'est une bonne chose, car ces erreurs attireront votre attention et résoudront de nombreux problèmes potentiels qui étaient auparavant difficiles à trouver.

Supprimer le mot-clé AVEC

Tout d'abord, l'instruction with est supprimée du mode strict. Le code contenant l'instruction with lèvera une exception en mode strict. Donc, la première étape pour utiliser le mode strict : assurez-vous de ne pas utiliser with dans votre code.

Copier le code Le code est le suivant :

// Le code JavaScript suivant générera une erreur en mode strict
avec (lieu) {
alerte(href);
>

Empêcher l'affectation accidentelle de variables globales

Deuxièmement, les variables locales doivent être déclarées avant d'attribuer une valeur. Avant que le mode strict ne soit activé, la copie d'une variable locale non déclarée créera automatiquement une variable globale du même nom. Il s'agit de l'une des erreurs les plus courantes dans les programmes Javascript, et une exception explicite sera levée lorsque vous tenterez de le faire en mode strict.

Copier le code Le code est le suivant :

// Une exception sera levée en mode strict
(fonction() {
SomeUndeclaredVar = "foo";
}());

CECI dans la fonction ne pointe plus vers le global par défaut

Un autre changement important en mode strict est que ceci dans une fonction indéfinie ou vide (nulle ou indéfinie) ne pointe plus vers l'environnement global (global) par défaut. Cela provoquera des erreurs dans l'exécution de certains codes qui reposent sur ce comportement par défaut dans les fonctions, telles que :

Copier le code Le code est le suivant :

window.color = "rouge";
fonction sayColor() {
alerte(this.color);
>
// Une erreur sera signalée en mode strict. Si ce n'est pas le cas, "red"
sera demandé. sayColor();
// Une erreur sera signalée en mode strict. Si ce n'est pas le cas, "red"
sera demandé. sayColor.call(null);

cela restera indéfini jusqu'à ce qu'il soit attribué, ce qui signifie que lorsqu'un constructeur est exécuté, s'il n'y a pas de nouveau mot-clé clair auparavant, une exception sera levée.

Copier le code Le code est le suivant :

fonction Personne (nom) {
This.name = nom;
>
//Une erreur sera signalée en mode strict
var moi = Personne("Nicolas");

Dans le code ci-dessus, lorsque le constructeur Person est exécuté, car il n'y a pas de nouveau avant, cela dans la fonction restera indéfini. Puisque vous ne pouvez pas définir de propriétés pour undefined, le code ci-dessus générera une erreur. Dans un environnement en mode non strict, ce qui n'est pas copié pointera par défaut vers la variable globale window, et le résultat de l'opération sera de définir accidentellement l'attribut name pour la variable globale window.

Empêcher les noms en double

Lors de l'écriture de beaucoup de code, il est facile de définir accidentellement les propriétés d'un objet et les paramètres de fonction sur un nom en double. Le mode strict générera explicitement une erreur dans ce cas

Copier le code Le code est le suivant :

//Les noms de variables en double signaleront une erreur en mode strict
function doSomething(value1, value2, value1) {
//code
>
//Les noms d'attributs d'objet en double signaleront une erreur en mode strict :
var objet = {
foo : "bar",
foo : "baz"
};

Le code ci-dessus sera considéré comme une erreur de syntaxe en mode strict et vous serez invité avant son exécution.

EVAL sécurisé()

Bien que l'instruction eval() n'ait finalement pas été supprimée, certaines améliorations y ont tout de même été apportées en mode strict. Le plus gros changement est que les déclarations de variables et de fonctions exécutées dans eval() ne créeront pas directement les variables ou fonctions correspondantes dans la portée actuelle, par exemple :

Copier le code Le code est le suivant :

(fonction() {
eval("var x = 10;");
// En mode non strict, alerte 10
// En mode strict, une exception est levée car x n'est pas défini,
alerte(x);
}());

Toutes les variables ou fonctions créées lors de l'exécution de eval() sont conservées dans eval(). Mais vous pouvez clairement obtenir le résultat de l'exécution dans eval() à partir de la valeur de retour de l'instruction eval(), par exemple :

Copier le code Le code est le suivant :

(fonction() {
var result = eval("var x = 10, y = 20; x y");
//Les instructions restantes peuvent être exécutées correctement en mode strict ou non strict (le résultat est 30)
. alerte(résultat);
}());

Exception levée lors de la modification des propriétés en lecture seule

ECMAScript5 introduit également la possibilité de définir des propriétés spécifiques d'un objet en lecture seule ou de rendre l'objet entier non modifiable. Mais en mode non strict, toute tentative de modification d'une propriété en lecture seule échouera silencieusement. Vous êtes susceptible de rencontrer cette situation lorsque vous utilisez certaines API natives du navigateur. Le mode strict lèvera explicitement une exception dans ce cas pour vous rappeler que la modification de cette propriété n'est pas autorisée.

Copier le code Le code est le suivant :

var personne = {};
Object.defineProperty(personne, "nom" {
inscriptible : faux,
Valeur : "Nicolas"
});
// En mode non strict, un échec silencieux se produit, en mode strict, une exception est levée
. personne.name = "John";

Dans l'exemple ci-dessus, l'attribut name est défini en lecture seule. La modification de l'attribut name en mode non strict ne provoquera pas d'erreur, mais la modification échouera. Mais le mode strict lèvera explicitement une exception.

REMARQUE : Il est fortement recommandé d'activer le mode strict lorsque vous utilisez une spécification d'attribut de propriété ECMAScript.

Comment utiliser ?

Il est très simple d'activer le mode strict dans les navigateurs modernes, il suffit de saisir la commande suivante dans le code JavaScript

"utiliser strict";

Bien qu'il semble que le code ci-dessus ne soit qu'une chaîne qui n'est pas affectée à une variable, il demande en fait au moteur JavaScript de passer en mode strict (les navigateurs qui ne prennent pas en charge le mode strict ignoreront le code ci-dessus et ne le feront pas). impact sur l'exécution ultérieure). Bien que vous puissiez appliquer cette directive globalement ou dans une certaine fonction, il faut quand même vous rappeler de ne pas activer le mode strict dans l'environnement global.

Copier le code Le code est le suivant :

// S'il vous plaît, ne l'utilisez pas comme ça
"utiliser strict";
fonction faireQuelquechose() {
// Cette partie du code s'exécutera en mode strict
>
fonction doSomethingElse() {
// Cette partie du code s'exécutera également en mode strict
>

Bien que le code ci-dessus ne semble pas être un gros problème. Mais lorsque vous n'êtes pas responsable de la maintenance de tout le code introduit dans la page, utiliser le mode strict de cette manière vous exposera à des problèmes causés par du code tiers qui n'est pas préparé pour le mode strict.

Il est donc préférable d'appliquer l'instruction pour activer le mode strict dans la fonction, par exemple :

Copier le code Le code est le suivant :

fonction faireQuelquechose() {
"utiliser strict";
//Le code de cette fonction s'exécutera en mode strict
>
fonction doSomethingElse() {
//Le code de cette fonction ne s'exécutera pas en mode strict
>

Si vous souhaitez que le mode strict soit activé dans plusieurs fonctions, utilisez une expression de fonction immédiatement invoquée (IIFE) :

Copier le code Le code est le suivant :

(fonction() {
"utiliser strict";
Fonction doSomething() {
                // Cette fonction s'exécute en mode strict
>
Fonction doSomethingElse() {
               // Cette fonction s'exécute également en mode strict
>
}());

Conclusion

Je vous recommande fortement d'activer désormais le mode strict JavaScript, cela peut vous aider à trouver des erreurs inaperçues dans votre code. Ne l'activez pas globalement, mais vous pouvez utiliser IIFE (exécution immédiate d'expressions de fonction) autant que possible pour appliquer le mode strict à plusieurs étendues de fonctions. Au début, vous rencontrerez des messages d’erreur que vous n’avez jamais rencontrés auparavant. C’est normal. Lorsque vous activez le mode strict, assurez-vous de tester dans les navigateurs pris en charge pour identifier de nouveaux problèmes potentiels. Ne vous contentez pas d'ajouter une ligne "use strict" à votre code et de supposer que le reste du code fonctionnera. Enfin, commencez à écrire un meilleur code en mode strict.

Remarque :
Voici un résumé de la prise en charge du mode strict dans différents navigateurs.
Vous pouvez tester la prise en charge du mode strict du navigateur actuel sur cette page.

Avantages du mode strict :

Rendre JavaScript plus fort
1. Celui-ci n'est plus encapsulé. En mode normal, il s'agit toujours d'un objet.
2. Fun.caller et fun.arguments ne sont pas des attributs qui peuvent être supprimés, ni définis ou récupérés.
3. Arguments.caller est également un attribut qui ne peut pas être supprimé, ni défini ou récupéré.

Ouvre la voie aux futures versions d'ECMAScript
1. Les mots réservés suivants ont été ajoutés : implémente, interface, let, package, privé, protégé, public, statique et rendement.
2. La déclaration de méthode doit être placée au début du script ou de la méthode, et non au milieu d'instructions telles que if ou for.