脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS 类的继承

JavaScript类的继承全面示例讲解

 更新时间：2022年08月08日 09:20:08   作者：夏安  
在 ES5 中，类的继承可以有多种方式，然而过多的选择有时反而会成为障碍，ES6 统了类继承的写法，避免开发者在不同写法的细节之中过多纠缠，但在介绍新方法之前，还是有必要先回顾下ES5中类的继承方式

1. ES5 中的继承

首先假设我们有一个父类 Person，并且在类的内部和原型链上各定义了一个方法：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greed = function() {
    console.log('Hello, I am ', this.name);
  }
}
Person.prototype.getInfo = function() {
  return this.name + ',' + this.age;
}

1.1 修改原型链

这是最普遍的继承做法，通过将子类的 prototype 指向父类的实例来实现：

function Student() {
}
Student.prototype = new Person();
Student.prototype.name = '夏安';
Student.prototype.age = 18;
const stud = new Student();
stud.getInfo();

在这种继承方式中，stud 对象既是子类的实例，也是父类的实例。然而也有缺点，在子类的构造函数中无法通过传递参数对父类继承的属性值进行修改，只能通过修改 prototype 的方式进行修改。

1.2 调用父类的构造函数

function Student(name, age, sex) {
  Person.call(this);
  this.name = name;
  this.age = age;
  this.sex = sex;
}
const stud = new Student('夏安', 18, 'male');
stud.greed(); // Hello, I am  夏安
stud.getInfo(); // Error

这种方式避免了原型链继承的缺点，直接在子类中调用父类的构造函数，在这种情况下，stud 对象只是子类的实例，不是父类的实例，而且只能调用父类实例中定义的方法，不能调用父类原型上定义的方法。

1.3 组合继承

这种继承方式是前面两种继承方式的结合体。

function Student(name, age, sex) {
  Person.call(this);
  this.name = name;
  this.age = age;
  this.sex = sex;
}
Student.prototype = new Person();
const stud = new Student('夏安', 18, 'male');
stud.greed();
stud.getInfo();

这种方式结合上面两种继承方式的优点，也是 Node 源码中标准的继承方式。唯一的问题是调用了父类的构造函数两次，分别是在设置子类的 prototype 和实例化子类新对象时调用的，这造成了一定的内存浪费。

1.4 原型继承

利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型。

function createObject(o) {
  // 创建临时类
  function f() {
  }
  // 修改类的原型为o, 于是f的实例都将继承o上的方法
  f.prototype = o
  return new f()
}

这不就是Object.create吗？ createObject对传入其中的对象执行了一次浅复制，将构造函数f的原型直接指向传入的对象。同样也没有解决修改原型链的缺点。

1.5 寄生式继承

在原型式继承的基础上，增强对象，返回构造函数，或者说使用原型继承对一个目标对象进行浅复制，增强这个浅复制的能力。

function Student() {
  const clone = Object.create(Person);
  clone.name = '夏安';
  return clone;
}

同样也可以和之前的方法进行组合，这里就不再赘述。

2. ES6 中的继承

在 ES6 中可以直接使用 extends 关键字来实现继承，形式上更加简洁。我们前面也提到了，ES6 对 Class 的改进就是为了避免开发者过多地在语法细节中纠缠。

我们设计一个 student 类来继承之前定义的 person 类。

class Student extends Person {
  constructor(name, age, sex) {
    super(name, age);
    this.sex = sex;
  }
  getInfo() {
    return super.getInfo() + ',' + this.sex;
  }
  print() {
    const info = this.getInfo();
    console.log(info);
  }
}
const student = new Student('夏安', 18, 'male');
student.print(); // 夏安,18,male

在代码中我们定义了 Student 类，在它的构造方法中调用了 super 方法，该方法调用了父类的构造函数，并将父类中的属性绑定到子类上。

super 方法可以带参数，表示哪些父类的属性会被继承，在代码中，子类使用 super 继承了 Person 类的 name 以及 age 属性，同时又声明了一个 sex 属性。

在子类中，super 方法是必须要调用的，原因在于子类本身没有自身的 this 对象，必须通过 super 方法拿到父类的 this 对象，可以在 super 函数调用前尝试打印子类的 this，代码会出现未定义的错误。

如果子类没有定义 constructor 方法，那么在默认的构造方法内部自动调用 super 方法，并继承父类的全部属性。

同时，在子类的构造方法中，必须先调用 super 方法，然后才能调用 this 关键字声明其他的属性（如果存在的话），这同样是因为在 super 没有调用之前，子类还没有 this 这一缘故。

class Student extends Person {
  constructor(name, age, sex) {
    console.log(this); // Error
    super(name, age);
    this.sex = sex;
  }
}

除了用在子类的构造函数中，super 还可以用在类方法中来引用父类的方法。

class Student extends Person {
  constructor(name, age, sex) {
    super(name, age);
    this.sex = sex;
  }
  print() {
    const info = super.getInfo(); // 调用父类方法
    console.log(info);
  }
}

值得注意的是，super 只能调用父类方法，而不能调用父类的属性，因为方法是定义在原型链上的，属性则是定义在类的内部（就像组合继承那样，属性定义在类的内部）。

class Student extends Person {
  constructor(name, age, sex) {
    super(name, age);
    this.sex = sex;
  }
  getInfo() {
    return super.name; // undefinded
  }
}

此外，当子类的函数被调用时，使用的均为子类的 this（修改父类的 this 得来），即使使用 super 来调用父类的方法，使用的仍然是子类的 this。

class Person {
  constructor() {
    this.name = '夏安';
    this.sex = 'male';
  }
  getInfo() {
    return this.name + ',' + this.sex;
  }
}
class Student extends Person {
  constructor() {
    super();
    this.name = '安夏';
    this.sex = 'Female';
  }
  print() {
    return super.getInfo();
  }
}
const student = new Student();
console.log(student.print()); // 安夏,Female
console.log(student.getInfo()); // 安夏,Female

在上面的例子中，super 调用了父类的方法，输出的内容却是子类的属性，说明 super 绑定了子类的 this。

到此这篇关于JavaScript类的继承全面示例讲解的文章就介绍到这了,更多相关JS 类的继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论