当前位置：首页 > news >正文

JavaScript 语言基础详解

news 2025/7/21 12:34:28

关键词：JavaScript、基础语法、面向对象、原型链、异步编程、回调函数、Promise、async/await

✅ 引言

JavaScript 是现代 Web 开发的核心语言，不仅用于前端交互，也广泛应用于后端（Node.js）、移动端（React Native）、桌面应用（Electron）等领域。掌握 JavaScript 的基础语法、面向对象机制和异步编程模型，是每一个前端开发者或全栈开发者必备的技能。

本文将围绕 JavaScript 的语言基础 进行系统讲解，涵盖：

基础语法（变量、数据类型、流程控制、函数）
面向对象与原型（对象、构造函数、原型链）
异步编程（回调函数、Promise、async/await）

并为每个小节提供完整的 可运行的 JavaScript 示例代码，帮助你打下扎实的 JS 基础。

📌 一、JavaScript 基础语法

1.1 变量与数据类型

// 使用 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;                    // undefined

1.2 条件判断与循环

// 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 函数定义与调用

// 函数声明
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 创建对象（字面量、构造函数）

// 对象字面量
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）

// 使用原型添加方法
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）

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）

function fetchData(callback) {setTimeout(() => {console.log("数据加载中...");callback("数据加载完成");}, 2000);
}fetchData(function(result) {console.log(result); // 2秒后输出：数据加载完成
});

3.2 Promise（解决回调地狱）

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（更优雅的异步写法）

async function getData() {try {let result = await fetchDataPromise();console.log("最终结果：" + result);} catch (error) {console.error("发生错误：" + error);}
}getData(); // 输出：数据加载中... -> 最终结果：数据加载成功

✅ 总结

特性	关键点	用途
基础语法	变量、函数、条件、循环	构建基本逻辑
面向对象	构造函数、原型、class	创建可复用对象
原型链	继承机制	实现对象间共享方法
异步编程	回调、Promise、async/await	处理耗时任务（如网络请求）