关键词：JavaScript、基础语法、面向对象、原型链、异步编程、回调函数、Promise、async/await
✅ 引言
JavaScript 是现代 Web 开发的核心语言，不仅用于前端交互，也广泛应用于后端（Node.js）、移动端（React Native）、桌面应用（Electron）等领域。掌握 JavaScript 的基础语法、面向对象机制和异步编程模型，是每一个前端开发者或全栈开发者必备的技能。
本文将围绕 JavaScript 的语言基础 进行系统讲解，涵盖：
- 基础语法（变量、数据类型、流程控制、函数）
- 面向对象与原型（对象、构造函数、原型链）
- 异步编程（回调函数、Promise、async/await）
并为每个小节提供完整的 可运行的 JavaScript 示例代码，帮助你打下扎实的 JS 基础。
📌 一、JavaScript 基础语法
1.1 变量与数据类型
javascript
// 使用 let 和 const 声明变量
let name = "Alice";
const age = 25;
// 基本数据类型
let isStudent = true; // 布尔值
let score = 95.5; // 数字
let message = "Hello World"; // 字符串
let user = null; // null
let value; // undefined1.2 条件判断与循环
javascript
// if 判断
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
// for 循环
for (let i = 0; i < 5; i++) {
console.log("当前数字是：" + i);
}
// while 循环
let count = 0;
while (count < 3) {
console.log("计数器：" + count);
count++;
}1.3 函数定义与调用
javascript
// 函数声明
function greet(name) {
return "你好，" + name + "！";
}
console.log(greet("张三")); // 输出：你好，张三！
// 函数表达式
const add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 输出：5
// 箭头函数
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 输出：20📌 二、面向对象与原型（OOP）
2.1 创建对象（字面量、构造函数）
javascript
// 对象字面量
let person = {
name: "李四",
age: 30,
sayHello: function() {
console.log("大家好，我叫" + this.name);
}
};
person.sayHello(); // 输出：大家好，我叫李四
// 构造函数
function Car(brand, color) {
this.brand = brand;
this.color = color;
this.start = function() {
console.log(this.brand + " 启动了");
};
}
let myCar = new Car("Tesla", "红色");
myCar.start(); // 输出：Tesla 启动了2.2 原型与原型链（Prototype）
javascript
// 使用原型添加方法
Car.prototype.stop = function() {
console.log(this.brand + " 停止了");
};
myCar.stop(); // 输出：Tesla 停止了
// 原型链继承
function ElectricCar(brand, color, battery) {
Car.call(this, brand, color); // 调用父类构造函数
this.battery = battery;
}
ElectricCar.prototype = Object.create(Car.prototype); // 继承父类原型
ElectricCar.prototype.constructor = ElectricCar;
ElectricCar.prototype.charge = function() {
console.log(this.brand + " 正在充电");
};
let myTesla = new ElectricCar("Tesla", "蓝色", "100kWh");
myTesla.start(); // Tesla 启动了
myTesla.charge(); // Tesla 正在充电2.3 ES6 类语法（class）
javascript
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} 发出声音`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log(`${this.name} 汪汪叫`);
}
}
let myDog = new Dog("旺财", "金毛");
myDog.speak(); // 旺财 发出声音
myDog.bark(); // 旺财 汪汪叫📌 三、异步编程（Asynchronous Programming）
3.1 回调函数（Callback）
javascript
function fetchData(callback) {
setTimeout(() => {
console.log("数据加载中...");
callback("数据加载完成");
}, 2000);
}
fetchData(function(result) {
console.log(result); // 2秒后输出：数据加载完成
});3.2 Promise（解决回调地狱）
javascript
function fetchDataPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("数据加载中...");
resolve("数据加载成功");
}, 2000);
});
}
fetchDataPromise()
.then(data => {
console.log(data); // 2秒后输出：数据加载成功
})
.catch(error => {
console.error(error);
});3.3 async/await（更优雅的异步写法）
javascript
async function getData() {
try {
let result = await fetchDataPromise();
console.log("最终结果：" + result);
} catch (error) {
console.error("发生错误：" + error);
}
}
getData(); // 输出：数据加载中... -> 最终结果：数据加载成功✅ 总结
| 特性 | 关键点 | 用途 |
|---|---|---|
| 基础语法 | 变量、函数、条件、循环 | 构建基本逻辑 |
| 面向对象 | 构造函数、原型、class | 创建可复用对象 |
| 原型链 | 继承机制 | 实现对象间共享方法 |
| 异步编程 | 回调、Promise、async/await | 处理耗时任务（如网络请求） |