如果你能正確回答這些問題，那麼你的 JavaScript 等級還不錯-js教程-PHP中文網

You’re Decent At JavaScript If You Can Answer These uestions Correctly

請不要作弊？

這些問題中的概念是我在生產程式碼中遇到的概念。本測驗的目標是測試相關且必要的 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) 名稱：Alice，禁止：false，未定義，TypeError：無法讀取未定義的屬性“getName”
B) 姓名：Alice，禁止：false，未定義，姓名：未定義，禁止：未定義
C) 姓名：Alice，禁止：false，未定義，姓名：Alice，禁止：false
D) 名稱：Alice，禁止：false，未定義，TypeError：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) 開始、結束、Promise 1、Promise 2、超時 1、超時 2
C) 開始、Promise 1、Promise 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) 錯誤：speak 不是函數
D) 雷克斯發出聲音。 , 假, 真

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() 呼叫記錄“Name: Alice, Banned: false”，因為箭頭函數狀態在其封閉範圍內正確存取了它。但是， getName() 會記錄 undefined，因為它在指派給獨立變數時會遺失 this 上下文，導致 getStatus() 也會記錄 name 和 isBanned 的 undefined。

解決方案Q2：

正確答案是B。

說明：counter1 和 counter2 都有自己獨立的計數變量，因為每次呼叫 createCounter() 都會建立一個新的閉包。因此，counter1 在其前兩次呼叫中記錄 1 和 2，而 counter2 在其第一次呼叫中記錄 1。

解決方案Q3：

正確答案是B。

說明：同步console.log先呼叫log「Start」與「End」。在事件循環中，Promise 的優先順序高於 setTimeout，因此接下來會記錄“Promise 1”和“Promise 2”，然後是“Timeout 1”和“Timeout 2”。

解決方案Q4：

正確答案是A。

說明：所以這個有點棘手。 talk 方法在 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：

正確的輸出是：

姓名：訪客，角色：使用者
姓名：訪客，角色：使用者
姓名：Alice，角色：使用者
類型錯誤：無法解構“null”的屬性“name”，因為它為 null。

解決方案Q6：

答案：3,3,3,0,1,2

解釋：第一個循環使用 var，它具有函數作用域，因此數組前半部分中的所有函數都以相同的 i 結束，循環結束時 i 為 3。第二個循環使用let，它具有區塊作用域，因此後半部中的每個函數都會在不同的j 值(0, 1, 2) 上關閉，從而產生輸出：3, 3, 3, 0, 1, 2.

解決方案Q7：

正確答案是D。

說明：

事件從頂部（文檔根）開始，在捕獲階段向下移動到目標元素，觸發捕獲監聽器（外部捕獲、中間捕獲、內部捕獲）。
一旦到達目標（內部按鈕），它就會按照註冊順序觸發目標的偵聽器（內部捕獲，然後內部氣泡）。
然後它冒泡，觸發每個祖先上的氣泡監聽器（中泡，外泡）。

此範例示範了事件的完整生命週期。您可以透過呼叫 stopImmediatePropagation 或 stopPropagation 函數來停止傳播。

以上是如果你能正確回答這些問題，那麼你的 JavaScript 等級還不錯的詳細內容。更多資訊請關注PHP中文網其他相關文章！