js寄生组合式继承使用详解

这次给大家带来js寄生组合式继承使用详解,js寄生组合式继承使用的注意事项有哪些,下面就是实战案例,一起来看一下。

组合继承:

function Person( uName ){      this.skills = [ 'php', 'javascript' ];      this.userName = uName;    }    Person.prototype.showUserName = function(){      return this.userName;    }    function Teacher ( uName ){      Person.call( this, uName );    }    Teacher.prototype = new Person();    var oT1 = new Teacher( 'ghostwu' );    oT1.skills.push( 'linux' );    var oT2 = new Teacher( 'ghostwu' );    console.log( oT2.skills ); //php,javascript    console.log( oT2.showUserName() ); //ghostwu

登录后复制

组合继承有个缺点,父类的构造函数会被调用两次.

第11行,设置子类原型对象(prototype),调用了第一次

第9行,实例化对象的时候,又调用一次

构造函数的目的是为了复制属性,第9行肯定是不能少的,第11行的目的是为了获取到父类原型对象(prototype)上的方法,基于这个目的,有没有别的方法

可以做到 在不需要实例化父类构造函数的情况下,也能得到父类原型对象上的方法呢? 当然可以,我们可以采用寄生式继承来得到父类原型对象上的方法

function Person( uName ){      this.skills = [ 'php', 'javascript' ];      this.userName = uName;    }    Person.prototype.showUserName = function(){      return this.userName;    }    function Teacher ( uName ){      Person.call( this, uName );    }    function object( o ){      var G = function(){};      G.prototype = o;      return new G();    }    function inheritPrototype( subObj, superObj ){      var proObj = object( superObj.prototype ); //复制父类superObj的原型对象      proObj.constructor = subObj; //constructor指向子类构造函数      subObj.prototype = proObj; //再把这个对象给子类的原型对象    }    inheritPrototype( Teacher, Person );    var oT1 = new Teacher( 'ghostwu' );    oT1.skills.push( 'linux' );    var oT2 = new Teacher( 'ghostwu' );    console.log( oT2.skills ); //php,javascript    console.log( oT2.showUserName() ); //ghostwu

登录后复制

其实,说白了寄生组合式继承就是一个借用构造函数 + 相当于浅拷贝父类的原型对象

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

以上就是js寄生组合式继承使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2770778.html

(0)
上一篇 2025年3月8日 12:41:46
下一篇 2025年3月3日 20:39:45

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JSprototype对象使用教学

    这次给大家带来JSprototype对象使用教学,JSprototype对象使用的注意事项有哪些,下面就是实战案例,一起来看一下。 我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来…

    编程技术 2025年3月8日
    000
  • JS实现棋盘覆盖

    这次给大家带来js实现棋盘覆盖,js实现棋盘覆盖的注意事项有哪些,下面就是实战案例,一起来看一下。 之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaS…

    编程技术 2025年3月8日
    200
  • js怎么在导航栏互相切换中英文

    这次给大家带来js怎么在导航栏互相切换中英文,js在导航栏互相切换中英文的注意事项有哪些,下面就是实战案例,一起来看一下。 ul的高度为li的一半,ul{overflow:hidden} li:hover{margin-top:-40px;…

    编程技术 2025年3月8日
    200
  • js正则快速记忆方法

    这次给大家带来js正则快速记忆方法,js正则快速记忆的注意事项有哪些,下面就是实战案例,一起来看一下。 我们知道,正则表达式是一个处理字符串中很实用的技巧。然而,即便是Javascript写的很厉害的程序猿,有时也会忘掉正则表达式的语法,从…

    编程技术 2025年3月8日
    200
  • JS轻松实现轮播图

    这次给大家带来JS轻松实现轮播图,JS轻松实现轮播图的注意事项有哪些,下面就是实战案例,一起来看一下。 思路: 1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2、Con…

    编程技术 2025年3月8日
    200
  • 在JS中怎么实现数字与字符串相互转换

    这次给大家带来在JS中怎么实现数字与字符串相互转换,在JS中实现数字与字符串相互转换的注意事项有哪些,下面就是实战案例,一起来看一下。 var print = new Function(“x”, “document.write(x)”); …

    编程技术 2025年3月8日
    200
  • vue.js双向绑定使用详解

    这次给大家带来vue.js双向绑定使用详解,vue.js双向绑定使用的注意事项有哪些,下面就是实战案例,一起来看一下。 vue.js初级入门之最基础的双向绑定操作,具体内容如下 首先在页面引入vue.js以及其他需要用到的或者可能要用到的插…

    编程技术 2025年3月8日
    200
  • js实现图片匀速淡入淡出

    这次给大家带来js实现图片匀速淡入淡出,js实现图片匀速淡入淡出的注意事项有哪些,下面就是实战案例,一起来看一下。 淡入效果 * { margin: 0; padding: 0; } p { border: 2px solid #aaa; …

    编程技术 2025年3月8日
    200
  • JS实现评价星级

    这次给大家带来JS实现评价星级,JS实现评价星级的注意事项有哪些,下面就是实战案例,一起来看一下。 虽然简单,还是有几个注意的地方: 1. 未点击时的hover效果,星星会随鼠标移动亮起来喔。 2. 点击后关闭hover效果。 3. 点击同…

    编程技术 2025年3月8日
    200
  • JS单双引号嵌套使用详解

    这次给大家带来JS单双引号嵌套使用详解,JS单双引号嵌套使用的注意事项有哪些,下面就是实战案例,一起来看一下。 单引号和双引号之间可以相互嵌套。 1、单引号内只能嵌套双引号。 2、双引号内只能嵌套单引号。 3、如果想在双引号内,再嵌套双引号…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论