浅谈JavaScript面向对象程序设计

什么是面向对象编程

面向对象编程(OOP)是一种编程模式，它将现实世界中的事物抽象为类，类与类之间进行交互与协作，通过封装、继承、多态等机制使得程序结构更加清晰、易于扩展与维护。

JavaScript中的面向对象

在JavaScript中，函数是一等公民，对象可以作为函数的参数或返回值，JavaScript中的面向对象编程依托于函数、原型和构造函数等特性实现，以下简单介绍几个常见的特性。

封装

封装是一种将数据和操作封装在对象中，对外部隐藏内部实现的机制。JavaScript中，可以使用闭包来实现封装，代码示例如下：

function Person(name, age) {
  var _name = name;
  var _age = age;

  this.getName = function() {
    return _name;
  }

  this.getAge = function() {
    return _age;
  }

  this.setName = function(name) {
    _name = name;
  }

  this.setAge = function(age) {
    _age = age;
  }
}

var person = new Person('张三', 20);

console.log(person.getName()); // 输出：张三
console.log(person.getAge()); // 输出：20

person.setName('李四');
person.setAge(30);

console.log(person.getName()); // 输出：李四
console.log(person.getAge()); // 输出：30

在上述代码中，Person函数通过闭包实现了封装，外部无法直接访问对象的_name和_age属性，只能通过getName、getAge、setName和setAge方法来获取或修改。

继承

继承是一种实现代码重用和扩展的机制。JavaScript中可以使用原型链来实现继承，代码示例如下：

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

Person.prototype.getName = function() {
  return this.name;
}

Person.prototype.getAge = function() {
  return this.age;
}

function Student(name, age, grade) {
  Person.call(this, name, age); // 调用父类构造函数，设置name和age属性
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype); // 建立原型链，将Student的原型指向Person的原型
Student.prototype.constructor = Student; // 修正Student的构造函数指向自身

Student.prototype.getGrade = function() {
  return this.grade;
}

var student = new Student('张三', 20, 90);

console.log(student.getName()); // 输出：张三
console.log(student.getAge()); // 输出：20
console.log(student.getGrade()); // 输出：90

在上述代码中，Student继承了Person的属性和方法，并通过原型链实现了继承。

多态

多态是一种同一种操作作用于不同的对象上面时，可以产生不同的执行结果的机制。在JavaScript中，可以通过重写父类方法和使用instanceof来实现多态，代码示例如下：

function Animal() {}

Animal.prototype.say = function() {
  console.log('动物叫');
}

function Dog() {}

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

Dog.prototype.say = function() {
  console.log('汪汪汪');
}

function Cat() {}

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

Cat.prototype.say = function() {
  console.log('喵喵喵');
}

var animal = new Animal();
var dog = new Dog();
var cat = new Cat();

animal.say(); // 输出：动物叫
dog.say(); // 输出：汪汪汪
cat.say(); // 输出：喵喵喵

function shout(animal) {
  if(animal instanceof Animal) {
    animal.say();
  } else {
    console.log('非动物对象无法叫！');
  }
}

shout(animal); // 输出：动物叫
shout(dog); // 输出：汪汪汪
shout(cat); // 输出：喵喵喵
shout('hello'); // 输出：非动物对象无法叫！

在上述代码中，通过重写Animal的say方法和使用instanceof来实现了多态。

示例说明

示例一：封装

下面是一个使用闭包封装一个计数器的代码示例：

function Counter() {
  var count = 0;

  this.increment = function() {
    count++;
  }

  this.getCount = function() {
    return count;
  }
}

var counter = new Counter();

counter.increment();
counter.increment();
counter.increment();

console.log(counter.getCount()); // 输出：3

在上述示例中，使用闭包将计数器的count属性封装在Counter函数内，外部只能通过increment和getCount方法来操作计数器。

示例二：继承

下面是一个使用原型链实现继承的代码示例：

function Shape(x, y, color) {
  this.x = x;
  this.y = y;
  this.color = color;
}

Shape.prototype.getPos = function() {
  return '(' + this.x + ', ' + this.y + ')';
}

Shape.prototype.getArea = function() {}

function Circle(x, y, r, color) {
  Shape.call(this, x, y, color); // 调用父类构造函数，设置x、y和color属性
  this.r = r;
}

Circle.prototype = Object.create(Shape.prototype); // 建立原型链，将Circle的原型指向Shape的原型
Circle.prototype.constructor = Circle; // 修正Circle的构造函数指向自身

Circle.prototype.getArea = function() {
  return Math.PI * this.r * this.r;
}

var circle = new Circle(0, 0, 5, 'red');

console.log(circle.getPos()); // 输出：(0, 0)
console.log(circle.getArea()); // 输出：78.53981633974483

在上述示例中，使用原型链将Circle继承了Shape的属性和方法。