JavaScript 语言基础详解-EW帮帮网

关键词：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	处理耗时任务（如网络请求）

JavaScript 语言基础详解