js混合模式继承出现问题的解决

1.混合模式继承就是就是用call或apply继承属性，原型链方式继承方法。

在上一篇博文的实例中遇到一个问题，就是用原型链的方式有错误，可以回去看点击打开链接

先来看看混合模式继承的写法：

<script type="text/javascript">
function Parent(name,age){
this.name=name;
this.age=age;
}
Parent.prototype.info=function (){
alert(this.name+this.age);
}

function Child(name,age,act){
//继承父类的属性
Parent.call(this,name,age);
this.act=act;
}
//用父类的实例去赋给子类原型，引用父类的原型
Child.prototype=new Parent();
//添加自己的原型方法
Child.prototype.show=function (){
alert(this.act)
}
//子类实例化，发现实现了继承，还有了自己的属性和方法
var person=new Child('曹操',35,'杀猪');
person.info();
person.show();
/*用instanceof去检测，结果为true，这是跟用for/in循环遍历的区别，
说明实例与父类在一条原型链上 */
alert(person instanceof Parent);
</script>

在js特效中怎么应用呢？在上一篇直接把for/in继承方法改成原型链方法是会出现错误的。下面用一个简单的点击出现隐藏的例子来说明：



用对象的方式去做，代码如下：

function Show(btn,box){
var _this=this;
this.oBtn=document.getElementById(btn);
this.oBox=document.getElementById(box);
this.oBtn.onclick=function (){
_this.clickFn();
}
}
Show.prototype.clickFn=function (){
if(this.oBox.style.display=='block'){
this.oBox.style.display='none';
}else{
this.oBox.style.display='block';
}
}
window.onload=function (){
new Show('btn','box');
}

下面就来做个继承：

function Child(){
Show.apply(this,arguments);
}
/*直接按照开始原型链的方式继承方法，控制台输出错误
Uncaught TypeError: Cannot set property 'onclick' of null*/
//			Child.prototype=new Show();
/*而用下面的方法是可以的*/
for (var i in Show.prototype) {
Child.prototype[i]=Show.prototype[i];
}

上面提示的错误，在我看来，主要是实例化的时候没有传入参数，属性就是未定义，当然就会造成里面的onclik事件都不知道你是什么东西触发的，这个错误提示跟没有加window.onload去添加事件的错误提示是一样，要用原型链的方式，然后我改了下面的一些代码：

function Show(btn,box){
/*把下面几行注释掉，然后子类构造函数Child里面添加这些内容*/
//				var _this=this;
this.oBtn=document.getElementById(btn);
this.oBox=document.getElementById(box);
//				this.oBtn.onclick=function (){
//					_this.clickFn();
//				}
}

最后在这里就实现了原型链的继承。归根结底，最重要的是在构造函数里面不能调用它的属性。