zoukankan      html  css  js  c++  java
  • JS中的四大继承方案

     
    所谓继承,就是子类继承父类中的属性和方法。
     
     
    方案一:原型继承
     
    方法:子类的原型指向父类的一个实例。
    function A() {
        this.x = 100;
    }
    A.prototype.getX = function getX() {
        console.log(this.x);
    };
    
    function B() {
        this.y = 200;
    }
    B.prototype.sum=function(){}
    B.prototype = new A; //B子类 => A父类,让子类B的原型指向父类A的实例
    
    B.prototype.getY = function getY() {
        console.log(this.y);
    };
    let b = new B;

    通过B.prototype = new A这一句话达成继承。

    js中的面向对象的机制都是基于原型链完成的,所以js中的继承也可以是基于原型链的,但这其中又有很多弊端。

    比如B之前的原型B.prototype上的方法b已经查找不到,b的constructor应该是B,但现在是A,b可以通过b.__proto__或b.__proto__.__proto__肆意修改父类上的属性和方法,而父类上不管私有还是公有的属性和方法都会成为子类公有的,这些种种问题都是需要注意的,这大概就是IE浏览器禁止使用__proto__的原因吧。

     
    方案二:call继承
     
    方法:把父类当做普通函数执行,让其执行的时候,方法中的this变为子类的实例即可。
    function A() {
        this.x = 100;
    }
    A.prototype.getX = function getX() {
        console.log(this.x);
    };
    
    function B() {
        //call继承
        A.call(this);  //=>this.x = 100; => b.x=100;
        this.y = 200;
    }
    B.prototype.getY = function getY() {
        console.log(this.y);
    };
    let b = new B;

    call继承只能继承父类中的私有属性(继承的私有属性赋值给子类实例的私有属性),而且是类似拷贝过来一份,不是链式查找;因为只是把父类当做普通的方法执行,所以父类原型上的公有属性方法无法被继承过来。
     
     
    方案三:寄生组合继承
     
    方法:call继承+变异版的原型继承共同完成的。
    function A() {
        this.x = 100;
    }
    A.prototype.getX = function getX() {
        console.log(this.x);
    };
    
    function B() {
        A.call(this);
        this.y = 200;
    }
    //=>Object.create(OBJ) 创建一个空对象,让其__proto__指向OBJ(把OBJ作为空对象的原型)
    B.prototype = Object.create(A.prototype);
    B.prototype.constructor = B; //把constructor补上
    B.prototype.getY = function getY() {
        console.log(this.y);
    };
    let b = new B;
    console.log(b);

     
    这个方案利用了call继承实现私有到私有,利用原型继承实现了公有到公有,当然还是原型继承的一些弊端应该注意。
     
     
    方案四:ES6中class类
     
    class A {
        constructor() {
            this.x = 100;
        }
        getX() {
            console.log(this.x);
        }
    }
    //=>extends继承和寄生组合继承基本类似
    class B extends A {
        constructor() {
            super(); //=>一但使用extends实现继承,只要自己写了constructor,就必须写super
            this.y = 200;
        }
        getY() {
            console.log(this.y);
        }
    }
    
    let b = new B;

     
    其实extends继承和寄生组合继承基本类似,而且必须加上super()函数,它相当于A.call(this)。
     
    项目中我们会用到继承地方比如自己写插件或者类库的时候,还有就是react中用class实现继承。
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    C#基础笔记(第二十一天)
    C#基础笔记(第十九天)
    C#基础笔记(第十八天)
    C#基础笔记(第十七天)
    C#基础笔记(第十六天)
    C#基础笔记(第十五天)
    [PyTorch 学习笔记] 6.1 weight decay 和 dropout
    PyTorch ResNet 使用与源码解析
    [PyTorch 学习笔记] 5.2 Hook 函数与 CAM 算法
    [PyTorch 学习笔记] 5.1 TensorBoard 介绍
  • 原文地址:https://www.cnblogs.com/ronaldo9ph/p/12392064.html
Copyright © 2011-2022 走看看