
关于
每个开发者都应掌握的 33+ 个核心 JavaScript 概念,灵感来自 33-js-concepts。
name: javascript-mastery description: "每个开发者都应该掌握的 33+ 个核心 JavaScript 概念,灵感来自 33-js-concepts。" risk: unknown source: community date_added: "2026-02-27"
JavaScript 精通指南
每个开发者都应该掌握的 33+ 个核心 JavaScript 概念,灵感来自 33-js-concepts。
何时使用本技能
适用于以下场景:
- 解释 JavaScript 概念
- 调试棘手的 JS 行为
- 教授 JavaScript 基础知识
- 审查代码中的 JS 最佳实践
- 理解语言特性
1. 基础知识
1.1 原始类型
JavaScript 有 7 种原始类型:
// String
const str = "hello";
// Number (integers and floats)
const num = 42;
const float = 3.14;
// BigInt (for large integers)
const big = 9007199254740991n;
// Boolean
const bool = true;
// Undefined
let undef; // undefined
// Null
const empty = null;
// Symbol (unique identifiers)
const sym = Symbol("description");
要点:
- 原始类型是不可变的
- 按值传递
typeof null === "object"是一个历史遗留 bug
1.2 类型强制转换
JavaScript 会隐式转换类型:
// String coercion
"5" + 3; // "53" (number → string)
"5" - 3; // 2 (string → number)
// Boolean coercion
Boolean(""); // false
Boolean("hello"); // true
Boolean(0); // false
Boolean([]); // true (!)
// Equality coercion
"5" == 5; // true (coerces)
"5" === 5; // false (strict)
假值(共 8 个):
false、0、-0、0n、""、null、undefined、NaN
1.3 相等运算符
// == (loose equality) - coerces types
null == undefined; // true
"1" == 1; // true
// === (strict equality) - no coercion
null === undefined; // false
"1" === 1; // false
// Object.is() - handles edge cases
Object.is(NaN, NaN); // true (NaN === NaN is false!)
Object.is(-0, 0); // false (0 === -0 is true!)
规则:始终使用 ===,除非有特定理由不这样做。
2. 作用域与闭包
2.1 作用域类型
// Global scope
var globalVar = "global";
function outer() {
// Function scope
var functionVar = "function";
if (true) {
// Block scope (let/const only)
let blockVar = "block";
const alsoBlock = "block";
var notBlock = "function"; // var ignores blocks!
}
}
2.2 闭包
闭包是一个能记住其词法作用域的函数:
function createCounter() {
let count = 0; // "closed over" variable
return {
increment() {
return ++count;
},
decrement() {
return --count;
},
getCount() {
return count;
},
};
}
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount(); // 2
常见用例:
- 数据私有化(模块模式)
- 函数工厂
- 偏函数应用
- 记忆化
2.3 var vs let vs const
// var - function scoped, hoisted, can redeclare
var x = 1;
var x = 2; // OK
// let - block scoped, hoisted (TDZ), no redeclare
let y = 1;
// let y = 2; // Error!
// const - like let, but can't reassign
const z = 1;
// z = 2; // Error!
// BUT: const objects are mutable
const obj = { a: 1 };
obj.a = 2; // OK
obj.b = 3; // OK
3. 函数与执行
3.1 调用栈
function first() {
console.log("first start");
second();
console.log("first end");
}
function second() {
console.log("second");
}
first();
// Output:
// "first start"
// "second"
// "first end"
栈溢出示例:
function infinite() {
infinite(); // No base case!
}
infinite(); // RangeError: Maximum call stack size exceeded
3.2 变量提升
// Variable hoisting
console.log(a); // undefined (hoisted, not initialized)
var a = 5;
console.log(b); // ReferenceError (TDZ)
let b = 5;
// Function hoisting
sayHi(); // Works!
function sayHi() {
console.log("Hi!");
}
// Function expressions don't hoist
sayBye(); // TypeError
var sayBye = function () {
console.log("Bye!");
};
3.3 this 关键字
// Global context
console.log(this); // window (browser) or global (Node)
// Object method
const obj = {
name: "Alice",
greet() {
console.log(this.name); // "Alice"
},
};
// Arrow functions (lexical this)
const obj2 = {
name: "Bob",
greet: () => {
console.log(this.name); // undefined (inherits outer this)
},
};
// Explicit binding
function greet() {
console.log(this.name);
}
greet.call({ name: "Charlie" }); // "Charlie"
greet.apply({ name: "Diana" }); // "Diana"
const bound = greet.bind({ name: "Eve" });
bound(); // "Eve"
4. 事件循环与异步
4.1 事件循环
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
// Output: 1, 4, 3, 2
// Why? Microtasks (Promises) run before macrotasks (setTimeout)
兼容工具
Claude CodeCursor
标签
前端开发