JavaScript は現(xiàn)代の Web 開発に不可欠な言語ですが、その高度な概念を習(xí)得すると、開発者として優(yōu)れた能力を発揮できます。このブログでは、重要な高度な JavaScript トピックを検討し、次の面接で優(yōu)れた成績を収めるために役立つ、面接の質(zhì)問と回答と例を提供します。

1.クロージャ

クロージャとは何ですか?
クロージャは、外側(cè)の関數(shù)が戻った後でも外側(cè)のスコープへのアクセスを保持する関數(shù)です。

例：

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

出力:

Outer Variable: Hello, Inner Variable: World

インタビューの質(zhì)問:
Q: クロージャは実際のシナリオでどのように使用できますか?
A: クロージャは、JavaScript でプライベート変數(shù)を?qū)g裝したり、非同期コールバックで狀態(tài)を維持したりするなど、データを隠すのに役立ちます。

2. Promise と Async/Await

約束とは何ですか?

約束は、現(xiàn)在、將來、または決して利用できない可能性のある値を表します。これらにより、非同期操作をより適切に処理できるようになります。

非同期/待機(jī)の例:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

出力:

Data fetched

インタビューの質(zhì)問:
Q: Promise.then() と async/await の違いは何ですか?
A: Promise.then() は Promise を処理するために使用されるメソッドですが、async/await は非同期コードを同期的に見せるための糖衣構(gòu)文を提供し、読みやすさを向上させます。

---

3.イベントループと同時実行モデル

イベント ループはどのように機(jī)能しますか?
イベント ループは、コールバックや非同期タスクなどの JavaScript コードの実行を処理します。

例:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

console.log("End");

出力:

Start
End
Timeout

インタビューの質(zhì)問:
Q: コールスタックとイベントループの違いを説明してください。
A: コール スタックは関數(shù)の実行を追跡し、スタックが空になるとイベント ループによってコールバックなどの非同期タスクが確実に実行されます。

---

4.プロトタイプと継承

JavaScript のプロトタイプとは何ですか?

プロトタイプを使用すると、オブジェクトは他のオブジェクトからプロパティとメソッドを継承できます。

例:

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

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
person1.greet();

出力:

Hello, my name is Alice

インタビューの質(zhì)問:
Q: プロトタイプ継承は古典的な継承とどのように異なりますか?
A: プロトタイプの継承は、他のオブジェクトから直接継承するオブジェクトに基づいていますが、古典的な継承はクラス階層に依存します。

---

5.カレー作り

カリー化とは何ですか？

カリー化は、複數(shù)の引數(shù)を持つ関數(shù)を、それぞれが 1 つの引數(shù)を取る一連の関數(shù)に変換します。

例：

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}, Inner Variable: ${innerVariable}`);
    };
}

const closureFunction = outerFunction("Hello");
closureFunction("World");

出力:

Outer Variable: Hello, Inner Variable: World

インタビューの質(zhì)問:
Q: JavaScript でカリー化を使用する理由は何ですか?
A: カリー化により部分的な適用が可能になり、コードの再利用性と可読性が向上します。

6.モジュールシステム

CommonJS 対 ES モジュール

• CommonJS: Node.js で使用され、モジュールは require() を使用して同期的にロードされます。
• ES モジュール: JavaScript にネイティブで、モジュールはインポートとエクスポートを使用して非同期的にロードされます。

例:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

getData();

インタビューの質(zhì)問:
Q: CommonJS ではなく ES モジュールを使用する利點(diǎn)は何ですか?
A: ES モジュールは、バンドル サイズを最適化するためのツリーシェイクをサポートしており、最新のブラウザでネイティブにサポートされています。

以上が高度な JavaScript をマスターする: 重要なトピックと面接の質(zhì)問の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。