Sie beherrschen JavaScript, wenn Sie diese Fragen richtig beantworten können

Kein Betrug bitte?

Die Konzepte in diesen Fragen sind diejenigen, die mir im Produktionscode begegnet sind. Ziel dieses Quiz ist es, relevante und wesentliche JavaScript-Kenntnisse zu testen.

F1: Kontext verstehen

Was wird auf der Konsole protokolliert?

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());

Antworten:

• A) Name: Alice, Verboten: false, undefiniert, TypeError: Die Eigenschaft „getName“ von undefiniert kann nicht gelesen werden
• B) Name: Alice, Verboten: falsch, undefiniert, Name: undefiniert, Verboten: undefiniert
• C) Name: Alice, Verboten: falsch, undefiniert, Name: Alice, Verboten: falsch
• D) Name: Alice, Banned: false, undefiniert, TypeError: this.getName ist keine Funktion

F2: Schließung

Was wird auf der Konsole protokolliert?

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

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

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

Antworten:

• A) 1, 2, 3
• B) 1, 2, 1
• C) 1, 1, 1
• D) 1, 2, undefiniert

F3: Asynchrones JavaScript

Was wird auf der Konsole protokolliert?

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')

Antworten:

• A) Start, Ende, Timeout 1, Timeout 2, Versprechen 1, Versprechen 2
• B) Start, Ende, Versprechen 1, Versprechen 2, Timeout 1, Timeout 2
• C) Start, Versprechen 1, Versprechen 2, Timeout 1, Timeout 2, Ende
• D) Start, Timeout 1, Timeout 2, Versprechen 1, Versprechen 2, Ende

F4: Prototypen in JS

Was wird auf der Konsole protokolliert?

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 macht ein Geräusch., wahr, falsch
• B) Rex macht ein Geräusch., wahr, wahr
• C) Fehler: Sprechen ist keine Funktion
• D) Rex macht ein Geräusch., falsch, wahr

F5: Standardparameter

Was wird für jeden Anruf protokolliert?

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

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

F6: Verschluss und Funktionen

Was wird auf der Konsole protokolliert?

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());

F7: Ereignisbehandlung und -weitergabe

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) Inner Capture, Inner Bubble, Middle Capture, Middle Bubble, Outer Capture, Outer Bubble
• B) Äußeres Einfangen, mittleres Einfangen, inneres Einfangen, innere Blase, mittlere Blase
• C) Innere Blase, mittlere Blase, äußere Blase
• D) Äußeres Einfangen, mittleres Einfangen, inneres Einfangen, innere Blase, mittlere Blase, äußere Blase
• E) Äußeres Einfangen, Mittleres Einfangen, Inneres Einfangen, Innere Blase

Sie können dies selbst überprüfen, indem Sie den Code in die Konsole des Entwicklungstools einfügen.

Lösung Q1:

Die richtige Antwort ist B.

Erklärung: Der user.getStatus()-Aufruf protokolliert „Name: Alice, Banned: false“, weil der Pfeilfunktionsstatus innerhalb seines umschließenden Bereichs korrekt darauf zugreift. GetName() protokolliert jedoch undefiniert, da es seinen Kontext „this“ verliert, wenn es einer eigenständigen Variablen zugewiesen wird, was dazu führt, dass getStatus() auch für „name“ und „isBanned“ undefiniert protokolliert.

Lösung Q2:

Die richtige Antwort ist B.

Erklärung: counter1 und counter2 haben jeweils ihre eigenen separaten Zählvariablen, da jeder Aufruf von createCounter() einen neuen Abschluss erstellt. Daher protokolliert Zähler1 bei seinen ersten beiden Aufrufen 1 und 2 und Zähler2 protokolliert bei seinem ersten Aufruf 1.

Lösung Q3:

Die richtige Antwort ist B.

Erklärung: Das synchrone console.log ruft zuerst log „Start“ und „End“ auf. Versprechen haben in der Ereignisschleife eine höhere Priorität als setTimeout, daher werden als nächstes „Versprechen 1“ und „Versprechen 2“ protokolliert, gefolgt von „Timeout 1“ und „Timeout 2“.

Lösung Q4:

Die richtige Antwort ist A.

Erklärung: Das ist also etwas knifflig. Die Speak-Methode ist auf Dog.prototype korrekt definiert, dog ist eine Instanz von Dog.

Im Dog-Konstruktor ruft diese Zeile den Animal-Konstruktor mit dem aktuellen this-Kontext und dem Namensargument auf. Dadurch wird effektiv die Namenseigenschaft für die neu erstellte Dog-Instanz festgelegt.

Nehmen wir an, der Code würde so aussehen:

// Code before...

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

// Code after...

Dann wäre die richtige Antwort B).

Randbemerkung: Wenn Sie es selbst überprüfen möchten, müssen Sie es in einen Browser einfügen (und nicht in ein LLM, das die Antwort falsch erhält).

Lösung F5:

Die korrekte Ausgabe lautet:

• Name: Gast, Rolle: Benutzer
• Name: Gast, Rolle: Benutzer
• Name: Alice, Rolle: Benutzer
• TypeError: Die Eigenschaft „Name“ von „Null“ kann nicht zerstört werden, da sie null ist.

Lösung F6:

Antwort: 3, 3, 3, 0, 1, 2

Erklärung: Die erste Schleife verwendet var, das einen Funktionsumfang hat, sodass alle Funktionen in der ersten Hälfte des Arrays über dasselbe i geschlossen werden, das am Ende der Schleife 3 ist. Die zweite Schleife verwendet let, das einen Blockbereich hat, sodass jede Funktion in der zweiten Hälfte über einem anderen j-Wert (0, 1, 2) geschlossen wird, was zur Ausgabe führt: 3, 3, 3, 0, 1, 2.

Lösung F7:

Die richtige Antwort ist D.

Erklärung:

• Das Ereignis beginnt oben (Dokumentstamm) und bewegt sich während der Erfassungsphase nach unten zum Zielelement, wodurch Erfassungs-Listener ausgelöst werden (äußere Erfassung, mittlere Erfassung, innere Erfassung).
• Sobald es das Ziel erreicht (innere Schaltfläche), löst es die Zuhörer des Ziels in der Reihenfolge ihrer Registrierung aus (Inner Capture, dann Inner Bubble).
• Dann sprudelt es auf und löst bei jedem Vorfahren Blasen-Listener aus (mittlere Blase, äußere Blase).

Dieses Beispiel zeigt den gesamten Lebenszyklus eines Ereignisses. Sie können die Weitergabe stoppen, indem Sie stopImmediatePropagation oder die Funktion stopPropagation aufrufen.

Das obige ist der detaillierte Inhalt vonSie beherrschen JavaScript, wenn Sie diese Fragen richtig beantworten können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!