JavaScript进阶篇——第五章 对象成员管理与数组遍历优化
目录
1. 创建对象的三种方式
2. 构造函数详解
3. 实例成员与静态成员
4. 数组遍历forEach方法
5. 复习要点速查表
JavaScript对象创建与操作摘要
JavaScript提供了三种创建对象的方式：对象字面量（{}）、new Object()和构造函数（function+new）。构造函数是创建多个相似对象的推荐方式，需遵循大写开头命名约定，必须使用new调用，实例化过程包括创建空对象、this绑定、执行代码和返回对象。对象成员分为实例成员（属实例对象）和静态成员（属构造函数），主要区别在于归属和共享性。数组遍历推荐使用forEach方法，需注意其参数顺序固定（元素在前，索引在后）且无法中断循环。关键记忆点：构造函数必须用new调用，实例成员相互独立而静态成员共享，forEach适合数组遍历但不够灵活。
1. 创建对象的三种方式
1.1 对象字面量创建
// ✅ 直接使用大括号{}创建对象
const person = {name: '小明',age: 18,greet() {console.log(`你好，我是${this.name}`);}
};console.log(person.name); // "小明"
person.greet(); // "你好，我是小明"1.2 new Object()创建
// ✅ 使用new Object()创建对象
const car = new Object({brand: 'Toyota',model: 'Camry',year: 2022
});console.log(car.model); // "Camry"1.3 构造函数创建
// ✅ 使用构造函数创建多个相似对象
function Person(name, age) {this.name = name;this.age = age;this.greet = function() {console.log(`你好，我是${this.name}，今年${this.age}岁`);};
}const xiaoming = new Person('小明', 18);
const xiaohong = new Person('小红', 20);xiaoming.greet(); // "你好，我是小明，今年18岁"
xiaohong.greet(); // "你好，我是小红，今年20岁"2. 构造函数详解
2.1 构造函数是什么
构造函数是一种特殊的函数，主要用来初始化对象。它允许我们快速创建多个结构相同但值不同的对象。
2.2 构造函数语法
// ✅ 构造函数约定：大写字母开头
function Animal(name, type) {// this指向新创建的对象this.name = name;this.type = type;this.makeSound = function() {console.log(`${this.name}发出了叫声`);};
}// 使用new关键字创建实例
const cat = new Animal('咪咪', '猫');
const dog = new Animal('旺财', '狗');cat.makeSound(); // "咪咪发出了叫声"2.3 new关键字实例化过程
当使用 new 调用构造函数时：
-
创建空对象：在内存中创建一个新的空对象
-
this指向：将构造函数的
this指向这个新对象 -
执行代码：执行构造函数内的代码，添加属性和方法
-
返回对象：自动返回创建的新对象
function Person(name) {// 1. 创建新空对象 = {}// 2. this = 新空对象this.name = name; // 3. 添加属性// 4. 返回 this (新对象)
}const p = new Person('小明');2.4 注意事项
// ⚠️ 1. 构造函数必须使用 new 调用
const p = Person('小明'); // ❌ 错误！this会指向全局对象// ⚠️ 2. 构造函数内部不要写 return
function BadExample() {this.name = '测试';return { error: '不要这样做' }; // ❌ 会覆盖返回的对象
}// ⚠️ 3. 无参数时可省略括号（但不推荐）
const date = new Date; // 等同于 new Date()3. 实例成员与静态成员
3.1 实例成员详解
实例成员是属于实例对象的属性和方法，每个实例对象都有自己独立的副本。
function Car(brand, model) {// 实例属性this.brand = brand;this.model = model;// 实例方法this.displayInfo = function() {console.log(`${this.brand} ${this.model}`);};
}const car1 = new Car('Toyota', 'Camry');
const car2 = new Car('Honda', 'Accord');// ✅ 实例成员属于具体对象
console.log(car1.brand); // "Toyota"
car2.displayInfo(); // "Honda Accord"// ❗ 重点：实例对象相互独立，互不影响
car1.brand = 'Ford';
console.log(car2.brand); // 仍然是"Honda"3.2 静态成员详解
静态成员是属于构造函数本身的属性和方法，只能通过构造函数访问。
function MathUtils() {}// 静态属性
MathUtils.PI = 3.14159;// 静态方法
MathUtils.circleArea = function(radius) {return MathUtils.PI * radius * radius;
};// ✅ 通过构造函数访问静态成员
console.log(MathUtils.PI); // 3.14159
console.log(MathUtils.circleArea(5)); // 78.53975// ⚠️ 实例对象无法访问静态成员
const util = new MathUtils();
console.log(util.PI); // undefined ❌3.3 静态成员特点
-
共享性：所有实例共享同一个静态成员
-
内存效率：静态方法只在内存中存在一份副本
-
this指向：静态方法中的
this指向构造函数本身
// 静态方法中的this
Array.isArray([1, 2, 3]); // true
Date.now(); // 返回当前时间戳// 自定义静态方法
function User() {}
User.admin = '管理员';
User.createAdmin = function() {console.log(`创建${this.admin}账号`); // this指向User
};4. 数组遍历forEach方法
4.1 基本语法
// ✅ forEach 遍历数组
数组.forEach(function(当前元素, 当前索引) {// 处理每个元素
});4.2 使用示例
const colors = ['红色', '绿色', '蓝色'];// 遍历数组元素
colors.forEach(function(color, index) {console.log(`索引 ${index}: ${color}`);
});// 输出结果：
// 索引 0: 红色
// 索引 1: 绿色
// 索引 2: 蓝色// ✅ 箭头函数简写
colors.forEach((color, index) => {console.log(`颜色${index + 1}: ${color}`);
});4.3 注意事项
// ⚠️ 1. forEach 主要用于遍历数组
const obj = {a: 1, b: 2};
// obj.forEach(...) // ❌ 错误！对象没有forEach方法// ⚠️ 2. 参数顺序固定：元素在前，索引在后
colors.forEach(function(元素, 索引) {// 参数名可自定义，但顺序固定
});// ⚠️ 3. 不能使用 break 中断循环
// 使用 for...of 或 for 循环代替// ⚠️ 4. 不会改变原数组（除非在回调中修改）
const numbers = [1, 2, 3];
numbers.forEach((num, index, arr) => {arr[index] = num * 2; // 修改原数组
});
console.log(numbers); // [2, 4, 6]5. 复习要点速查表
创建对象三种方式
| 方式 | 语法 | 适用场景 |
|---|---|---|
| 对象字面量 | const obj = {key: value} | 创建单个简单对象 |
| new Object() | const obj = new Object({...}) | 与字面量类似，不常用 |
| 构造函数 | function Class() {...} + new Class() | 创建多个相似对象 |
构造函数核心要点
-
命名约定：大写字母开头（如
Person,Car） -
必须使用
new关键字调用 -
内部不要写
return -
实例化过程：创建空对象 → this指向 → 执行代码 → 返回对象
实例成员 vs 静态成员
| 特性 | 实例成员 | 静态成员 |
|---|---|---|
| 归属 | 实例对象 | 构造函数 |
| 访问方式 | 实例.属性 | 构造函数.属性 |
| 独立性 | 每个实例独立 | 所有实例共享 |
| 内存 | 每个实例都有副本 | 只有一份副本 |
| this指向 | 实例对象 | 构造函数 |
forEach 方法要点
| 特性 | 说明 |
|---|---|
| 主要用途 | 遍历数组元素 |
| 参数顺序 | (元素, 索引) |
| 中断循环 | ❌ 不支持 break |
| 修改原数组 | 通过回调第三个参数可实现 |
| 返回值 | undefined |
| 箭头函数 | 常与箭头函数配合使用 |
面试高频问题
-
new 操作符做了什么？
创建空对象 → 设置原型 → 绑定this → 执行构造函数 → 返回对象 -
实例方法和静态方法有什么区别？
实例方法属于对象实例，静态方法属于类（构造函数） -
什么时候用构造函数创建对象？
需要创建多个结构相同但数据不同的对象时 -
forEach 和 for 循环的主要区别？
forEach 更简洁但无法中断循环，for 循环更灵活但代码稍长
记忆口诀：
"构造函数大写下，new 关键字不能落"
"实例对象各独立，静态成员共享用"
"forEach 遍历数组，元素索引按顺序"