• JS继承方式


    原型链继承

    //定义一个父类
    function Father(name) {
        this.name = name;
        this.age = 20;
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }
    
    //定义一个子类
    function Child(name,age) {
        this.name = name;
        this.age = age
    }
    
    //最重要的一步,将父类的实例为子类的原型
    Child.prototype = new Father();
    let child1 = new Child('Marry',10);
    let child2 = new Child('luccy',17);
    

    缺点:

    1. 子类毕竟公用的是同一个父类,容易造成如果其中一个子类修改了原型上的内容,则其它的也会跟着一起更改
    2. 继承单一
    3. 新实例无法向父类实例,传参
      特点: 继承了父类的构造函数当中的属性,也继承了父类原型上的属性

    构造函数继承

    //定义一个父类
    function Father(name) {
        this.name = name;
        this.age = 20;
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }
    
    //定义一个子类
    function Child(name,age) {
        Father.call(this,'father');
        this.name = name;
        this.age = age
    }
    
    let child1 = new Child('Marry',10);
    let child2 = new Child('luccy',17);
    

    缺点:

    1. 没有办法继承父类原型上的内容
    2. 无法实现构造函数复用
    3. 每个新实例否有父类构造函数的副本

    优点:

    1. 可以向父级构造函数进行传参
    2. 可以继承多个构造函数属性

    组合继承(构造函数继承 + 原型链继承)

    //定义一个父类
    function Father(name) {
        this.name = name;
        this.age = 20;
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }
    
    //定义一个子类
    function Child(name,age) {
        Father.call(this,'father');
        this.name = name;
        this.age = age
    }
    Child.prototype = new Father();
    let child1 = new Child('Marry',10);
    let child2 = new Child('luccy',17);
    
    

    特点:

    1. 既可以继承父类的原型上的属性,又可以继承父类构造函数当中的属性
    2. 可继承,可复用
      缺点: 毕竟调用了两次父类的构造函数,会有性能上的影响

    原型式继承

    //定义一个父类
    function Father(name) {
        this.name = name;
        this.age = 20;
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }
    
    //这里是核心步骤
    function content(obj) {
        function F() {};
        F.prototype = obj;
        return new F();
    }
    
    var sup = content(new Father())
    

    缺点:

    1. 所有实例都会继承原型上的属性
    2. 无法实现复用(新实例属性都是后添加的)

    寄生式继承

    //定义一个父类
    function Father(name) {
        this.name = name;
        this.age = 20;
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }
    
    
    function content(obj) {
        function F() {};
        F.prototype = obj;
        return new F();
    }
    
    function a() {
        var sup = content(new Father());
        sup.name = 'Tom'
        return sup;
    }
    
    var child1 = a();
    
    
    

    缺点: 没有用到原型,无法复用

    寄生组合式

    函数的原型等于另一个实例

    在函数中用apply或者call引入另一个构造函数

    //定义一个父类
    function Father(name) {
        this.name = name;
        this.age = 20;
    }
    Father.prototype.say = function () {
        console.log(this.name);
    }
    
    
    function content(obj) {
        function F() {};
        F.prototype = obj;
        return new F();
    }
    
    function Child(name) {
        Father.call(this,'father');
        this.name = name;
    }
    var sup = new Father();
    Child.prototype = content(sup);
    sup.constructor = Child;
    
    var child1 = new Child('Marry')
    
    

    博客原文https://www.cnblogs.com/ranyonsue/p/11201730.html

  • 相关阅读:
    ORACLE字符集基础知识
    Outlook 2013 在邮件里面点击超链接时弹出“组织策略阻止我们为您完成此操作”
    Apache Kafka: 优化部署的10个最佳实践
    经济学人使用Golang构建微服务历程回顾
    如何做自己的服务监控?spring boot 2.x服务监控揭秘
    web框架的前生今世--从servlet到spring mvc到spring boot
    如何做自己的服务监控?spring boot 1.x服务监控揭秘
    手机上不了网
    Cross-Browser, Event-based, Element Resize Detection(转)
    迷你MVVM框架 avalonjs 组件编写指南
  • 原文地址:https://www.cnblogs.com/fanzhikang/p/12497243.html
Copyright © 2020-2023  润新知