前端面试：用ES5实现类的继承。

最新推荐文章于 2023-07-25 16:42:26 发布

神三元

最新推荐文章于 2023-07-25 16:42:26 发布

阅读量1.2k

点赞数 3

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_42098339/article/details/87900369

版权

前端开发专栏收录该内容

33 篇文章

订阅专栏

本文详细探讨了使用ES5在JavaScript中实现类继承的五种常见方法，包括call实现、原型链继承、组合继承及其优化、以及推荐的优化方案。每种方法都有其优缺点，例如原型链可能导致属性共享，而某些优化方法可能涉及额外的构造函数调用。通过这些示例，作者强调了理解JS原型链在前端面试中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式是借助call实现继承：

  function Parent1(){
    this.name = 'parent1';
  }
  function Child1(){
    Parent1.call(this);
    this.type = 'child1'
  }
  console.log(new Child1);

这样写的时候子类虽然能够拿到父类的属性值，但是问题是父类中一旦存在方法那么子类无法继承。那么引出下面的方法。

第二种方式借助原型链实现继承：

  function Parent2() {
    this.name = 'parent2';
    this.play = [1, 2, 3]
  }
  function Child2() {
    this.type = 'child2';
  }
  Child2.prototype = new Parent2();

  console.log(new Child2());

看似没有问题，父类的方法和属性都能够访问，但实际上有一个潜在的不足。举个例子：

  var s1 = new Child2();
  var s2 = new Child2();
  s1.play.push(4);
  console.log(s1.play, s2.play);

可以看到控制台：

明明我只改变了s1的play属性，为什么s2也跟着变了呢？很简单，因为两个实例使用的是同一个原型对象。

那么还有更好的方式么？

第三种方式：将前两种组合：我，

  function Parent3 () {
    this.name = 'parent3';
    this.play = [1, 2, 3];
  }
  function Child3() {
    Parent3.call(this);
    this.type = 'child3';
  }
  Child3.prototype = new Parent3();
  var s3 = new Child3();
  var s4 = new Child3();
  s3.play.push(4);
  console.log(s3.play, s4.play);

可以看到控制台：

之前的问题都得以解决。但是这里又徒增了一个新问题，那就是Parent3的构造函数会多执行了一次（Child3.prototype = new Parent3();）。这是我们不愿看到的。那么如何解决这个问题？

第四种方式: 组合继承的优化1

  function Parent4 () {
    this.name = 'parent4';
    this.play = [1, 2, 3];
  }
  function Child4() {
    Parent4.call(this);
    this.type = 'child4';
  }
  Child4.prototype = Parent4.prototype;

这里让将父类原型对象直接给到子类，父类构造函数只执行一次，而且父类属性和方法均能访问，但是我们来测试一下：

  var s3 = new Child4();
  var s4 = new Child4();
  console.log(s3)

子类实例的构造函数是Parent4，显然这是不对的，应该是Child4。

第五种方式(最推荐使用)：优化2

  function Parent5 () {
    this.name = 'parent5';
    this.play = [1, 2, 3];
  }
  function Child5() {
    Parent5.call(this);
    this.type = 'child5';
  }
  Child5.prototype = Object.create(Parent5.prototype);
  Child5.prototype.constructor = Child5;

这是最推荐的一种方式，接近完美的继承。

因此，小小的继承虽然ES6当中简化了很多，但毋庸置疑的是，js是一门基于原型的语言，所以，用ES5来完成继承非常考验面试者对JS语言本身的理解，尤其是对于原型链是否理解清楚。