javascript object oriented 面向对象编程初步

JavaScript 面向对象编程初步

前言

JavaScript 是一种面向对象的编程语言，面向对象编程（Object Oriented Programming）是一种编程范式，它将数据抽象为对象，对象之间相互关联，通过这种方式组织代码和数据，使得代码更加易读易懂、可维护性更高。

在 JavaScript 中，我们可以使用函数、对象和原型等方式来实现面向对象编程。

构造函数

构造函数（Constructor）是 JavaScript 中用于创建对象的函数。我们通过构造函数产生一个新的对象，这个对象被称为实例（Instance）。

例如，我们可以通过以下方式定义一个名为 Person 的构造函数：

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

在上面的代码中，我们定义了一个构造函数 Person，它有两个参数 name 和 age，并且在函数体中使用了 this 关键字给实例添加了两个属性。可以看出，通过构造函数我们可以轻松地创建多个对象，每个对象都拥有相同的属性和方法。

例如，我们可以使用以下方式创建两个不同的 Person 实例：

const person1 = new Person('张三', 20);
const person2 = new Person('李四', 30);

在上面的代码中，我们使用 new 关键字创建了两个 Person 实例 person1 和 person2，它们都拥有 name 和 age 两个属性。

属性和方法

在 JavaScript 中，构造函数除了可以给实例添加属性之外，还可以给实例添加方法。可以通过在构造函数的原型上添加方法来实现。

例如，我们可以在 Person 构造函数的原型上添加一个方法 sayHi：

Person.prototype.sayHi = function() {
  console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
}

在上面的代码中，我们使用了 prototype 属性给 Person 构造函数添加了一个方法 sayHi。sayHi 方法用来输出当前实例的姓名和年龄。

现在我们可以通过以下方式调用 sayHi 方法：

person1.sayHi(); // Hi, my name is 张三, I'm 20 years old.
person2.sayHi(); // Hi, my name is 李四, I'm 30 years old.

上面的代码中，我们分别调用了 person1 和 person2 的 sayHi 方法，输出了它们的姓名和年龄。

继承

在面向对象编程中，继承（Inheritance）是一种非常重要的机制。继承允许我们通过一个已知的对象去创建一个新的对象，并将新对象的属性和方法继承自已知对象。这种方式可以节省很多代码。

在 JavaScript 中，我们可以通过使用原型（Prototype）来实现继承。

例如，我们可以定义一个名为 Student 的构造函数，它继承自 Person 构造函数：

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

在上面的代码中，我们定义了一个名为 Student 的构造函数，它有三个参数 name、age 和 grade。它调用了父类 Person 的 call 方法，将 this 关键字绑定到当前实例，并向父类 Person 传递 name 和 age 两个参数。接着，它给实例添加了一个名为 grade 的属性。

现在我们可以通过以下方式创建一个 Student 实例：

const student = new Student('张三', 20, '一年级');
console.log(student.name); // 张三
console.log(student.grade); // 一年级

student.sayHi(); // Hi, my name is 张三, I'm 20 years old.

在上面的代码中，我们创建了一个 Student 实例 student，它继承了 Person 的属性和方法，并且额外添加了一个 grade 属性。可以看出，student 实例不仅具有 Person 实例的属性和方法，还具有自己的属性。

示例说明

示例一

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHi = function() {
  console.log(`Hi, I'm ${this.name}.`);
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('woof woof!');
}

const dog = new Dog('小花');
dog.sayHi(); // Hi, I'm 小花.
dog.bark(); // woof woof!

在上面的代码中，我们定义了一个 Animal 构造函数和一个 Dog 构造函数。Animal 构造函数用来创建动物实例，Dog 构造函数通过继承 Animal 构造函数来创建狗实例。我们定义了一个 bark 方法用来输出狗的叫声。最后，我们创建了一个 Dog 实例 dog，并调用了它的 sayHi 和 bark 方法。

示例二

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

  sayHi() {
    console.log('Hi, I am a shape.');
  }
}

class Circle extends Shape {
  constructor(x, y, r) {
    super(x, y);
    this.r = r;
  }

  area() {
    return Math.PI * this.r * this.r;
  }
}

const circle = new Circle(0, 0, 10);
circle.sayHi(); // Hi, I am a shape.
console.log(circle.area()); // 314.1592653589793

在上面的代码中，我们定义了一个基类 Shape 和一个派生类 Circle。Shape 类有 x 和 y 两个属性，还有一个 sayHi 方法，用来输出形状的类型。Circle 类继承自 Shape 类，添加了一个 r 属性和一个 area 方法，用来计算圆的面积。最后，我们创建了一个 Circle 实例 circle，并调用了它的 sayHi 和 area 方法。