JS虽然不像JAVA那是种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢?
在构造函数中,同样属于两个新创建的函数,也是不相等的
函数Fn(名字){
this.name=名称;
这一点。显示=function () {
警报(this.name);
}
}
var其中obj1=new Fn (“AAA”);
var methoda=new Fn (" BBB ");
console.log (obj1.show==obj2.show);//错误
此时可以看出构造函数的多次创建会产生多个相同函数,造成冗余太多。
利用原型原型解决。首先观察原型是什么东西
函数Fn () {}
console.log (Fn.prototype);//构造函数表示当前的函数属于谁//__proto__==[[原型]],书面用语,表示原型指针
var fn1=new Fn ();
var fn2=new Fn ();
Fn.prototype。显示=function () {
提醒(1);
}
console.log (fn1.show==fn2.show);//真正的
此时,任何一个对象的原型上都有了展示方法,由此得出,构造函数Fn.prototype身上的添加的方法,相当于添加到了所有的Fn身上。
函数的父亲(技能){
这一点。技能=技能;
这一点。显示=function () {
警报(“我”会+ this.skill);
}
}
var=new父亲(“绝世木匠”);
函数的儿子(abc) {//这里的这个指向函数的儿子实例化对象//将父亲里面的这个改变成指向儿子的实例化对象,当相遇将父亲里面所有的属性和方法都复制到了儿子身上//Father.call (abc);//继承结束,叫适合固定参数的继承//Father.apply(这个论点);//继承结束,适用于适合不定参数的继承
}
father.show ()
var=new儿子儿子(“一般木匠”);
son.show ();
这个的么实现一个一个简单的拖拽,a→b的一个继承。把一个的功能继承给b。
HTML:
& lt; div id=" drag1 "祝辞& lt;/div>
& lt; div id=" drag2 "祝辞& lt;/div>
CSS:
*{保证金:0;填充:0;}
# drag1{宽度:100 px;高度:100 px;背景:红色;位置:绝对;}
# drag2{宽度:100 px;高度:100 px;背景:黑色;位置:绝对的,左:500 px;}
, JS:,,
函数阻力(){}
Drag.prototype={
构造函数:拖拽,
init函数(id) {
this.ele=. getelementbyid (id);
this.cliW=document.documentElement.clientWidth | | document.body.clientWidth;
this.cliH=document.documentElement.clientHeight | | document.body.clientHeight;
var=这个;
this.ele.onmousedown=function (e) {
var e=事件| | window.event;
that.disX=e.offsetX;
that.disY=e.offsetY;
document.onmousemove=function (e) {
var e=事件| | window.event;
that.move (e);
}
that.ele.onmouseup=function () {
document.onmousemove=零;
}
}
}，
移动:函数(e) {
this.x=e.clientX-this.disX;
this.y=e.clientY-this.disY;
this.x=this.x<0 & # 63; this.x=0: this.x;
this.y=this.y<0 & # 63; this.y=0: this.y;
this.x=this.x> this.cliW-this.ele.offsetWidth& # 63; this.x=this.cliW-this.ele.offsetWidth: this.x;
this.y=this.y> this.cliH-this.ele.offsetHeight& # 63; this.y=this.cliH-this.ele.offsetHeight: this.y;
this.ele.style.left=this.x +“px”;
this.ele.style.top=this.y +“px”;
}
}
新的阻力().init (“drag1”)
函数ChidrenDrag () {}
ChidrenDrag。原型=new拖()
新ChidrenDrag () .init (drag2)
函数的父亲(技巧,id) {
这一点。技能=技能;
这一点。id=id;
}
Father.prototype。显示=function () {
警报(“我是父亲,这是我的技能“+ this.skill);
}
函数的儿子(){
Father.apply(参数);
}//如果不做儿子的原型即成父亲的原型,此时会报错:儿子。显示不是一个函数
的儿子。原型=Father.prototype;//因为,如果不让儿子的原型等于父亲的原型,使儿子用应用是继承不到原型上的方法//但这是一种错误的原型继承示例,如果使用这种方式,会导致修改儿子原型上的显示方法时,会把父亲身上的显示也修改//内存的堆和栈机制
Son.prototype。显示=function () {
警报(“我是儿子,这是我的技能“+ this.skill);
}
var=new父亲(“专家级铁匠”,“父亲”);
var=new儿子儿子(“熟练级铁匠”,“儿子”);
father.show ();
son.show ();
上面的示例应该修改成以下形式:
以上红色的代码应改成:
我在Father.prototype (var) {
的儿子。原型[我]=Father.prototype[我];
}//遍历父亲的原型身上的所有方法,依次拷贝给儿子的原型,这种方式称为深拷贝
这种继承方式叫做混合继承,用到了工党继承,细胞和苹果继承。
