First Round

1、What's the output? Why?

var b = 10;
(function b(){
    b = 20;
    console.log(b);
})();

The output is function b(){}. In this self-invoking function, b is declared as a function. Although b = 20 tries to reassign it, function names have higher priority in their scope. Thus, b still references the function, so console.log(b) outputs the functon itself.

2、Code Output Order Question

async function async1() {
  console.log('1');
  await async2();
  console.log('2');
}
 
async function async2() {
  console.log('3');
}
 
console.log('4');
 
setTimeout(() => console.log('5'), 0);  
 
async1();
 
new Promise((resolve) => {
    console.log('6');
    resolve();
  }).then(() => console.log('7'));
 
console.log('8');

Output order: 4 1 3 6 8 2 7 5 (execution logic: sync code first → microtasks (Promise.then) after current stack → macrotasks (setTimeout) last).

4、Principle of async/await

async/await is syntactic sugar for Promises. An async function returns a Promise. await pauses the function until the awaited Promise resolves (or rejects), unwrappping its value. It simplifies Promise chaining with a synchronous-like syntax.

5、Relationship & Differences: async/await, generator, promise

• Promise: Handles single async operations (non-blocking). Uses .then()/.catch() for chaining.
• Generator: Uses function* and yield to pause/resume execution. Requires manual iteration (e.g., via next()).
• async/await: Built on Promises, auto-iterates generators (no manual next()). More concise for sequential async tasks.

6、What is BFC? Which properties create BFC?

BFC (Block Formatting Context) is a rendering context that isolates internal layout from external elements. Properties creating BFC: overflow: hidden/auto/scroll, display: inline-block/flex/grid, float: left/right, position: absolute/fixed.

7、Explain position property: static behavior

• static: Default value. Elements follow normal document flow (no positioning). top/left/z-index have no effect. static elements are in the document flow.

8、Webpack: Principles, Plugin, Loader, Hot Update

• Principle: Bundles modules (dependencies) into static assets. Loaders transform files (e.g., babel-loader for JS). Plugins extend Webpack (e.g., HtmlWebpackPlugin). Hot Update (HMR) updates modules without full page reload.

9、Set and Map

• Set: Stores unique values (no duplicates). Methods: add(), delete(), has(), size.
• Map: Stores key-value pairs (keys can be any type). Methods: set(), get(), delete(), has(), size.

10、Vue keep-alive: Principle & Lifecycle

• keep-alive caches component instances (avoids re-rendering). Lifecycle hooks: activated (when cached component is reused), deactivated (when hiddan).

11、Vuex

• Vuex is a state management pattern for Vue. Core: state (centralized data), getters (derived state), mutations (sync changes), actions (async, commit mutations), modules (split large stores).