专栏首页前端学习归纳总结Javascript 组合继承 原型链继承 寄生继承

Javascript 组合继承 原型链继承 寄生继承

Javascript继承通常有三种方式。

第一种:组合式继承:

    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name);
    };
    function SubType(name, age) {
        //通过call()调用SuperType的构造函数,继承SuperType属性
        SuperType.call(this, name);                 //第二次调用      SuperType()
        this.age = age;
    }
    SubType.prototype = new SuperType();  //第一次调用
    SubType.prototype.sayAge = function() {
        console.log(this.age);
    };
    var instancel = new SubType("Nicholas", 12);    
    SuperType()

该继承通过构造函数继承原型链的方法和父类的属性,但该方法会有两次调用父类,第一次是在继承原型链,第二次在继承属性。

第二种:原型链继承

//原型式继承实例代码:
    function createObj(o) {//对传入的对象执行了一次浅复制
        function F() {}
        F.prototype = o;
        return new F();
    }
    var person = {
        name: "Tom",
        friends: ["one", "two", "van"]
    };
    var huPs = createObj(person);
    huPs.name = "GRE";
    huPs.friends.push("Rob");

    var yePs = createObj(person);
    yePs.name = "Lin";
    yePs.friends.push("Sari");

    console.log(person.friends);//"one,two,van,Rob,Sari"

这个没什么,Js的原型继承特性。

第三种:寄生式继承

在第一种的方法上,我们在第一次调用父类,也就是继承原型的时候,实际上只需要父类的原型副本,那么取得副本,也就省去了这一次调用。

该继承技术是最常用的。

function inheritPrototype(subType, superType) {
        var prototype = object(superType.prototype);    //创建对象 超类型原型副本
        prototype.constructor = subType;                //增强对象 为副本增添construct属性
        subType.prototype = prototype;                  //指定对象
    }
    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name);  
    };
    function SubType(name, age) {
        SuperType.call(this, name);
        this.age = age;
    }
    inheritPrototype(SubType, SuperType);
    SubType.prototype.sayAge = function() {
        console.log(this.age);
    };

 该文章参考自https://my.oschina.net/quidditch/blog/307551

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack系列-第三篇流程杂记

    本文章个人理解, 只是为了理清webpack流程, 没有关注内部过多细节, 如有错误, 请轻喷~

    菜的黑人牙膏
  • 分页

    菜的黑人牙膏
  • backbond Model方法(set)

    backbond的Model,其中存在一些操作属性的方法,而在这些方法中,最重要的就是set方法,其余的方法大部分都基于这个方法实现的,在backbond开发版...

    菜的黑人牙膏
  • Laravel 5.5 为响应请求提供的可响应接口

    Laravel 5.5 的路由中增加了一种新的返回类型:可相应接口(Responsable)。该接口允许对象在从控制器或者闭包路由中返回时自动被转化为标准的 H...

    小李刀刀
  • 第158天:面向对象入门

    在这里我们可以理解为创造对象的几种模式:单例模式,工厂模式,构造函数模式,原型模式等。

    半指温柔乐
  • 一文理解 this、call、apply、bind

    记得差不多在两年多之前写过一篇文章 两句话理解js中的this,当时总结的两句话原话是这样的:

    木子星兮
  • JS面试之函数(1)

    1.函数声明有预解析,而且函数声明的优先级高于变量; 2.使用Function构造函数定义函数的方式是一个函数表达式,这种方式会导致解析两次代码,影响性能。第一...

    火狼1
  • JS面向对象详解

    面向对象和面向过程是两种不同的编程思想,刚开始接触编程的时候,我们大都是从面向过程起步的,毕竟像我一样,大家接触的第一门计算机语言大概率都是C语言,C语言就是一...

    grain先森
  • 闭包(Closure)

    要搞懂闭包首先得搞懂什么是作用域,作用域分为全局作用域和局部(函数)作用域,每个作用域都有与他关联的变量对象(定义的所有变量和函数),作用域简单理解就是变量执行...

    _kyle
  • vue中使用节流函数踩坑记录

    一个常见的业务场景,我们要在input搜索框输入结束后,发送相关请求,获取搜索数据。频繁的事件触发会导致接口请求过于频繁。所以需要我们对此加以限制,来禁止不必要...

    念念不忘

扫码关注云+社区

领取腾讯云代金券