Vous êtes bon en JavaScript si vous pouvez répondre correctement à ces questions

Pas de triche s'il vous plaît ?

Les concepts de ces questions sont ceux que j'ai rencontrés dans le code de production. Le but de ce quiz est de tester les connaissances JavaScript pertinentes et essentielles.

Q1 : Comprendre le contexte

Qu'est-ce qui sera enregistré sur la console ?

const user = {
  name: "Alice",
  isBanned: false,
  pricing: 'premium',
  isSubscribedTo: function(channel) {
    return channel === "JavaScript";
  },
  getName: function() {
    return this.name;
  },
  getStatus: function() {
    const status = () => {
      return `Name: ${this.getName()}, Banned: ${this.isBanned}`;
    };
    return status();
  }
};

const channel = "JavaScript";
const getName = user.getName;
const getStatus = user.getStatus;

console.log(user.getStatus());
console.log(getName());
console.log(getStatus());

Réponses :

• A) Nom : Alice, Interdit : faux, non défini, TypeError : Impossible de lire la propriété 'getName' de non défini
• B) Nom : Alice, Interdit : faux, non défini, Nom : non défini, Interdit : non défini
• C) Nom : Alice, Interdit : faux, non défini, Nom : Alice, Interdit : faux
• D) Nom : Alice, Interdit : faux, non défini, TypeError : this.getName n'est pas une fonction

T2 : Clôture

Qu'est-ce qui sera enregistré sur la console ?

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1();
counter1();
counter2();

Réponses :

• A) 1, 2, 3
• B) 1, 2, 1
• C) 1, 1, 1
• D) 1, 2, non défini

Q3 : JavaScript asynchrone

Qu'est-ce qui sera enregistré sur la console ?

console.log('Start');

setTimeout(() => console.log('Timeout 1'), 0);

Promise.resolve().then(() => console.log('Promise 1'));

setTimeout(() => console.log('Timeout 2'), 0);

Promise.resolve().then(() => console.log('Promise 2'));

console.log('End')

Réponses :

• A) Début, Fin, Délai d'attente 1, Délai d'attente 2, Promesse 1, Promesse 2
• B) Début, Fin, Promesse 1, Promesse 2, Timeout 1, Timeout 2
• C) Début, Promesse 1, Promesse 2, Délai d'attente 1, Délai d'attente 2, Fin
• D) Début, Timeout 1, Timeout 2, Promesse 1, Promesse 2, Fin

Q4 : Prototypes en JS

Qu'est-ce qui sera enregistré sur la console ?

function Animal(name) {
  this.name = name;
}

Dog.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype.constructor = Dog;

const dog = new Dog('Rex');
dog.speak();

console.log(dog instanceof Dog);
console.log(dog instanceof Animal);

• A) Rex fait un son., vrai, faux
• B) Rex fait un son., vrai, vrai
• C) Erreur : parler n'est pas une fonction
• D) Rex fait un son., faux, vrai

Q5 : paramètres par défaut

Qu'est-ce qui sera enregistré pour chaque appel ?

function displayUserInfo({ name = "Guest", role = "User" } = {}) {
  console.log(`Name: ${name}, Role: ${role}`);
}

displayUserInfo();
displayUserInfo({});
displayUserInfo({ name: "Alice" });
displayUserInfo(null);

Q6 : Fermeture et fonctions

Qu'est-ce qui sera enregistré sur la console ?

const funcs = [];
for (var i = 0; i < 3; i++) {
  funcs.push(function() {
    console.log(i);
  });
}

for (let j = 0; j < 3; j++) {
  funcs.push(function() {
    console.log(j);
  });
}

funcs.forEach(func => func());

Q7 : Gestion et propagation des événements

document.body.innerHTML = `
  <div id="outer">
    Outer
    <div id="middle">
      Middle
      <button id="inner">Inner</button>
    </div>
  </div>
`;

const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', () => console.log('Outer Bubble'), false);
outer.addEventListener('click', () => console.log('Outer Capture'), true);

middle.addEventListener('click', (e) => {
  console.log('Middle Bubble');
}, false);
middle.addEventListener('click', () => console.log('Middle Capture'), true);

inner.addEventListener('click', () => console.log('Inner Bubble'), false);
inner.addEventListener('click', (e) => {
  console.log('Inner Capture');
}, true);

inner.click();

• A) Capture intérieure, bulle intérieure, capture centrale, bulle centrale, capture extérieure, bulle extérieure
• B) Capture externe, capture centrale, capture intérieure, bulle intérieure, bulle centrale
• C) Bulle intérieure, bulle centrale, bulle extérieure
• D) Capture externe, capture centrale, capture intérieure, bulle intérieure, bulle centrale, bulle extérieure
• E) Capture externe, capture centrale, capture intérieure, bulle intérieure

Vous pouvez le vérifier vous-même en collant le code dans la console de l'outil de développement.

Solution Q1 :

La bonne réponse est B.

Explication : L'appel user.getStatus() enregistre "Nom : Alice, Banned : false" car l'état de la fonction fléchée y accède correctement dans sa portée englobante. Cependant, getName() enregistre un état non défini car il perd son contexte lorsqu'il est attribué à une variable autonome, ce qui conduit getStatus() à enregistrer également un état non défini pour name et isBanned.

Solution Q2 :

La bonne réponse est B.

Explication : counter1 et counter2 ont chacun leurs propres variables de comptage distinctes car chaque appel à createCounter() crée une nouvelle fermeture. Ainsi, counter1 enregistre 1 et 2 lors de ses deux premiers appels, et counter2 enregistre 1 lors de son premier appel.

Solution Q3 :

La bonne réponse est B.

Explication : Le fichier console.log synchrone appelle d'abord le journal "Début" et "Fin". Les promesses ont une priorité plus élevée que setTimeout dans la boucle d'événements, donc "Promise 1" et "Promise 2" sont ensuite enregistrées, suivies de "Timeout 1" et "Timeout 2".

Solution Q4 :

La bonne réponse est A.

Explication : Celui-ci est donc un peu délicat. La méthode speak est correctement définie sur Dog.prototype, dog est une instance de Dog.

Dans le constructeur Dog, cette ligne appelle le constructeur Animal avec le contexte this actuel et l'argument name. Cela définit effectivement la propriété name sur l'instance Dog nouvellement créée.

Disons maintenant que le code serait comme ceci :

// Code before...

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Code after...

Alors la bonne réponse serait B).

Remarque : si vous souhaitez le vérifier vous-même, vous devez le coller dans un navigateur (et non dans un LLM qui obtient une réponse incorrecte).

Solution Q5 :

Le résultat correct est :

• Nom : Invité, Rôle : Utilisateur
• Nom : Invité, Rôle : Utilisateur
• Nom : Alice, Rôle : Utilisateur
• TypeError : Impossible de déstructurer la propriété 'name' de 'null' car elle est nulle.

Solution Q6 :

Réponse : 3, 3, 3, 0, 1, 2

Explication : la première boucle utilise var, qui a une portée de fonction, donc toutes les fonctions de la première moitié du tableau se ferment sur le même i, qui est 3 à la fin de la boucle. La deuxième boucle utilise let, qui a une portée de bloc, donc chaque fonction de la seconde moitié se ferme sur une valeur j différente (0, 1, 2), ce qui donne la sortie : 3, 3, 3, 0, 1, 2.

Solution Q7 :

La bonne réponse est D.

Explication :

• L'événement commence en haut (racine du document) et descend jusqu'à l'élément cible pendant la phase de capture, déclenchant les écouteurs de capture (Capture externe, Capture intermédiaire, Capture interne).
• Une fois qu'il atteint la cible (bouton intérieur), il déclenche les auditeurs de la cible par ordre d'enregistrement (Inner Capture, puis Inner Bubble).
• Ensuite, cela bouillonne, déclenchant des écouteurs de bulles sur chaque ancêtre (Middle Bubble, Outer Bubble).

Cet exemple montre le cycle de vie complet d'un événement. Vous pouvez arrêter la propagation en appelant la fonction stopImmediatePropagation ou stopPropagation.

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!