JavaScript函数与对象实战精要

好的，我们将围绕JavaScript 核心特性，从函数到对象进行深度应用实战讲解，帮助您系统掌握关键概念。以下内容结构清晰，逐步深入：

一、函数：JavaScript 的基石

函数是 JavaScript 的一等公民，支持多种特性：

1. 函数声明与表达式

   // 函数声明 function greet(name) { return `Hello, ${name}!`; } // 函数表达式（箭头函数） const add = (a, b) => a + b;

2. 高阶函数
   函数可作为参数或返回值：

   // 回调函数 [1, 2, 3].map(x => x * 2); // [2, 4, 6] // 返回函数（闭包） function createMultiplier(factor) { return num => num * factor; } const double = createMultiplier(2); double(5); // 10

二、对象：封装与复用

对象是属性的集合，支持动态操作：

1. 对象字面量与构造函数

   // 字面量 const user = { name: "Alice", age: 28, greet() { console.log(`Hi, I'm ${this.name}`); } }; // 构造函数（ES5） function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greet = function() { console.log(`Hi, I'm ${this.name}`); };

2. 原型链与继承
   JavaScript 通过原型实现继承：

   // ES6 class 语法（原型语法糖） class Student extends Person { constructor(name, age, major) { super(name, age); this.major = major; } study() { console.log(`${this.name} is studying ${this.major}`); } }

三、深度应用：函数与对象的融合

1. 工厂函数
   用函数动态生成对象：

   function createUser(name, role) { return { name, role, isAdmin() { return this.role === "admin"; } }; }

2. 闭包实现私有变量
   通过函数作用域隐藏数据：

   function createCounter() { let count = 0; // 私有变量 return { increment() { count++ }, getCount() { return count } }; } const counter = createCounter(); counter.increment(); counter.getCount(); // 1

3. 对象方法的高级应用
   使用call/apply/bind动态绑定this：

   const car = { brand: "Tesla" }; function showDetail(model) { console.log(`${this.brand} ${model}`); } showDetail.call(car, "Model 3"); // Tesla Model 3

四、综合实战：购物车系统

结合函数与对象实现核心逻辑：

class ShoppingCart { constructor() { this.items = []; } addItem(item) { this.items.push(item); } calculateTotal() { return this.items.reduce((total, item) => total + item.price, 0); } applyDiscount(discountFn) { // 高阶函数应用 const total = this.calculateTotal(); return discountFn(total); } } // 使用 const cart = new ShoppingCart(); cart.addItem({ name: "Book", price: 20 }); cart.addItem({ name: "Pen", price: 5 }); // 定义折扣函数 const tenPercentOff = total => total * 0.9; console.log(cart.applyDiscount(tenPercentOff)); // 22.5

五、关键总结

通过以上实战，您已掌握从函数基础到对象高级应用的核心链路。建议结合具体项目深化理解！