Menguasai JavaScript Lanjutan: Topik Utama dan Soalan Temuduga

JavaScript ialah bahasa penting untuk pembangunan web moden, tetapi menguasai konsep lanjutannya boleh membezakan anda sebagai pembangun. Dalam blog ini, kami akan meneroka topik JavaScript lanjutan utama dan menyediakan soalan temu bual dengan jawapan serta contoh untuk membantu anda cemerlang dalam temu duga anda yang seterusnya.

1. Penutupan

Apakah itu penutupan?
Penutupan ialah fungsi yang mengekalkan akses kepada skop luarnya walaupun selepas fungsi luar telah kembali.

Contoh:

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

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

Output:

Outer Variable: Hello, Inner Variable: World

Soalan Temu Bual:
S: Bagaimanakah penutupan boleh digunakan dalam senario praktikal?
J: Penutupan berguna untuk menyembunyikan data, seperti melaksanakan pembolehubah peribadi dalam JavaScript atau mengekalkan keadaan dalam panggilan balik tak segerak.

2. Janji dan Async/Menunggu

Apa itu Janji?

Janji mewakili nilai yang mungkin tersedia sekarang, pada masa hadapan, atau tidak sama sekali. Mereka membenarkan pengendalian operasi tak segerak dengan lebih baik.

Contoh dengan Async/Await:

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

Output:

Data fetched

Soalan Temu Bual:
S: Apakah perbezaan antara Promise.then() dan async/waiit?
J: Promise.then() ialah kaedah yang digunakan untuk mengendalikan janji, manakala async/wait menyediakan gula sintaktik untuk menjadikan kod tak segerak kelihatan segerak, meningkatkan kebolehbacaan.

---

3. Gelung Acara dan Model Keselarasan

Bagaimana Gelung Acara berfungsi?
Gelung Acara mengendalikan pelaksanaan kod JavaScript, termasuk panggilan balik dan tugas tak segerak.

Contoh:

console.log("Start");

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

console.log("End");

Output:

Start
End
Timeout

Soalan Temu Bual:
S: Terangkan perbezaan antara tindanan panggilan dan gelung peristiwa.
J: Tindanan panggilan menjejaki pelaksanaan fungsi, manakala gelung peristiwa memastikan tugas tak segerak, seperti panggil balik, dilaksanakan sebaik tindanan kosong.

---

4. Prototaip dan Warisan

Apakah prototaip dalam JavaScript?

Prototaip membenarkan objek mewarisi sifat dan kaedah daripada objek lain.

Contoh:

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

Output:

Hello, my name is Alice

Soalan Temu Bual:
S: Bagaimanakah warisan prototaip berbeza daripada warisan klasik?
J: Warisan prototaip adalah berdasarkan objek yang diwarisi terus daripada objek lain, manakala warisan klasik bergantung pada hierarki kelas.

---

5. Karipap

Apa itu kari?

Kari mengubah fungsi dengan berbilang argumen menjadi urutan fungsi, masing-masing mengambil satu argumen.

Contoh:

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

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

Output:

Outer Variable: Hello, Inner Variable: World

Soalan Temu Bual:
S: Mengapa menggunakan karipap dalam JavaScript?
J: Currying mendayakan aplikasi separa, yang boleh meningkatkan kebolehgunaan semula dan kebolehbacaan kod.

6. Sistem Modul

Modul CommonJS lwn. ES

• CommonJS: Digunakan dalam Node.js, modul dimuatkan secara serentak menggunakan require().
• Modul ES: Asli kepada JavaScript, modul dimuatkan secara tidak segerak menggunakan import dan eksport.

Contoh:

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

Soalan Temu Bual:
S: Apakah faedah menggunakan Modul ES berbanding CommonJS?
J: Modul ES menyokong gegaran pokok untuk mengoptimumkan saiz berkas dan disokong secara asli dalam penyemak imbas moden.

Atas ialah kandungan terperinci Menguasai JavaScript Lanjutan: Topik Utama dan Soalan Temuduga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!