90%前端面试必问的12个JS核心，搞懂这些直接起飞！
你是不是也遇到过这样的场景？面试官抛出一个闭包问题，你支支吾吾答不上来；团队代码review时，看到同事用的Promise链一脸懵逼；明明功能实现了，性能却总是差那么一点...
别慌！今天我整理了12个JavaScript核心概念，这些都是2024年各大厂面试的高频考点，也是日常开发中真正实用的硬核知识。搞懂它们，不仅能轻松应对面试，更能让你的代码质量提升一个档次！
变量与作用域
先来看个最常见的面试题：
// 经典面试题：猜猜输出什么？
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出：3 3 3
}, 100);
}
为什么会这样？因为var声明的变量存在变量提升，而且没有块级作用域。换成let就正常了：
// 使用let的正确写法
for (let i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出：0 1 2
}, 100);
}
这里涉及到两个关键概念：变量提升和块级作用域。let和const是ES6引入的，它们有块级作用域，不会出现var的那些奇怪问题。
闭包与内存管理
闭包可能是最让人头疼的概念了，但其实理解起来并不难：
// 闭包的实际应用：计数器
function createCounter() {
let count = 0; // 这个变量被"封闭"在函数内部
return {
increment: () => ++count,
decrement: () => --count,
getValue: () => count
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
闭包就是函数能够记住并访问其词法作用域中的变量，即使函数在其作用域外执行。但要注意内存泄漏问题：
// 潜在的内存泄漏
function createHeavyObject() {
const largeObject = new Array(1000000); // 大对象
return () => {
// 即使外部不再需要，largeObject仍然被引用
console.log('对象还在内存中');
};
}
机-会
技术大厂，前端-后端-测试，全国均有机-会，感兴趣可以试试。待遇和稳定性都还不错~
原型与继承
JavaScript的继承是基于原型的，这和传统的类继承很不一样：
// 原型链示例
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name); // 调用父类构造函数
}
// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
console.log(`${this.name} barks.`);
};
const dog = new Dog('Rex');
dog.speak(); // Rex barks.
ES6的class语法让这变得更简单：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
异步编程演进
从回调地狱到async/await，异步编程经历了很大变化：
// 1. 回调地狱
function oldWay(callback) {
readFile('file1.txt', (err, data1) => {
if (err) return callback(err);
processData(data1, (err, result1) => {
if (err) return callback(err);
// 更多嵌套...
});
});
}
// 2. Promise链
function promiseWay() {
return readFilePromise('file1.txt')
.then(processDataPromise)
.then(data => {
// 更清晰的流程
})
.catch(error => {
// 统一错误处理
});
}
// 3. async/await（推荐）
async function modernWay() {
try {
const data = await readFilePromise('file1.txt');
const result = await processDataPromise(data);
return result;
} catch (error) {
console.error('处理失败:', error);
}
}
Promise深度解析
Promise是现代JavaScript异步编程的基石：
// 手写一个简易Promise
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.onFulfilledCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach(cb => cb(value));
}
};
executor(resolve);
}
then(onFulfilled) {
return new MyPromise((resolve) => {
if (this.state === 'fulfilled') {
const result = onFulfilled(this.value);
resolve(result);
} else {
this.onFulfilledCallbacks.push((value) => {
const result = onFulfilled(value);
resolve(result);
});
}
});
}
}
事件循环机制
这是JavaScript并发模型的核心：
// 理解事件循环的执行顺序
console.log('1. 同步任务开始');
setTimeout(() => {
console.log('6. 宏任务执行');
}, 0);
Promise.resolve().then(() => {
console.log('4. 微任务执行');
});
console.log('2. 同步任务继续');
Promise.resolve().then(() => {
console.log('5. 另一个微任务');
});
console.log('3. 同步任务结束');
// 输出顺序：1 2 3 4 5 6
ES6+新特性实战
现代JavaScript提供了很多好用特性：
// 解构赋值
const user = { name: '小明', age: 25, city: '北京' };
const { name, age } = user;
// 扩展运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
// 可选链操作符
const street = user?.address?.street; // 不会报错
// 空值合并
const displayName = user.nickname ?? '匿名用户'; // 只有null/undefined时使用默认值
函数式编程概念
JavaScript很适合函数式编程风格：
// 高阶函数
const users = [
{ name: '小明', age: 25 },
{ name: '小红', age: 30 },
{ name: '小刚', age: 28 }
];
// 函数组合
const getAdultNames = users
.filter(user => user.age >= 18)
.map(user => user.name)
.sort();
// 柯里化
const multiply = a => b => a * b;
const double = multiply(2);
console.log(double(5)); // 10
模块化系统
从IIFE到ES Modules的演进：
// 现代ES Modules
// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;
// app.js
import { add, PI } from './math.js';
console.log(add(PI, 2)); // 5.14159
// 动态导入
const loadModule = async () => {
const module = await import('./math.js');
console.log(module.add(1, 2));
};
类型系统与TypeScript
虽然JavaScript是动态类型，但类型检查很重要：
// 类型检查工具函数
const typeCheck = {
isString: value => typeof value === 'string',
isFunction: value => typeof value === 'function',
isObject: value => value !== null && typeof value === 'object'
};
// TypeScript带来的类型安全
interface User {
name: string;
age: number;
email?: string;
}
function createUser(user: User): User {
// TypeScript会在编译时检查类型
return { ...user };
}
性能优化技巧
写出高性能的JavaScript代码：
// 防抖函数：避免频繁调用
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 使用Web Worker处理密集型任务
const worker = new Worker('heavy-task.js');
worker.postMessage({ data: largeData });
worker.onmessage = (event) => {
console.log('计算结果:', event.data);
};
现代开发工具链
2024年的前端开发离不开这些工具：
// Vite配置示例
// vite.config.js
export default {
plugins: [vue(), eslint()],
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router']
}
}
}
}
};
// 现代测试工具
import { describe, it, expect } from 'vitest';
describe('工具函数测试', () => {
it('应该正确计算加法', () => {
expect(add(1, 2)).toBe(3);
});
});
这12个核心概念就像JavaScript的基石，理解它们不仅能让你在面试中游刃有余，更能写出更健壮、更易维护的代码。
——转载自：Razy
#面试时最害怕被问到的问题##我发现了面试通关密码#
深信服公司福利 906人发布