开发者社区> 问答> 正文

原型如何实现继承?class如何实现继承?class本质是什么?

原型如何实现继承?class如何实现继承?class本质是什么?


【精品问答】前端面试手册

【精品问答】前端面试手册之JavaScript篇

展开
收起
前端问答 2019-11-24 19:53:58 1034 0
1 条回答
写回答
取消 提交回答
  • 前端问答小助手

    首先先来讲下 class,其实在 JS 中并不存在类,class 只是语法糖,本质还是函数。

    class Person {}
    Person instanceof Function // true
    

    组合继承

    组合继承是最常用的继承方式,

    function Parent(value) {
      this.val = value
    }
    Parent.prototype.getValue = function() {
      console.log(this.val)
    }
    function Child(value) {
      Parent.call(this, value)
    }
    Child.prototype = new Parent()
    
    const child = new Child(1)
    
    child.getValue() // 1
    child instanceof Parent // true
    
    

    以上继承的方式核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性,然后改变子类的原型为 new Parent() 来继承父类的函数。

    这种继承方式优点在于构造函数可以传参,不会与父类引用属性共享,可以复用父类的函数,但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数,导致子类的原型上多了不需要的父类属性,存在内存上的浪费。

    image.png

    寄生组合继承

    这种继承方式对组合继承进行了优化,组合继承缺点在于继承父类函数时调用了构造函数,我们只需要优化掉这点就行了。

    function Parent(value) {
      this.val = value
    }
    Parent.prototype.getValue = function() {
      console.log(this.val)
    }
    
    function Child(value) {
      Parent.call(this, value)
    }
    Child.prototype = Object.create(Parent.prototype, {
      constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
      }
    })
    
    const child = new Child(1)
    
    child.getValue() // 1
    child instanceof Parent // true
    
    

    以上继承实现的核心就是将父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数。

    image.png

    Class 继承

    以上两种继承方式都是通过原型去解决的,在 ES6 中,我们可以使用 class 去实现继承,并且实现起来很简单

    class Parent {
      constructor(value) {
        this.val = value
      }
      getValue() {
        console.log(this.val)
      }
    }
    class Child extends Parent {
      constructor(value) {
        super(value)
      }
    }
    let child = new Child(1)
    child.getValue() // 1
    child instanceof Parent // true
    
    

    class 实现继承的核心在于使用 extends 表明继承自哪个父类,并且在子类构造函数中必须调用 super,因为这段代码可以看成 Parent.call(this, value)。

    当然了,之前也说了在 JS 中并不存在类,class 的本质就是函数。

    2019-12-16 08:10:00
    赞同 1 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
继承与功能组合 立即下载
建立联系方法之一 立即下载
JAVA反射原理以及一些常见的应用 立即下载