Menyahkod Bahagian Pelik JavaScript Setiap Pembangun Patut Tahu

JavaScript, bahasa yang kita suka (atau suka membenci), dipenuhi dengan gelagat unik dan keanehan yang menjadikannya hebat dan membingungkan. Walaupun "bahagian aneh" ini boleh mengelirukan pemula, menguasainya adalah penting untuk menjadi pembangun yang mahir. Mari kita selami beberapa keanehan JavaScript yang menarik yang setiap pembangun harus tahu.

---

1. Paksaan: Penyihir Rahsia JavaScript

JavaScript cuba membantu dengan menukar nilai antara jenis, tetapi "kebergunaan" ini boleh membawa kepada hasil yang mengejutkan.

Contoh: Matematik Tidak Dijangka

console.log('5' - 3);  // 2
console.log('5' + 3);  // '53'

• Penolakan: JavaScript menukar '5' kepada nombor sebelum menolak.
• Tambahan: Apabila rentetan terlibat, JavaScript bergabung dan bukannya menambah.

Mengapa Ia Penting

• Penukaran tersirat (paksaan jenis) ini boleh memperkenalkan pepijat jika anda tidak berhati-hati.
• Sentiasa gunakan penukaran eksplisit dengan Number(), String(), atau Boolean() untuk mengelakkan kejutan.

---

2. Misteri ini

Tingkah laku ini dalam JavaScript sering mengelirukan kerana ia berubah bergantung pada bagaimana fungsi dipanggil.

Contoh: Konteks Berbeza

function showThis() {
  console.log(this);
}

showThis();  // Window or undefined in strict mode

const obj = { method: showThis };
obj.method();  // obj

const boundFunc = showThis.bind(obj);
boundFunc();  // obj

Mengapa Ia Penting

• ini tidak ditetapkan pada masa pengisytiharan; ia bergantung pada tapak panggilan.
• Fungsi anak panah tidak mempunyai fungsinya sendiri, menjadikannya sempurna untuk mengekalkan konteks leksikal.

---

3. Gelung Peristiwa: Asynchronous JavaScript Demystified

JavaScript adalah satu benang tetapi boleh mengendalikan tugas tak segerak melalui gelung acara.

Contoh: Apa Yang Dimulakan?

console.log('Start');

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

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

console.log('End');

Output

Start
End
Promise
Timeout

• Kod segerak dijalankan dahulu.
• Janji (tugas mikro) diutamakan berbanding setTimeout (tugas makro).

Mengapa Ia Penting

Memahami gelung acara adalah kunci untuk menulis kod tak segerak berprestasi.

---

4. Penutup: Fungsi Yang Mengingati

Penutupan ialah apabila fungsi "mengingat" skop leksikalnya walaupun selepas fungsi luar telah kembali.

Contoh: Pembolehubah Peribadi

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

const increment = counter();
increment();  // 1
increment();  // 2

Mengapa Ia Penting

Penutupan membolehkan anda membuat pembolehubah peribadi dan mengekalkan keadaan merentas panggilan fungsi.

---

5. Prototaip: Tulang Belakang JavaScript

JavaScript menggunakan warisan berasaskan prototaip, bermakna objek boleh mewarisi sifat dan kaedah daripada objek lain.

Contoh: Kaedah Tersuai

console.log('5' - 3);  // 2
console.log('5' + 3);  // '53'

Mengapa Ia Penting

Prototaip membolehkan anda berkongsi kaedah merentas kejadian dengan cekap.

---

6. Pemeriksaan Kesaksamaan: == vs ===

JavaScript menyediakan kedua-dua kesamaan longgar (==) dan kesamaan ketat (===), dan mereka berkelakuan berbeza.

Contoh: Kes Pelik Null dan Undefined

function showThis() {
  console.log(this);
}

showThis();  // Window or undefined in strict mode

const obj = { method: showThis };
obj.method();  // obj

const boundFunc = showThis.bind(obj);
boundFunc();  // obj

• == melakukan penukaran jenis, jadi null adalah sama dengan tidak ditentukan.
• === menyemak kesamaan jenis dan nilai.

Mengapa Ia Penting

Sentiasa gunakan === melainkan anda memerlukan penukaran jenis secara eksplisit.
Elakkan membandingkan nilai bukan primitif secara langsung ({} !== {}).

---

7. Kebolehubahan dan Jenis Rujukan

JavaScript memperlakukan objek dan tatasusunan sebagai jenis rujukan, bermakna perubahan pada rujukan mempengaruhi asal.

Contoh: Menyalin Perangkap

console.log('Start');

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

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

console.log('End');

Mengapa Ia Penting

• Gunakan Object.assign() atau operator spread ({ ...original }) untuk membuat salinan cetek.
• Untuk salinan dalam, pertimbangkan perpustakaan seperti Lodash atau structuredClone.

---

8. NaN: Tidak Semudah Yang Disangkakan

NaN bermaksud "Bukan Nombor", tetapi tingkah lakunya tidak jelas.

Contoh: Membandingkan NaN

Start
End
Promise
Timeout

Mengapa Ia Penting

Gunakan Object.is apabila anda memerlukan kesetaraan yang ketat untuk kes khas seperti NaN.

---

9. Mengangkat: Apa yang Diisytiharkan Pertama?

Hoisting mengalihkan pembolehubah dan pengisytiharan fungsi ke bahagian atas skopnya.

Contoh: Pembolehubah Mengangkat

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

const increment = counter();
increment();  // 1
increment();  // 2

• pengisytiharan var dinaikkan tetapi dimulakan sebagai tidak ditentukan.
• Pengisytiharan fungsi dinaikkan sepenuhnya.

Mengapa Ia Penting

Gunakan let dan const untuk mengelakkan kekeliruan angkat berubah-ubah.

---

10. Lalai Pelik: Parameter Lalai

Parameter lalai menjadikan fungsi lebih fleksibel tetapi boleh berkelakuan aneh apabila digabungkan dengan undefined.

Contoh: Lalai dan Argumen

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

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

const alice = new Person('Alice');
alice.greet();  // Hello, my name is Alice

Mengapa Ia Penting

Parameter lalai hanya digunakan jika hujah tidak ditentukan, bukan batal.

---

Kesimpulan: Merangkul Keanehan

Keanehan JavaScript menjadikannya mengecewakan dan menyeronokkan. Memahami gelagat ini bukan sahaja menjadikan anda pembangun yang lebih baik tetapi juga membantu anda menghargai fleksibiliti bahasa dan pilihan reka bentuk.

Manakah antara kebiasaan ini yang pernah anda temui, dan bagaimana anda mengatasinya? Kongsi pendapat anda dalam komen di bawah!

Atas ialah kandungan terperinci Menyahkod Bahagian Pelik JavaScript Setiap Pembangun Patut Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!