Anda Layak Menggunakan JavaScript Jika Anda Boleh Menjawab uestions Ini dengan Betul

Tolong jangan menipu ?

Konsep dalam soalan ini adalah yang saya temui dalam kod pengeluaran. Matlamat kuiz ini adalah untuk menguji pengetahuan JavaScript yang relevan dan penting.

S1: Fahami Konteks

Apakah yang akan dilog ke konsol?

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

Jawapan:

• A) Nama: Alice, Diharamkan: false, undefined, TypeError: Tidak boleh membaca 'getName' sifat undefined
• B) Nama: Alice, Diharamkan: palsu, tidak ditentukan, Nama: tidak ditentukan, Diharamkan: tidak ditentukan
• C) Nama: Alice, Diharamkan: palsu, tidak ditentukan, Nama: Alice, Diharamkan: palsu
• D) Nama: Alice, Diharamkan: palsu, tidak ditentukan, TypeError: this.getName bukan fungsi

---

S2: Penutupan

Apakah yang akan dilog ke konsol?

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

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

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

Jawapan:

• A) 1, 2, 3
• B) 1, 2, 1
• C) 1, 1, 1
• D) 1, 2, tidak ditentukan

---

S3: JavaScript tak segerak

Apakah yang akan dilog ke konsol?

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

Jawapan:

• A) Mula, Tamat, Tamat Masa 1, Tamat Masa 2, Janji 1, Janji 2
• B) Mula, Tamat, Janji 1, Janji 2, Tamat Masa 1, Tamat Masa 2
• C) Mula, Janji 1, Janji 2, Tamat Masa 1, Tamat Masa 2, Tamat
• D) Mula, Tamat Masa 1, Tamat Masa 2, Janji 1, Janji 2, Tamat

---

S4: Prototaip dalam JS

Apakah yang akan dilog ke konsol?

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 mengeluarkan bunyi., benar, salah
• B) Rex mengeluarkan bunyi., benar, benar
• C) Ralat: bercakap bukan fungsi
• D) Rex mengeluarkan bunyi., palsu, benar

---

S5: Param lalai

Apakah yang akan dilog untuk setiap panggilan?

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

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

---

S6: Penutupan dan fungsi

Apakah yang akan dilog ke konsol?

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

---

S7: Pengendalian dan Penyebaran Acara

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) Tangkapan Dalam, Buih Dalam, Tangkap Tengah, Buih Tengah, Tangkap Luar, Buih Luar
• B) Tangkapan Luar, Tangkapan Tengah, Tangkapan Dalam, Buih Dalam, Buih Tengah
• C) Gelembung Dalam, Gelembung Tengah, Gelembung Luar
• D) Tangkapan Luar, Tangkapan Tengah, Tangkapan Dalam, Buih Dalam, Buih Tengah, Buih Luar
• E) Tangkapan Luar, Tangkapan Tengah, Tangkapan Dalam, Buih Dalam

---

Anda boleh mengesahkan ini sendiri dengan menampal kod ke dalam konsol alat pembangun.

Penyelesaian S1:

Jawapan yang betul ialah B.

Penjelasan: log panggilan user.getStatus() "Nama: Alice, Diharamkan: palsu" kerana status fungsi anak panah mengakses ini dengan betul dalam skop lampirannya. Walau bagaimanapun, getName() log undefined kerana ia kehilangan konteks ini apabila ditugaskan kepada pembolehubah kendiri, membawa kepada getStatus() juga log undefined untuk kedua-dua nama dan isBanned.

Penyelesaian S2:

Jawapan yang betul ialah B.

Penjelasan: counter1 dan counter2 masing-masing mempunyai pembolehubah kiraan tersendiri kerana setiap panggilan untuk createCounter() mencipta penutupan baharu. Oleh itu, kaunter1 mencatatkan 1 dan 2 pada dua panggilan pertamanya, dan kaunter2 mencatatkan 1 pada panggilan pertamanya.

Penyelesaian S3:

Jawapan yang betul ialah B.

Penjelasan: Console.log segerak memanggil log "Mula" dan "Tamat" dahulu. Promise mempunyai keutamaan yang lebih tinggi daripada setTimeout dalam gelung acara, jadi "Promise 1" dan "Promise 2" dilog seterusnya, diikuti dengan "Timeout 1" dan "Timeout 2".

Penyelesaian S4:

Jawapan yang betul ialah A.

Penjelasan: Jadi yang ini agak rumit. Kaedah bercakap ditakrifkan dengan betul pada Dog.prototype, anjing ialah contoh Anjing.

Di dalam pembina Anjing, baris ini memanggil pembina Haiwan dengan konteks semasa ini dan hujah nama. Ini secara berkesan menetapkan sifat nama pada tika Anjing yang baru dibuat.

Sekarang katakan kodnya seperti ini:

// Code before...

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

// Code after...

Maka jawapan yang betul ialah B).

Nota sampingan: Jika anda ingin mengesahkannya sendiri, anda perlu menampalnya ke dalam penyemak imbas (dan bukan LLM yang mendapat jawapan dengan salah).

Penyelesaian S5:

Output yang betul ialah:

• Nama: Tetamu, Peranan: Pengguna
• Nama: Tetamu, Peranan: Pengguna
• Nama: Alice, Peranan: Pengguna
• TypeError: Tidak boleh memusnahkan 'nama' sifat 'null' kerana ia adalah null.

Penyelesaian S6:

Jawapan: 3, 3, 3, 0, 1, 2

Penjelasan: Gelung pertama menggunakan var, yang mempunyai skop fungsi, jadi semua fungsi dalam separuh pertama tatasusunan menutup pada i yang sama, iaitu 3 pada penghujung gelung. Gelung kedua menggunakan let, yang mempunyai skop blok, jadi setiap fungsi pada separuh kedua ditutup pada nilai j yang berbeza (0, 1, 2), menghasilkan output: 3, 3, 3, 0, 1, 2.

Penyelesaian S7:

Jawapan yang betul ialah D.

Penjelasan:

• Acara bermula di bahagian atas (akar dokumen) dan bergerak ke bawah ke elemen sasaran semasa fasa tangkapan, mencetuskan pendengar tangkapan (Tangkapan Luar, Tangkapan Tengah, Tangkapan Dalam).
• Apabila ia mencapai sasaran (butang dalam), ia mencetuskan pendengar sasaran mengikut urutan pendaftaran (Tangkapan Dalam, kemudian Buih Dalam).
• Kemudian ia menggelembung, mencetuskan pendengar gelembung pada setiap nenek moyang (Gelembung Tengah, Gelembung Luar).

Contoh ini menunjukkan kitaran hayat penuh peristiwa. Anda boleh menghentikan penyebaran dengan memanggil fungsi stopImmediatePropagation atau stopPropagation.

Atas ialah kandungan terperinci Anda Layak Menggunakan JavaScript Jika Anda Boleh Menjawab uestions Ini dengan Betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!