Loading...
Loading...
Compare original and translation side by side
// Declaration (hoisted)
function greet(name) { return `Hello, ${name}!`; }
// Expression (not hoisted)
const greet = function(name) { return `Hello, ${name}!`; };
// Arrow (lexical this)
const greet = (name) => `Hello, ${name}!`;
const greet = name => `Hello, ${name}!`; // Single param
const getUser = async (id) => await fetch(`/api/${id}`);// Declaration (hoisted)
function greet(name) { return `Hello, ${name}!`; }
// Expression (not hoisted)
const greet = function(name) { return `Hello, ${name}!`; };
// Arrow (lexical this)
const greet = (name) => `Hello, ${name}!`;
const greet = name => `Hello, ${name}!`; // Single param
const getUser = async (id) => await fetch(`/api/${id}`);Global Scope
└── Function Scope
└── Block Scope (let/const)const global = 'accessible everywhere';
function outer() {
const outerVar = 'accessible in outer + inner';
function inner() {
const innerVar = 'only accessible here';
console.log(global, outerVar, innerVar); // All work
}
}Global Scope
└── Function Scope
└── Block Scope (let/const)const global = 'accessible everywhere';
function outer() {
const outerVar = 'accessible in outer + inner';
function inner() {
const innerVar = 'only accessible here';
console.log(global, outerVar, innerVar); // All work
}
}function createCounter() {
let count = 0; // Private state
return {
increment: () => ++count,
decrement: () => --count,
get: () => count
};
}
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2function createCounter() {
let count = 0; // Private state
return {
increment: () => ++count,
decrement: () => --count,
get: () => count
};
}
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2| Context | |
|---|---|
| Global | |
| Object method | The object |
| Arrow function | Lexical (outer) |
| Explicit value |
Constructor ( | New instance |
// Explicit binding
fn.call(thisArg, arg1, arg2);
fn.apply(thisArg, [args]);
const bound = fn.bind(thisArg);| 上下文 | |
|---|---|
| 全局环境 | |
| 对象方法 | 该对象 |
| 箭头函数 | 词法(外部)上下文 |
| 显式指定的值 |
构造函数(使用 | 新实例 |
// Explicit binding
fn.call(thisArg, arg1, arg2);
fn.apply(thisArg, [args]);
const bound = fn.bind(thisArg);// IIFE (Immediately Invoked)
const module = (function() {
const private = 'hidden';
return { getPrivate: () => private };
})();
// Currying
const multiply = a => b => a * b;
const double = multiply(2);
double(5); // 10
// Memoization
function memoize(fn) {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (!cache.has(key)) cache.set(key, fn(...args));
return cache.get(key);
};
}// IIFE (Immediately Invoked)
const module = (function() {
const private = 'hidden';
return { getPrivate: () => private };
})();
// Currying
const multiply = a => b => a * b;
const double = multiply(2);
double(5); // 10
// Memoization
function memoize(fn) {
const cache = new Map();
return (...args) => {
const key = JSON.stringify(args);
if (!cache.has(key)) cache.set(key, fn(...args));
return cache.get(key);
};
}| Problem | Symptom | Fix |
|---|---|---|
Lost | | Use arrow fn or |
| Closure loop bug | All callbacks same value | Use |
| Hoisting confusion | Undefined before declaration | Declare at top |
| TDZ error | ReferenceError | Move |
| 问题 | 症状 | 修复方案 |
|---|---|---|
| | 使用箭头函数或 |
| 闭包循环Bug | 所有回调使用相同值 | 使用 |
| 变量提升混淆 | 声明前访问得到undefined | 在作用域顶部声明变量 |
| TDZ错误 | ReferenceError(引用错误) | 将 |
// BUG: var is function-scoped
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3
// FIX: Use let (block-scoped)
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2// BUG: var is function-scoped
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3
// FIX: Use let (block-scoped)
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2// 1. Check this context
console.log('this is:', this);
// 2. Verify closure captures
function test() {
let x = 1;
return () => { console.log('x:', x); };
}
// 3. Check hoisting
console.log(typeof myFunc); // 'function' or 'undefined'?// 1. Check this context
console.log('this is:', this);
// 2. Verify closure captures
function test() {
let x = 1;
return () => { console.log('x:', x); };
}
// 3. Check hoisting
console.log(typeof myFunc); // 'function' or 'undefined'?function createLogger(prefix) {
return {
log: (msg) => console.log(`[${prefix}] ${msg}`),
error: (msg) => console.error(`[${prefix}] ${msg}`)
};
}
const apiLogger = createLogger('API');
apiLogger.log('Request received');function createLogger(prefix) {
return {
log: (msg) => console.log(`[${prefix}] ${msg}`),
error: (msg) => console.error(`[${prefix}] ${msg}`)
};
}
const apiLogger = createLogger('API');
apiLogger.log('Request received');function debounce(fn, delay) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}function debounce(fn, delay) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}