喔唷网 - 网络从业者技术信息综合门户!

当前位置: 主页 > 教程技术 > 编程语言 > javascript

JavaScript对象与面向对象编程 用乐高思维构建代码世界

时间 : 2025-04-23 11:44来源 : 喔唷网作者 : 喔唷教程点击 :
欢迎来到JavaScript的乐高乐园!本章我们要学习如何用对象(object)这块"万能积木"搭建复杂的程序结构。准备好变身代码建筑师了吗? 6.1 对象基础 - 你的第一个"代码积木" 对象就像一个人的档案卡: le

欢迎来到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(); // 调用原型方法

原型链查找机制

  1. 先在对象自身属性查找
  2. 找不到就去__proto__指向的原型对象找
  3. 一直找到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调用父类方法
  • 子类可以扩展或重写父类功能

本章总结

  1. 对象是属性的集合
  2. 构造函数是创建对象的模板
  3. 原型链实现继承机制
  4. Class语法更接近传统OOP
  5. 继承和多态提高代码复用

实战练习

  1. 创建一个Book对象,包含书名、作者和阅读方法
  2. 用构造函数实现一个Circle类,有半径属性和计算面积方法
  3. 实现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();

下一章我们将探索数组的奇妙世界,学习如何高效处理数据集合!准备好成为数据管理大师了吗?

栏目列表

关联类容

热点推荐

栏目推荐

猜你喜欢