帝王谷资源网 Design By www.wdxyy.com
JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢?
一、构造函数继承
在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn(name){ this.name = name; this.show = function(){ alert(this.name); } } var obj1 = new Fn("AAA"); var obj2 = new Fn("BBB"); console.log(obj1.show==obj2.show); //false 此时可以看出构造函数的多次创建会产生多个相同函数,造成冗余太多。 利用原型prototype解决。首先观察prototype是什么东西 function Fn(){} console.log(Fn.prototype); //constructor表示当前的函数属于谁 //__proto__ == [[prototype]],书面用语,表示原型指针 var fn1 = new Fn(); var fn2 = new Fn(); Fn.prototype.show = function(){ alert(1); } console.log(fn1.show==fn2.show); //ture 此时,任何一个对象的原型上都有了show方法,由此得出,构造函数Fn.prototype身上的添加的方法,相当于添加到了所有的Fn身上。
二、call和applay继承
function Father(skill){ this.skill = skill; this.show = function(){ alert("我会"+this.skill); } } var father = new Father("绝世木匠"); function Son(abc){ //这里的this指向函数Son的实例化对象 //将Father里面的this改变成指向Son的实例化对象,当相遇将father里面所有的属性和方法都复制到了son身上 //Father.call(this,abc);//继承结束,call适合固定参数的继承 //Father.apply(this,arguments);//继承结束,apply适合不定参数的继承 } father.show() var son = new Son("一般木匠"); son.show();
三、原型链继承(demo)
这个的么实现一个一个简单的拖拽,a->b的一个继承。把a的功能继承给b。
HTML:
<div id="drag1"></div> <div id="drag2"></div>
CSS:
*{margin: 0;padding: 0;} #drag1{width: 100px;height: 100px;background: red;position: absolute;} #drag2{width: 100px;height: 100px;background: black;position: absolute;left: 500px;}
JS:
function Drag(){} Drag.prototype={ constructor:Drag, init:function(id){ this.ele=document.getElementById(id); this.cliW=document.documentElement.clientWidth||document.body.clientWidth; this.cliH=document.documentElement.clientHeight||document.body.clientHeight; var that=this; this.ele.onmousedown=function(e){ var e=event||window.event; that.disX=e.offsetX; that.disY=e.offsetY; document.onmousemove=function(e){ var e=event||window.event; that.move(e); } that.ele.onmouseup=function(){ document.onmousemove=null; } } }, move:function(e){ this.x=e.clientX-this.disX; this.y=e.clientY-this.disY; this.x=this.x<0"color: #ff0000">四、混合继承
function Father(skill,id){ this.skill = skill; this.id = id; } Father.prototype.show = function(){ alert("我是father,这是我的技能"+this.skill); } function Son(){ Father.apply(this,arguments); } //如果不做son的原型即成father的原型,此时会报错:son.show is not a function Son.prototype = Father.prototype; //因为,如果不让son的原型等于father的原型,son使用apply是继承不到原型上的方法 //但这是一种错误的原型继承示例,如果使用这种方式,会导致修改son原型上的show方法时,会把father身上的show也修改 //内存的堆和栈机制 Son.prototype.show = function(){ alert("我是son,这是我的技能"+this.skill); } var father = new Father("专家级铁匠","father"); var son = new Son("熟练级铁匠","son"); father.show(); son.show(); 上面的示例应该修改成以下形式: 以上红色的代码应改成: for(var i in Father.prototype){ Son.prototype[i] = Father.prototype[i]; } //遍历father的原型身上的所有方法,依次拷贝给son的原型,这种方式称为深拷贝 这种继承方式叫做混合继承,用到了for-in继承,cell和apple继承。五、Es6的class继承(demo)
这个demo的功能和原型链继承的demo功能一样,a->b的继承
HTML:
<div id="drag1"></div> <div id="drag2"></div>
CSS:
*{margin: 0;padding: 0;} #drag1{width: 100px;height: 100px;background: red;position: absolute;} #drag2{width: 100px;height: 100px;background: black;position: absolute;left: 500px;}
JS:
class Drag{ constructor(id){ this.ele=document.getElementById(id); this.init(); }; init(){ var that=this; this.ele.onmousedown=function(e){ var e=event||window.event; that.disX=e.offsetX; that.disY=e.offsetY; document.onmousemove=function(e){ var e=event||window.event; that.move(e); } that.ele.onmouseup=function(){ document.onmousemove=null; that.ele.onmouseup=null; } } }; move(e){ this.ele.style.left=e.clientX-this.disX+"px"; this.ele.style.top=e.clientY-this.disY+"px"; } } new Drag("drag1"); class ExtendsDrag extends Drag{ constructor(id){ super(id); } } new ExtendsDrag("drag2")我总结的这几种继承方法.两个demo继承的方法大家最好在编译器上跑一下,看看。这样才能更深刻的去理解。尤其是原型链的继承,js作为一个面向对象的编程语言,还是很常用的。
总结
以上所述是小编给大家介绍的JS中的继承及实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
js中的继承
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]