JS面向对象入门教程

本文介绍了JavaScript面向对象编程的基本概念和关键特性，包括类、实例、继承和多态等。详细解释了如何在JavaScript中定义和使用类，以及如何创建和操作类的实例。文章还探讨了静态属性和方法的应用场景，并通过示例展示了JavaScript面向对象编程的实际应用。本文详细介绍了类和实例的区别、实例属性和方法的区别，以及静态属性和方法的用法。

什么是面向对象编程

面向对象编程（Object-Oriented Programming，OOP）是一种编程范式，强调程序中的数据结构和行为（操作这些数据结构的方法）的封装。在面向对象编程中，数据和操作数据的方法被封装到一个称为“对象”的实体中。这种范式使得代码更加模块化、可重用和易于维护。

为什么需要面向对象

面向对象编程提供了许多优点，包括但不限于：

1. 封装性：隐藏对象的内部细节，对外部程序只暴露必要的接口，提高了安全性。
2. 继承性：一个对象可以继承另一个对象的属性和方法，从而减少代码的重复，提高代码的可重用性。
3. 多态性：对象能够以多种不同的方式表现，允许子类重写父类的方法，实现不同的行为。
4. 抽象性：通过接口和抽象类定义通用的模板，减少代码的复杂性，并增加代码的可读性和可维护性。

JS中的面向对象特性

JavaScript 逐步发展成为一种支持面向对象编程的语言。虽然早期的 JavaScript 主要以函数式编程为主，但在 ES6（ECMAScript 2015）中引入了类（class）的概念，使得面向对象编程更加自然。以下是 JavaScript 中面向对象编程的关键特性：

1. 类（Class）：类是对象的蓝图，定义了对象的属性和方法。
2. 实例（Instance）：类的实例是类的实例化对象，继承了类的属性和方法。
3. 继承：子类可以继承父类的属性和方法，实现代码重用。
4. 封装：可以将属性和方法封装在类中，用私有属性保护数据。
5. 方法重写：子类可以重写父类的方法，实现多态性。

如何定义一个类

在 JavaScript 中，可以通过 class 关键字来定义一个类。类定义了对象的数据和行为。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

在这个例子中，Person 类包含了一个构造函数 constructor 和一个方法 sayHello。构造函数用于初始化对象的属性。

创建类的实例

使用类的构造函数可以创建类的实例。

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

person1 和 person2 都是 Person 类的实例，它们包含了 name 和 age 属性，并且可以调用 sayHello 方法。

类的构造函数

构造函数是一个特殊的函数，用于初始化新创建的对象。当使用 new 关键字实例化类时，系统会自动调用构造函数。

class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  displayInfo() {
    console.log(`This is a ${this.year} ${this.make} ${this.model}.`);
  }
}

const car = new Vehicle('Toyota', 'Camry', 2020);
car.displayInfo();  // 输出: This is a 2020 Toyota Camry.

定义类的属性

可以定义类的属性，这些属性是类的实例共享的数据。属性可以直接在类中定义，也可以通过构造函数定义。

class Animal {
  species = 'Unknown';  // 类的属性

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const dog = new Animal('Buddy', 3);
console.log(dog.species);  // 输出: Unknown
console.log(dog.name);     // 输出: Buddy
console.log(dog.age);      // 输出: 3

创建类的实例

实例化类时，会自动调用构造函数，并将构造函数的参数传递给实例化操作。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.getArea());  // 输出: 50

类的构造函数

构造函数用于初始化类的实例。构造函数中的代码会在实例化时执行。

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
    console.log(`Creating a ${this.make} ${this.model}.`);
  }
}

const car1 = new Car('Toyota', 'Camry');
const car2 = new Car('Honda', 'Civic');

定义类的属性

类的属性可以是实例属性或静态属性。实例属性是每个实例独有的，而静态属性是所有实例共享的。

class Point {
  x = 0;
  y = 0;

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

const point1 = new Point(5, 10);
console.log(point1.x);  // 输出: 5
console.log(point1.y);  // 输出: 10

定义类的方法

方法是类提供的功能，可以是实例方法或静态方法。实例方法由实例调用，静态方法由类本身调用。

class MathUtil {
  static multiply(a, b) {
    return a * b;
  }

  distanceToOrigin() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
}

console.log(MathUtil.multiply(2, 3));  // 输出: 6

const point = new Point(3, 4);
console.log(point.distanceToOrigin());  // 输出: 5

实例属性和方法的区别

实例属性和方法是每个实例独有的，而静态属性和方法是所有实例共享的。以下是实例属性和方法的示例：

class Counter {
  count = 0;

  static maxCount = 10;

  increment() {
    this.count++;
    console.log(`Current count: ${this.count}`);
  }

  static resetCount() {
    Counter.maxCount = 0;
    console.log(`Max count reset to ${Counter.maxCount}`);
  }
}

const counter1 = new Counter();
counter1.increment();  // 输出: Current count: 1
counter1.increment();  // 输出: Current count: 2
Counter.resetCount();  // 输出: Max count reset to 0

类的继承

类的继承允许子类继承父类的方法和属性。子类可以通过 extends 关键字继承父类。

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`Woof woof!`);
  }
}

const dog = new Dog('Buddy');
dog.eat();  // 输出: Buddy is eating.
dog.bark(); // 输出: Woof woof!

使用 extends 关键字

子类通过 extends 关键字继承父类。子类可以重写父类的方法，也可以添加新的方法。

class Mammal extends Animal {
  walk() {
    console.log(`${this.name} is walking.`);
  }
}

const mammal = new Mammal('Fluffy');
mammal.eat();   // 输出: Fluffy is eating.
mammal.walk();  // 输出: Fluffy is walking.

覆写父类的方法

子类可以覆写（重写）父类的方法，以实现特定的行为。

class Cat extends Animal {
  constructor(name, color) {
    super(name);  // 调用父类的构造函数
    this.color = color;
  }

  eat() {
    console.log(`${this.name} is eating fish.`);
  }
}

const cat = new Cat('Whiskers', 'Black');
cat.eat();  // 输出: Whiskers is eating fish.

静态属性的定义和使用

静态属性是通过类直接访问的属性，而不是通过实例访问。静态属性通常用于定义类级别的常量。

class MathConstant {
  static PI = 3.14;
}

console.log(MathConstant.PI);  // 输出: 3.14

静态方法的定义和使用

静态方法是通过类直接调用的方法，而不是通过实例调用。静态方法通常用于执行与类相关的通用操作。

class MathUtil {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(MathUtil.add(2, 3));  // 输出: 5
console.log(MathUtil.subtract(5, 2));  // 输出: 3

静态方法的应用场景

静态方法通常用于执行与类相关的通用操作，例如：

• 数据验证
• 静态属性的初始化
• 工具方法

class User {
  static validateEmail(email) {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
  }

  constructor(email) {
    if (!User.validateEmail(email)) {
      throw new Error(`Invalid email: ${email}`);
    }
    this.email = email;
  }
}

try {
  const user = new User('john.doe@example.com');
  console.log(`Email ${user.email} is valid.`);
} catch (error) {
  console.log(`${error.message}`);
}

通过以上示例，可以更好地理解 JavaScript 中面向对象编程的关键概念和实践。希望这些内容能够帮助你掌握面向对象编程在 JavaScript 中的应用。