Compilation de points de connaissances JavaScript

JavaScript est conçu et implémenté conformément à la norme ECMAScript. La syntaxe JavaScript mentionnée plus loin est en fait l'implémentation de la norme ES5.
Tout d’abord, quelles sont les grammaires de base ?

Quelles sont les grammaires les plus basiques ?

La syntaxe de base de presque tous les langages a peu de différence, rien de plus que des types de données, des opérateurs, des instructions de contrôle, des fonctions, etc., voici une brève liste.

5 types de données de base et 1 type de données complexe

JavaScript contient 5 types de données de base Les données les types sont indéfinis / null / booléen / nombre / chaîne Ce sont les cinq types de données de base, et il n'y en a pas d'autres !
JavaScript contient 1 type de données complexe, qui est le type Objet. Le type Objet est la classe de base de tous les autres objets.
Remarque : JavaScript ne fait pas de distinction entre les nombres à virgule flottante et les nombres entiers, les deux sont représentés par des nombres.

Les 5 types de données de base mentionnés précédemment, et le 1 type de données complexe ici, ce sont tous les types de données !

Opérateurs de base

C'est du bon sens, il suffit de savoir ce qui se passe.
Les opérateurs couramment utilisés incluent : les opérateurs arithmétiques, les opérateurs relationnels, les opérateurs booléens, les opérateurs d'affectation, etc.

Instruction de contrôle

C'est ce que nous appelons souvent if-else et d'autres instructions de contrôle.
Il n'y en a pas beaucoup qui sont couramment utilisés : instruction if, instruction switch, instruction for, instruction while, instruction for-in.

Fonction

Une fonction est une encapsulation d'un petit morceau de logique. En théorie, plus la logique est indépendante, mieux c'est.
Les fonctions JavaScript sont très différentes des autres langages. Les fonctions JavaScript peuvent prendre à la fois des paramètres et des valeurs de retour.
De plus, les fonctions JavaScript peuvent accepter n'importe quel nombre de paramètres, et ces paramètres sont accessibles via l'objet arguments.

La syntaxe de base de n'importe quel langage est la même, à l'exception de quelques différences dans les détails, il s'agit à peu près de la même chose : types de données, opérateurs, instructions de contrôle, fonctions, modules, etc.

Ce qui suit présente quelques concepts légèrement plus complexes.

Variables, portée, problèmes de mémoire

Variables

Les variables JavaScript sont divisées en deux types : Types de base et types de référence. Les types de base sont les cinq types de données de base mentionnés précédemment, et les types de référence sont l'objet mentionné précédemment et d'autres types de données complexes basés sur celui-ci.
✦ Type de base : occupe la taille réelle de l'espace dans la mémoire. Lors de l'attribution d'une valeur, une nouvelle copie sera créée dans la mémoire. Enregistré dans la mémoire de la pile.
✦ Type de référence : un pointeur vers un objet plutôt que l'objet lui-même. Lors de l'attribution d'une valeur, un nouveau pointeur est simplement créé pour pointer vers l'objet. Enregistré dans la mémoire tas.

Allocation de mémoire variable

En un mot, le type de base est la valeur réelle en mémoire tandis que le type de référence est un pointeur en mémoire, pointant vers un objet, plusieurs types de référence peuvent pointer vers le même objet en même temps.

Alors, comment déterminer le type de données d'une certaine variable ?
Pour déterminer le type de base d'une variable, utilisez l'opérateur typeof.
Pour déterminer le type de référence d'une variable, utilisez l'opérateur instanceof.
N’oubliez pas ça !

Portée

Les variables sont déclarées dans une portée spécifique, et la portée les détermine La durée de vie des variables et quoi le code peut accéder aux variables qu’ils contiennent.
La portée JavaScript inclut uniquement la portée globale et la portée des fonctions, et n'inclut pas la portée au niveau du bloc !

Les scopes peuvent être imbriqués pour former une chaîne de scopes. En raison de l'existence de la chaîne de portée, la recherche de variables peut être retracée vers le haut, c'est-à-dire que la fonction enfant peut accéder à la portée de la fonction parent => à la portée de la fonction ancêtre => jusqu'à la portée globale. La fonction est également appelée fermeture, sera présentée plus tard.

var color = "blue"; function changeColor() { var anotherColor = "red"; function swapColors() { var tempColor = anotherColor;
anotherColor = color;
color = tempColor; / Color, anotherColor, tempColor est accessible ici
} // Color, anotherColor est accessible ici, mais tempColor
n'est pas accessible swapColors();
}// Uniquement color, changeColor();

Comme le montre la figure ci-dessous, les variables accessibles à chaque scope et scopes imbriqués peuvent être retracées vers le haut.

Chaîne de portée

Le concept de portée semble simple, mais il existe de nombreux problèmes en utilisation réelle. Si vous rencontrez des problèmes, vous devez les analyser attentivement.

Problèmes de mémoire

Le moteur JavaScript dispose d'un mécanisme automatique de collecte des ordures et n'a pas besoin d'y prêter trop d'attention aux problèmes d'allocation de mémoire et de garbage collection. Je ne m'étendrai pas là-dessus ici !

Type de référence

Comme mentionné précédemment, Object est le seul type de données complexe et les types de référence sont dérivés de Le type d'objet est hérité.
✦ Array : Type de tableau
✦ Date : Type de date
✦ RegExp : Type d'expression régulière, il y a des avantages à en savoir plus à ce sujet !
✦ Attendez...
La question est : quel type de données est la fonction la plus couramment utilisée ? La réponse est Type de fonction !
Hé, il me semble avoir découvert quelque chose ? Puisque Function est un type référence, JavaScript peut ajouter des propriétés et des méthodes aux types référence. Eh bien, les fonctions aussi ! C'est là que les fonctions JavaScript deviennent puissantes et complexes. C’est-à-dire : les fonctions peuvent également avoir des méthodes et des propriétés personnalisées !

De plus, JavaScript encapsule également trois des cinq types de base mentionnés ci-dessus avec des types de référence, à savoir Boolean, Number et String. Cependant, ils ne sont pas beaucoup utilisés, il vous suffit donc de les comprendre.

Au fait, avant que tout le code ne soit exécuté, deux objets sont intégrés dans la portée, à savoir Global et Math. Le Global du navigateur est la fenêtre !

Jusqu'à présent, les concepts de base de JavaScript ont été introduits. Les fonctions et les portées sont relativement complexes, tandis que d'autres sont relativement simples.
Ensuite, je présenterai quelques concepts un peu plus complexes en JavaScript : orienté objet.

Programmation orientée objet

JavaScript lui-même n'a pas le concept de classes et d'interfaces. s'appuie sur des prototypes réalisés.
Par souci de simplicité, nous analysons uniquement deux problèmes orientés objet :
✦ Comment définir une classe ?
✦ Comment implémenter l'héritage de classe

Définir une classe

Je vais vous le dire directement sans parler d'autre chose. Nous utilisons un prototype de constructeur pour définir une classe.

Utilisez le constructeur pour créer un type personnalisé, puis utilisez l'opérateur new pour créer une instance de la classe. Cependant, les méthodes et propriétés du constructeur existent dans chaque exemple et ne peuvent pas être partagées, nous les présentons donc. prototypes à mettre en œuvre Partage de méthodes et de propriétés.

Prototype

Enfin, nous définissons les méthodes et propriétés qui doivent être partagées sur le prototype, et mettons les méthodes et propriétés spécifiques à l'instance dans le constructeur. À ce stade, nous avons défini une classe via le prototype du constructeur.

//Constructeur function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"];

}// Prototype Person.prototype = {
constructeur : Personne,
sayName: function() { return this.name;
}
}// Instancier var person1 = new Person ("Nicholas", 29, "Ingénieur logiciel");var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");
alert (person1.friends); falsealert(person1.sayName === person2.sayName); //Sortie true

Implémenter l'héritage

L'article précédent expliquait comment définir une classe, puis nous définissons une classe parent et une sous-classe.
Comment faire en sorte qu'une sous-classe hérite d'une classe parent ? Sans plus attendre, je vous le dis directement. JavaScript implémente l'héritage via la chaîne de prototypes !
Comment construire un prototype de chaîne ? Attribuez simplement l’instance de classe parent au prototype du constructeur de classe enfant. C’est déroutant, mais il faut s’en souvenir !

Héritage de la chaîne de prototypes

Après avoir construit la chaîne de prototypes, la sous-classe peut accéder à toutes les propriétés et méthodes du parent classe !

// Fonction de classe parent SuperType() { this.property = true;
}
SuperType.prototype.getSuperValue = function() { return this.property;
};// Subclass function SubType() { this.subproperty = false;
}//La sous-classe hérite de la classe parent SubType.prototype = new SuperType();//Ajoute une nouvelle méthode à la sous-classe SubType.prototype.getSubValue = function( ) { return this.subproperty;
};//Remplacez la méthode de la classe parent SubType.prototype.getSuperValue = function() { return false;
};//Instantiate var instance = new SubType();console . log(instance.getSuperValue()); //Output false

Les connaissances orientées objet peuvent être écrites dans un livre. Voici juste une brève introduction aux concepts les plus élémentaires et les plus couramment utilisés.

Expression de fonction

Il existe deux manières de définir des fonctions en JavaScript : la déclaration de fonction et l'expression de fonction.
L'utilisation d'expressions de fonction élimine le besoin de nommer la fonction, réalisant ainsi une programmation dynamique, c'est-à-dire des fonctions anonymes. Avec les fonctions anonymes, les fonctions JavaScript ont des utilisations plus puissantes.

Récursion

La récursion est un algorithme très courant, l'exemple classique est factoriel. Sans parler d'autre chose, parlons simplement de la meilleure pratique de récursion. Le code ci-dessus :

// Meilleure pratique, expression de fonction var factorial = (function f(num) { if (num <= 1) { return 1;
} else { return num * f(num - 1);
}
});// Inconvénients : // la factorielle peut être modifiée // résultant en return num * factorial( num - 1) error function factorial(num) { if (num <= 1) { return 1;
} else { return num * factorial(num - 1);
}
}// Inconvénients : // arguments.callee, la spécification a déconseillé l'utilisation de function factorial(num) { if (num <= 1) { return 1;
} else { return num * arguments.callee(num - 1);
>
}

La récursion est comme ça. De nombreuses personnes utilisent encore la méthode arguments.callee. Remplacez-la par la méthode d'expression de fonction.

Eh bien, beaucoup de gens pensent que la récursivité est difficile à écrire. En fait, cela deviendra beaucoup plus clair si vous la divisez en deux étapes.
✦ Conditions aux limites, généralement si-sinon.
✦ Appel récursif.
Suivez ce mode, entraînez-vous avec quelques récursions classiques, et vous vous familiariserez avec elles.

Fermeture

Beaucoup de gens pensent souvent que les fermetures sont compliquées et qu'il est facile de tomber dans les fosses, mais ce n'est pas le cas.

Alors, qu’est-ce qu’une fermeture ? Si une fonction peut accéder à des variables dans la portée d’une autre fonction, alors la première est une fermeture. Étant donné que les fonctions JavaScript peuvent renvoyer des fonctions, une manière courante de créer des fermetures consiste naturellement à créer une autre fonction à l'intérieur d'une fonction !
Il n'y a rien de magique à cela. Définir une fonction enfant dans une fonction parent crée une fermeture, et la fonction enfant peut accéder à la portée de la fonction parent.
Nous sommes généralement effrayés par les fermetures parce qu'elles nous trompent, surtout lorsqu'il y a beaucoup de fermetures dans les questions d'entretien.

La définition de la fermeture a déjà été évoquée, et comment créer une fermeture a également été évoquée. Parlons donc des défauts de fermeture et comment les résoudre ?

/* Nous renvoyons le tableau de fonctions via subFuncs, puis appelons l'exécution séparément */// Renvoyons le tableau de subFuncs de la fonction, et ces fonctions ont des références aux variables de superFunc // C'est une fermeture typique / / Alors, quel est le problème du drap de laine ? // Lorsque nous revenons en arrière et exécutons la fonction dans subFuncs, le i que nous obtenons est en fait toujours 10. Pourquoi ? // Parce que lorsque nous renvoyons subFuncs, i=10 dans superFunc // Ainsi, lorsque la fonction dans subFuncs est exécutée, la sortie i est 10. // // Ce qui précède est le plus gros piège des fermetures. Pour le comprendre en une phrase : // La référence de la sous-fonction à la variable de la fonction parent est l'état de la variable une fois que la fonction parent a fini d'exécuter la fonction superFunc(). { var subFuncs = new Array( ); for (var i = 0; i < 10; i ) {
subFuncs[i] = function() { return i;
} };
} return subFuncs;
}// Alors, comment résoudre le gouffre de clôture de l'appel ? // En fait, le principe est très simple. Puisque l'essence de la fosse de fermeture est la suivante : la référence de la fonction enfant à la variable de la fonction parent est l'état de la variable une fois l'exécution de la fonction parent terminée. // Ensuite, la façon dont nous résolvons ce problème est le suivant : la fonction enfant fait référence à la fonction parent Référence de variable, utilisez l'état d'exécution // Comment faire cela ? //Sur la base de l'expression de la fonction, ajoutez simplement l'auto-exécution. function superFunc() { var subFuncs = new Array(); for (var i = 0; i < 10; i ) {
subFuncs[i] = function(num) { return function() { return num;
             };
                     (i);
En raison de la particularité des fonctions JavaScript, nous pouvons renvoyer des fonctions. Si nous renvoyons une fonction comme fermeture, alors la variable de fonction parent référencée par la fonction est l'état après la fin de l'exécution de la fonction parent, et non l'état au moment de l'exécution. C’est le plus gros écueil des fermetures. Afin de résoudre cet écueil, notre méthode habituelle consiste à rendre les expressions de fonction auto-exécutables.
De plus, comme les fermetures font référence à la portée des fonctions ancêtres, il y aura des problèmes de mémoire en cas d'abus des fermetures.

Il s'agit principalement d'encapsulation...

Encapsulation

Les fermetures peuvent encapsuler des variables privées ou encapsuler des étendues au niveau du bloc.

JavaScript n'a pas le concept de portée au niveau du bloc, seulement la portée globale et la portée de la fonction. Donc, si nous voulons créer une portée au niveau du bloc, nous pouvons la simuler par fermeture.
Créer et appeler immédiatement une fonction encapsule une portée au niveau du bloc. Cette fonction peut exécuter le code immédiatement et les variables internes seront détruites immédiatement après l'exécution.

function outputNumbers(count) { // Dans la portée de la fonction, utilisez la fermeture pour encapsuler la portée au niveau du bloc
// Dans ce cas, i n'est pas disponible en externe et il y aura un bloc similaire -level scope
(function() { for (var i = 0; i < count; i ) {
alert(i);

})();

alert (i); //Provoquer une erreur ! }//Dans la portée globale, utilisez des fermetures pour encapsuler la portée au niveau du bloc//De cette façon, le bloc de code ne polluera pas la portée globale (fonction() { var now = new Date(); if (now.getMonth() == 0 && now.getDate() == 1) {
alert("Bonne année !");
}
})() ;// Oui, le cœur de la portée de l'encapsulation au niveau du bloc est le suivant : les expressions de fonction s'exécutent automatiquement ! (function() { //Il s'agit de la portée au niveau du bloc})();


➙ Encapsuler des variables privées
JavaScript n'a pas le concept de variables privées, nous pouvons également utiliser des fermetures pour y parvenir, les méthodes publiques encapsulent les variables privées en masquant les variables et en exposant les méthodes.

(function() { //Variables privées et fonctions privées

} } //Constructeur
MyObject = function() {}; //Méthode publique/privilégiée

privateVariable; return privateFunction();
};
})();


Que pouvez-vous dire en conclusion ?

Il s'agit presque d'une syntaxe de base et d'une utilisation légèrement plus avancée de JavaScript. En fait, les soi-disant avancés sont des manifestations de JavaScript « immature », en particulier orienté objet, pour les besoins d'ingénierie, mais JavaScript lui-même n'est pas un support parfait. Heureusement, la dernière norme ES6 a résolu de nombreux problèmes, et vous n'avez pas à vous soucier trop des problèmes de compatibilité lorsque vous l'utilisez avec Babel. Si vous êtes novice, je vous suggère d'accéder directement à ES6 Babel.

✦ La base de JavaScript comprend principalement : 5 types de données de base, 1 type de données complexe, des opérateurs, des instructions de contrôle, des fonctions, etc.
✦ Après avoir compris la syntaxe de base, vous devez également apprendre les variables, les portées et les chaînes de portées JavaScript.
✦ Les types de référence courants peuvent être vérifiés et utilisés en même temps. En tant que personne qui l'a expérimenté, je vous suggère d'apprendre plus de règles, ce qui améliorera considérablement vos compétences en codage.
✦ Il existe de nombreuses façons de faire de la programmation orientée objet. Il vous suffit de penser à utiliser le constructeur et le prototype pour définir une classe, et d'utiliser la chaîne de prototypes pour implémenter l'héritage. Pour plus d’extensions, allez lire le livre.
✦ Les expressions de fonction mènent à plusieurs choses intéressantes : la récursivité, la fermeture et l'encapsulation. N'oubliez pas les meilleures pratiques de récursivité, la définition et les pièges de la fermeture, ainsi que les scénarios de fermeture applicables.

En tant que langage dynamique, JavaScript est assez différent des autres langages, ce qui rend également difficile l'apprentissage de JavaScript pour de nombreuses personnes. Mais si vous regardez maintenant l'article précédent, bien qu'il s'agisse d'un bref résumé, il s'agit du contenu principal de JavaScript, alors n'ayez pas peur.
Encore une chose, si vous êtes débutant, je vous suggère d'aller directement sur ES6 Babel.

Pour plus de points de connaissances JavaScript et d'articles connexes, veuillez faire attention au site Web PHP chinois !