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();//}}

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