これらの質問に正しく答えることができれば、あなたは JavaScript の上級者です

不正行為はしないでください?

これらの質問の概念は、私が製品コードで遭遇したものです。このクイズの目的は、関連性のある必須の JavaScript 知識をテストすることです。

Q1: コンテキストを理解する

コンソールには何が記録されますか?

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

答え:

• A) 名前: アリス、禁止: false、未定義、タイプエラー: 未定義のプロパティ 'getName' を読み取れません
• B) 名前: アリス、禁止: false、未定義、名前: 未定義、禁止: 未定義
• C) 名前: アリス、禁止: false、未定義、名前: アリス、禁止: false
• D) 名前: アリス、禁止: false、未定義、タイプエラー: this.getName は関数ではありません

---

Q2: 終了

コンソールには何が記録されますか?

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

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

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

答え:

• A) 1、2、3
• B) 1、2、1
• C) 1、1、1
• D) 1、2、未定義

---

Q3: 非同期 JavaScript

コンソールには何が記録されますか?

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

答え:

• A) 開始、終了、タイムアウト 1、タイムアウト 2、約束 1、約束 2
• B) 開始、終了、約束 1、約束 2、タイムアウト 1、タイムアウト 2
• C) 開始、約束 1、約束 2、タイムアウト 1、タイムアウト 2、終了
• D) 開始、タイムアウト 1、タイムアウト 2、約束 1、約束 2、終了

---

Q4: JS のプロトタイプ

コンソールには何が記録されますか?

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) レックスが音を出す。、true、false
• B) レックスが音を出す、本当、本当
• C) エラー: speech は関数ではありません
• D) レックスが音を出す、false、true

---

Q5: デフォルトのパラメータ

各通話について何が記録されますか?

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

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

---

Q6: 開閉と機能

コンソールには何が記録されますか?

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: イベントの処理と伝播

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) インナーキャプチャ、インナーバブル、ミドルキャプチャ、ミドルバブル、アウターキャプチャ、アウターバブル
• B) アウターキャプチャー、ミドルキャプチャー、インナーキャプチャー、インナーバブル、ミドルバブル
• C) インナーバブル、ミドルバブル、アウターバブル
• D) アウターキャプチャ、ミドルキャプチャ、インナーキャプチャ、インナーバブル、ミドルバブル、アウターバブル
• E) アウターキャプチャー、ミドルキャプチャー、インナーキャプチャー、インナーバブル

---

開発ツールのコンソールにコードを貼り付けることで、これを自分で確認できます。

解決策 Q1:

正解は B です。

説明: user.getStatus() 呼び出しは、「名前: アリス、禁止: false」をログに記録します。これは、アロー関数のステータスが、それを囲んでいるスコープ内でこれに正しくアクセスしているためです。ただし、getName() は、スタンドアロン変数に割り当てられると this コンテキストが失われるため、未定義をログに記録します。そのため、getStatus() も、name と isBanned の両方についても未定義を記録します。

解決策 Q2:

正解は B です。

説明: createCounter() を呼び出すたびに新しいクロージャが作成されるため、counter1 と counter2 にはそれぞれ独自の個別のカウント変数があります。したがって、counter1 は最初の 2 回の呼び出しで 1 と 2 を記録し、counter2 は最初の呼び出しで 1 を記録します。

解決策 Q3:

正解は B です。

説明: 同期 console.log は、最初にログ「Start」と「End」を呼び出します。イベント ループでは Promise の優先順位が setTimeout よりも高いため、次に「Promise 1」と「Promise 2」が記録され、次に「Timeout 1」と「Timeout 2」が記録されます。

解決策 Q4:

正解は A です。

説明: つまり、これは少し注意が必要です。 speech メソッドは Dog.prototype で正しく定義されており、dog は Dog のインスタンスです。

Dog コンストラクター内で、この行は現在の this コンテキストと name 引数を使用して Animal コンストラクターを呼び出します。これにより、新しく作成された Dog インスタンスの name プロパティが効果的に設定されます。

ここで、コードが次のようになるとしましょう:

// Code before...

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

// Code after...

その場合、正しい答えは B) になります。

補足: 自分で検証したい場合は、ブラウザに貼り付ける必要があります (間違った答えが得られる LLM ではありません)。

解決策 Q5:

正しい出力は次のとおりです:

• 名前: ゲスト、役割: ユーザー
• 名前: ゲスト、役割: ユーザー
• 名前: アリス、役割: ユーザー
• TypeError: 'null' のプロパティ 'name' は null であるため、構造化できません。

解決策 Q6:

答え: 3、3、3、0、1、2

説明: 最初のループは関数スコープを持つ var を使用するため、配列の前半のすべての関数は同じ i (ループの終わりまでに 3) 上で閉じます。 2 番目のループでは、ブロック スコープを持つ let を使用するため、後半の各関数は異なる j 値 (0、1、2) で閉じられ、出力は 3、3、3、0、1、2 になります。

解決策 Q7:

正解は D です。

説明:

• イベントは先頭 (ドキュメント ルート) から始まり、キャプチャ フェーズ中にターゲット要素まで下に移動し、キャプチャ リスナー (外部キャプチャ、中間キャプチャ、内部キャプチャ) をトリガーします。
• ターゲット (内側のボタン) に到達すると、登録順にターゲットのリスナーをトリガーします (インナー キャプチャ、次にインナー バブル)。
• その後、バブルが発生し、各祖先 (Middle Bubble、Outer Bubble) でバブル リスナーをトリガーします。

この例は、イベントの完全なライフサイクルを示しています。 stopImmediatePropagation または stopPropagation 関数を呼び出すことで伝播を停止できます。

以上がこれらの質問に正しく答えることができれば、あなたは JavaScript の上級者ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。