JS继承四种方法

继承:子类继承父类的属性和方法,下面介绍js中继承的四种常用方法,原型继承,Call继承,寄生组合继承,ES6中类的继承

    //定义父类,给父类添加属性x,和方法getX
    function Father(x) {
        this.x = x
    }
    Father.prototype.getX=function(){
        console.log(this.x);
    }
    //定义子类,给子类添加属性y,和方法getY
    function Child(y){
        this.y = y
    }
    Child.prototype.getY=function(){
        console.log(this.y)
    }
    //实例化子类,他能够访问的属性为y和getY;
    let b = new Child(10);
    console.log(b.y);
    b.getY();

原型继承

让父类的属性和方法在子类实例的原型链上

    function Father(x) {
        this.x = x
    }
    Father.prototype.getX=function(){
        console.log(this.x);
    }
  
    function Child(y){
        this.y = y
    }
    Child.prototype = new Father(); //第一步,将父类放到子类原型链上
    Child.prototype.constructor = Child; //第二步
    Child.prototype.getY=function(){   //第三步,添加自己的私有方法
        console.log(this.y)
    }
    var a = new Child(10)
    console.dir(a)

在这里插入图片描述
原型继承的弊端:原型继承不是一个拷贝继承,而是通过原型链查找到父类的方法和属性。
子类可以重写父类上的方法,这样会导致父类的其他实例也会产生影响,但是一般不会去直接操作__proto__

Call继承

    function Father(x) {
        this.x = x
    }
    Father.prototype.getX=function(){
        console.log(this.x);
    }
  
    function Child(y){
        Father.call(this);  //执行父类的构造函数,将this改为自身,相当于继承父类的私有属性
        this.y = y
    }
    Child.prototype.getY=function(){
        console.log(this.y)
    }
    var a = new Child(10)
    console.dir(a)

在这里插入图片描述
上面的例子只提供了继承父类的私有属性,父类的公有属性没有继承

寄生组合继承

使用Call继承父类的私有属性,使用原型继承父类的共有属性

    function Father(x) {
        this.x = x
    }
    Father.prototype.getX=function(){
        console.log(this.x);
    }
  
    function Child(y){
        Father.call(this);
        this.y = y
    }
    Child.prototype = Object.create(Father.prototype);

    Child.prototype.getY=function(){
        console.log(this.y)
    }
    Child.prototype.constructor = Child;

    var a = new Child(10)
    console.dir(a)

在这里插入图片描述
父类私有和共有属性是子类的私有和共有属性

class extends 继承

首先我们来看一下class定义一个类,class其实是一个语法糖,本质上还是函数,但是不能直接执行

    class Father{
        constructor(x){
            this.x = x
        }
        getX(){
           console.log(this.x);
        }
    }
    var a = new Father();
    console.dir(a);

在这里插入图片描述
和我们用prototype写方法是一样的效果

    class Father{
        constructor(x){
            this.x = x
        }
        getX(){
           console.log(this.x);
        }
    }
    class Child extends Father{  //extends
        constructor(y){
            super(100);   //super
            this.y = y;
        }
        getY(){
            console.log(y)
        }
    }
    var a = new Child(10)
    console.dir(a)

在这里插入图片描述
但是最后的结果可以看到,父类的私有属性变为了子类实例的私有属性,父类的公有方法放到的子类实例的原型上。所以ES6中的继承原理就是寄生组合继承。但是要求遵守语法,在子类的constructor中的第一行必须是super();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值