JavaScript 基础核心知识点闯关练习

以下是一套针对 JavaScript 基础核心知识点 的闯关式练习题，难度从易到难递增，覆盖了绝大多数前端面试和日常开发中真正高频、容易出错的核心点。

建议你先自己写答案，再对照后面的参考答案和解析。
每关 5 题，共 5 关，全部做完基本能覆盖 JS 基础的 80%+ 核心内容。

---

第一关：基础语法 & 类型（入门）

1. 下面代码运行后会输出什么？

console.log(typeof null)
console.log(typeof [])
console.log(typeof (() => {}))

2. 下面哪个表达式的结果是 true？

A. "0" == false
B. [] == ![]
C. "" == 0
D. NaN === NaN
E. null === undefined

3. 下面代码的输出是什么？

let a = 1
let b = a
b = 2
console.log(a)

4. 下面代码会报错吗？为什么？

const obj = { name: "小明" }
obj.age = 18
console.log(obj)

5. let、const、var 三者的主要区别是什么？（至少说出 3 点）

---

第二关：作用域 & 闭包（中级）

6. 下面代码输出是什么？

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

7. 改成 let 后输出是什么？为什么？

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

8. 下面代码输出是什么？

function createCounter() {
  let count = 0
  return function() {
    return ++count
  }
}

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

console.log(counter1())  // ?
console.log(counter1())  // ?
console.log(counter2())  // ?

9. 下面这段代码中，inner 函数能访问哪些变量？

let global = "global"

function outer() {
  let a = "outer-a"
  return function inner(b) {
    let c = "inner-c"
    console.log(global, a, b, c)
  }
}

10. 实现一个简单的防抖函数（debounce），要求：连续触发时只执行最后一次。

---

第三关：this & 原型（进阶）

11. 下面代码输出是什么？

const obj = {
  name: "小红",
  say: function() {
    console.log(this.name)
  }
}

const say = obj.say
say()
obj.say()

12. 下面代码中 this 分别指向谁？

const person = {
  name: "张三",
  greet: function() {
    console.log(this.name)
  }
}

person.greet()                // 1
const greet = person.greet
greet()                       // 2
person.greet.call({ name: "李四" })   // 3

13. 下面代码输出什么？

function Animal(name) {
  this.name = name
}

Animal.prototype.speak = function() {
  console.log(this.name + " 叫了一声")
}

const dog = new Animal("旺财")
dog.speak()
console.log(dog.constructor === Animal)

14. 下面代码中 cat.__proto__ 指向谁？

function Cat() {}
Cat.prototype = { type: "猫科" }

const cat = new Cat()
console.log(cat.__proto__ === Cat.prototype)   // ?
console.log(cat.__proto__.__proto__ === Object.prototype)  // ?

15. 手写一个简易的 new 操作符实现（不用 class）

---

第四关：异步 & Promise（高频考点）

16. 下面代码的输出顺序是什么？

console.log(1)

setTimeout(() => {
  console.log(2)
}, 0)

Promise.resolve().then(() => {
  console.log(3)
})

console.log(4)

17. 下面代码输出什么？

async function async1() {
  console.log("async1 start")
  await async2()
  console.log("async1 end")
}

async function async2() {
  console.log("async2")
}

console.log("script start")
setTimeout(() => console.log("setTimeout"), 0)
async1()
new Promise(resolve => {
  resolve()
  console.log("promise1")
}).then(() => {
  console.log("promise2")
})
console.log("script end")

18. 下面代码会打印几次 “hello”？

const promise = new Promise((resolve) => {
  console.log("1")
  resolve("hello")
  console.log("2")
})

promise.then(res => {
  console.log(res)
})

promise.then(res => {
  console.log(res)
})

19. 实现一个 Promise.all 的简易版本（支持数组）
20. 下面代码中 fetchData 会返回什么？

async function fetchData() {
  try {
    const data = await Promise.reject("出错了")
    return "成功"
  } catch (err) {
    return "失败"
  }
}

fetchData().then(res => console.log(res))

---

第五关：综合 & 容易忽视的细节

21. == 与 === 的主要区别是什么？举 3 个 == 为 true 但 === 为 false 的例子。
22. 下面代码输出什么？

console.log(1 + "2" + "2")
console.log(1 + +"2" + "2")
console.log(1 + -"1" + "2")
console.log(+"")
console.log(+[])

23. 下面哪个选项能正确判断变量是否为数组？（多选）

A. arr instanceof Array
B. Array.isArray(arr)
C. arr.constructor === Array
D. Object.prototype.toString.call(arr) === "[object Array]"

24. 下面代码会发生什么？

let a = [1, 2, 3]
let b = a
b.push(4)
console.log(a)
a = [5, 6, 7]
console.log(b)

25. 说出至少 5 种 JavaScript 中 this 指向 undefined 或 window/globalThis 的常见场景。

---

做完后可以把你的答案贴上来，我会帮你批改 + 详细解析。

也可以告诉我你想先看哪一关的答案，或者直接说“我全做完了，求解析”。

准备好了吗？
开始闯关吧！🚀