JavaScript 原型继承

JavaScript 原型继承

JavaScript 原型继承是一种非常重要的概念，相较于传统的面向对象语言中的继承，JavaScript 通过原型继承来实现对象之间的属性和方法的共享，它是 JavaScript 中最为灵活的一种继承方式。

定义

JavaScript 中的每个对象（除了 null）都有一个原型对象，原型对象可以通过 Object.getPrototypeOf() 或者 proto 属性访问，每个原型对象又有一个自己的原型，直到最后一个原型对象为 null。null 没有原型。

一个对象从原型对象中继承属性和方法，就像 C++ 或 Java 语言中的继承一样。原型对象也是一个对象，所以可以继承其他原型对象的属性和方法，我们把原型对象的继承叫做原型链继承。

示例

// 定义一个父类
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在父类的原型上添加一个 eat 方法
Person.prototype.eat = function() {
  console.log(this.name + ' is eating');
}

// 定义一个子类
function Student(name, age, grade) {
  this.name = name;
  this.age = age;
  this.grade = grade;
}

// 将子类的原型设置为父类的实例，实现原型继承
Student.prototype = new Person();

// 在子类的原型上添加一个 study 方法
Student.prototype.study = function() {
  console.log(this.name + ' is studying');
}

// 创建一个子类的实例
var student = new Student('Tom', 18, 'high school');

// 子类实例既可以调用子类自身定义的方法，也可以调用父类的方法
student.study(); // Tom is studying
student.eat(); // Tom is eating

在上述示例中，我们定义了一个父类 Person 和一个子类 Student，Student 类继承了 Person 类，实现原型继承。Person 类原型上定义了一个 eat 方法，Student 类原型上定义了一个 study 方法。创建了一个 Student 类的实例 student，实例 student 既可以调用自己定义的方法 study，也可以调用父类的方法 eat。

示例

// 定义一个父类
function Animal(name) {
  this.name = name;
}

// 在父类的原型上添加一个 run 方法
Animal.prototype.run = function() {
  console.log('Animal ' + this.name + ' is running');
}

// 定义一个子类
function Cat(name) {
  // 调用父类的构造函数
  Animal.call(this, name);
}

// 将子类的原型设置为父类的实例，实现原型继承
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

// 在子类的原型上添加一个 catchMouse 方法
Cat.prototype.catchMouse = function() {
  console.log('Cat ' + this.name + ' is catching mouse');
}

// 创建一个子类的实例
var cat = new Cat('Tom');

// 子类实例既可以调用子类自身定义的方法，也可以调用父类的方法
cat.catchMouse(); // Cat Tom is catching mouse
cat.run(); // Animal Tom is running

在这个示例中，我们同样定义了一个父类 Animal 和一个子类 Cat，Cat 类继承了 Animal 类，也是通过原型继承实现。然而，与上一个示例不同的是，在 Cat 类中我们使用了 call() 方法调用了父类的构造函数来继承父类的属性，同时通过 Object.create() 方法将子类的原型设置为 Animal 类的原型。最后在子类的原型上定义了自己的方法 catchMouse。创建了一个 Cat 类的实例 cat，实例 cat 既可以调用自己定义的方法 catchMouse，也可以调用父类的方法 run。

总之，JavaScript 的原型继承，用起来非常灵活，也非常强大。需要利用好原型链上的关系，多写多练，在实际开发中灵活运用，才能更好地理解 JavaScript 原型继承的思想。