如果你能正确回答这些问题，那么你的 JavaScript 水平还不错

请不要作弊？

这些问题中的概念是我在生产代码中遇到的概念。本测验的目标是测试相关且必要的 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中文网其他相关文章！