javascript 面向对象技术基础教程第2/2页

《JavaScript 面向对象技术基础教程》的第2/2页讲解了 JavaScript 的面向对象编程技术，主要包括对象、继承、多态和封装等概念。它是本书的重头戏，对于理解 JavaScript 面向对象的开发思想非常重要，下面提供一份完整攻略，帮助初学者快速掌握。

对象

在 JavaScript 中，对象是一组属性和方法的集合。创建对象的方式有几种，最常见的是使用对象字面量和构造函数。例如：

// 对象字面量方式创建对象
var person1 = {
  name: "Amy",
  age: 20,
  sayHello: function() {
    console.log("Hello, I'm " + this.name);
  }
};

// 构造函数方式创建对象
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, I'm " + this.name);
  };
}
var person2 = new Person("Bob", 22);

以上示例分别展示了对象字面量和构造函数创建对象的过程，注释已经把每个部分讲得很清楚了。需要注意的是，使用构造函数创建的多个对象可以共享同一个原型对象，从而实现属性和方法复用。

继承

在 JavaScript 中，继承是使用原型链实现的。原型链是指每个对象都有一个指向另一个对象的内部链接，而这个对象又可以有自己的链接，这样层层链接下去就形成了原型链。用原型链实现继承主要有两种方式：原型继承和构造函数继承。以下是两种方式的示例：

// 原型继承
var person = {
  name: "Amy",
  age: 20,
  sayHello: function() {
    console.log("Hello, I'm " + this.name);
  }
};
var student = Object.create(person); // 继承 person 对象
student.grade = 90;
student.showGrade = function() {
  console.log(this.name + "'s grade is " + this.grade);
};

// 构造函数继承
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, I'm " + this.name);
  };
}
function Student(name, age, grade) {
  Person.call(this, name, age); // 借用 Person 构造函数
  this.grade = grade;
  this.showGrade = function() {
    console.log(this.name + "'s grade is " + this.grade);
  };
}
Student.prototype = Object.create(Person.prototype); // 继承 Person 原型对象

以上示例分别展示了原型继承和构造函数继承的过程。需要注意的是，在使用构造函数继承时，需要借用超类的构造函数，同时修改子类的原型指向超类的原型对象。这样，子类的实例就可以共享超类的方法。

多态

多态是一种让不同对象之间表现出相同的行为特征的能力。在 JavaScript 中，实现多态主要是通过限制调用方式和参数类型来实现。以下是一个示例：

function getArea(shape) {
  if (shape instanceof Rectangle) {
    return shape.width * shape.height;
  } else if (shape instanceof Circle) {
    return Math.pow(shape.radius, 2) * Math.PI;
  }
}
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
function Circle(radius) {
  this.radius = radius;
}

以上示例中，通过 instanceof 运算符来判断参数的类型，从而实现针对不同对象的处理方式。需要注意的是，这种方式需要开发者自己判断对象类型，比较繁琐。ES6 提供了更方便的实现方式。

封装

封装是指将一个对象的属性和方法包装起来，防止外界直接访问。在 JavaScript 中，封装通常是通过闭包实现的。以下是一个示例：

function createPerson(name, age) {
  var _name = name; // 私有数据，仅在函数内部可访问
  var _age = age;

  var obj = {
    getName: function() {
      return _name;
    },
    setName: function(name) {
      _name = name;
    },
    getAge: function() {
      return _age;
    },
    setAge: function(age) {
      _age = age;
    }
  };

  return obj;
}

var person = createPerson("Amy", 20);
person.getName(); // "Amy"
person.setName("Bob");
person.getName(); // "Bob"

以上示例中，变量 _name 和 _age 被封装在 createPerson 函数内部，通过闭包的方式访问。外界无法直接访问，只能通过 obj 对象访问。

示例说明

1. 封装

下面是一个使用 Object.freeze() 方法封装对象的示例：

var person = {
  name: "Amy",
  age: 20
};
Object.freeze(person); // 冻结对象，属性和方法不可修改或删除

function tryToChange(obj) {
  obj.age = 22; // 年龄不可修改
}
tryToChange(person);
console.log(person.age); // 20

以上示例中，使用 Object.freeze() 方法冻结 person 对象，使其属性和方法不可修改或删除。在 tryToChange() 函数中尝试修改年龄属性，但是失败了，因为该属性被冻结了。

1. 多态

下面是一个使用 class 关键字实现多态的示例：

class Shape {
  getName() {
    return "Shape";
  }
}

class Circle extends Shape {
  getName() {
    return "Circle";
  }
}

class Rectangle extends Shape {
  getName() {
    return "Rectangle";
  }
}

function printShapeName(shape) {
  console.log(shape.getName());
}

const circle = new Circle();
const rectangle = new Rectangle();
printShapeName(circle); // "Circle"
printShapeName(rectangle); // "Rectangle"

以上示例中，使用 ES6 的 class 关键字定义了 Shape、Circle 和 Rectangle 三个类，并重写了它们的 getName() 方法，实现了多态。使用 printShapeName() 函数，实现了对不同对象的统一调用方式。