JS实现继承的几种常用方式示例

下面是详细的“JS实现继承的几种常用方式示例”的完整攻略。

什么是继承

继承是一种代码复用的技术，它使得子类获得父类的属性和方法。在 JavaScript 中，实现继承有多种方式，本文将介绍几种常用的方式。

实现继承的几种常用方式

1. 原型链继承

原型链继承是通过设置子类的原型对象指向父类的实例对象实现的。这样就可以使子类继承父类的属性和方法。当在子类实例中查找一个属性或方法时，如果在子类实例中找不到，就会在子类的原型对象上查找，如果还是找不到，就会继续在父类的原型对象一直向上查找，直到找到为止。

下面是一个示例代码：

// 父类
function Animal(name) {
  this.name = name;
}

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

// 子类
function Dog(name) {
  this.name = name;
}

Dog.prototype = new Animal();

var dog = new Dog('小狗');
console.log(dog.getName());       // 输出结果：小狗
console.log(dog instanceof Dog);  // 输出结果：true
console.log(dog instanceof Animal); // 输出结果：true

在这个示例代码中，我们定义了一个父类 Animal，它有一个方法 getName，我们想让子类 Dog 继承父类 Animal 的方法 getName，我们让子类 Dog 的原型对象指向父类 Animal 的实例对象，这样就实现了继承。在子类 Dog 的实例 dog 上调用 getName 方法，由于在子类实例上找不到 getName 方法，就会在子类的原型对象上查找 getName 方法，最终会调用父类 Animal 的 getName 方法。

1. 构造函数继承

构造函数继承是通过在子类构造函数中调用父类构造函数实现的。这样就可以使子类拥有父类的属性。但是，它并没有继承父类的原型对象上的方法，因此它不是一种完整的继承方式。

下面是一个示例代码：

// 父类
function Animal(name) {
  this.name = name;
}

// 子类
function Dog(name, age) {
  Animal.call(this, name);
  this.age = age;
}

var dog = new Dog('小狗', 1);
console.log(dog.name);  // 输出结果：小狗
console.log(dog.age);   // 输出结果：1
console.log(dog instanceof Dog);  // 输出结果：true
console.log(dog instanceof Animal); // 输出结果：false

在这个示例代码中，我们定义了一个父类 Animal，它有一个属性 name，我们想让子类 Dog 继承父类 Animal 的属性 name，我们在子类构造函数中调用父类构造函数 Animal，并使用 call 方法将子类实例的上下文指向父类构造函数 Animal，这样调用父类构造函数 Animal 就可以让子类拥有父类的属性。在子类实例 dog 上获取 name 属性，由于它是在子类构造函数中定义的，因此可以获取到，同时也可以获取子类独有的 age 属性。

总结

以上就是实现继承的几种常用方式。原型链继承和构造函数继承都有各自的优缺点。在使用时需要结合具体的场景进行选择，以便真正达到代码复用的效果。