欢迎来到JavaScript的乐高乐园!本章我们要学习如何用对象(object)这块"万能积木"搭建复杂的程序结构。准备好变身代码建筑师了吗?
6.1 对象基础 - 你的第一个"代码积木"
对象就像一个人的档案卡:
let person = {
name: "张三",
age: 25,
hobbies: ["篮球", "游戏"],
greet: function() {
console.log(`大家好,我是${this.name}`);
}
};
console.log(person.name); // "张三"
person.greet(); // 调用方法
对象的特点:
- 用大括号{}包裹
- 属性是键: 值对
- 方法其实是值为函数的属性
- 用点符号.访问成员
6.2 创建对象的N种姿势
1. 对象字面量(最常用)
let cat = {
name: "咪咪",
color: "orange",
meow() {
console.log("喵~");
}
};
2. 使用new Object()
let car = new Object();
car.brand = "Toyota";
car.honk = function() {
console.log("嘟嘟!");
};
3. 工厂函数(批量生产)
function createStudent(name, grade) {
return {
name,
grade,
study() {
console.log(`${name}正在学习...`);
}
};
}
let stu1 = createStudent("小明", 5);
6.3 构造函数 - 对象的"出生证明"
构造函数就像对象的模具:
function Person(name, age) {
this.name = name;
this.age = age;
this.introduce = function() {
console.log(`我是${this.name},今年${this.age}岁`);
};
}
let p1 = new Person("李四", 30);
p1.introduce();
注意:
- 构造函数通常首字母大写
- 必须使用new关键字调用
- this指向新创建的对象
6.4 原型与原型链 - JavaScript的"家族遗传"
每个对象都有个隐藏的[[Prototype]]
属性,形成原型链:
function Animal(name) {
this.name = name;
}
// 通过原型添加方法
Animal.prototype.eat = function() {
console.log(`${this.name}在吃东西`);
};
let dog = new Animal("阿黄");
dog.eat(); // 调用原型方法
原型链查找机制:
- 先在对象自身属性查找
- 找不到就去__proto__指向的原型对象找
- 一直找到Object.prototype为止
6.5 Class语法 - 面向对象的"新衣服"
ES6引入的class语法糖(本质还是原型继承):
class Student {
constructor(name, grade) {
this.name = name;
this.grade = grade;
}
study() {
console.log(`${this.name}正在努力学习`);
}
}
let stu2 = new Student("小红", 6);
stu2.study();
6.6 继承与多态 - 代码的"家族树"
继承示例:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name}发出声音`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类构造器
this.breed = breed;
}
speak() { // 方法重写(多态)
console.log(`${this.name}汪汪叫!`);
}
}
let myDog = new Dog("来福", "金毛");
myDog.speak(); // "来福汪汪叫!"
继承的本质:
- extends建立了原型链
- super调用父类方法
- 子类可以扩展或重写父类功能
本章总结:
- 对象是属性的集合
- 构造函数是创建对象的模板
- 原型链实现继承机制
- Class语法更接近传统OOP
- 继承和多态提高代码复用
实战练习:
- 创建一个Book对象,包含书名、作者和阅读方法
- 用构造函数实现一个Circle类,有半径属性和计算面积方法
- 实现Shape父类和Rectangle/Circle子类的继承体系
生活剧场:
class Smartphone {
constructor(brand, os) {
this.brand = brand;
this.os = os;
this.battery = 100;
}
charge() {
this.battery = 100;
console.log("充电完成!");
}
use(app) {
if (this.battery <= 0) {
console.log("电量耗尽!");
return;
}
this.battery -= 10;
console.log(`使用${app}中... 剩余电量${this.battery}%`);
}
}
let myPhone = new Smartphone("小米", "Android");
myPhone.use("微信");
myPhone.charge();
下一章我们将探索数组的奇妙世界,学习如何高效处理数据集合!准备好成为数据管理大师了吗?