首页 > 代码库 > 关于继承的参数

关于继承的参数

今天学习继承时候遇到的一个小问题,总结一下

布局html和css如下:

1 <div id="div1"></div>
2 <div id="div2"></div>
1 div{
2     width: 200px;
3     height: 200px;
4     background: #ccc;
5     margin: 10px;
6 }

效果如下:

技术分享

定义一个Box1对象,实现点击第一个div颜色变红

 1 function Box1(id){
 2     this.oBox = document.getElementById(id);
 3     this.toRed();
 4 }
 5 Box1.prototype.toRed = function(){
 6     this.oBox.onclick = function(){
 7         this.style.background = "red";
 8     };
 9 };
10 new Box1("div1");

定义一个Box2对象继承Box1,点击第二个div时颜色变红

 1 function Box2(id){
 2     Box1.call(this,id);
 3     this.toPink();
 4 }
 5 
 6 Box2.prototype = new Box1();
 7 Box2.prototype.constructor = Box2;
 8 
 9 Box2.prototype.toPink = function(){
10     this.oBox.onclick = function(){
11         this.style.background = "pink";
12     };
13 };
14 new Box2("div2");

此时,运行在浏览器会报一个错误

    Uncaught TypeError: Cannot set property ‘onclick‘ of null

这个错误的原因在于Box2.prototype = new Box1(),将Box1的实例化的时候,需要传入一个id,从文档获得这个id的对象。但是实现继承并不需要某个具体的实例对象。

解决办法:在最开始的Box1的构造函数中判断是否传入参数,没有传参意味着进行继承

1 function Box1(id){
2     //判断是否传参,不传则直接返回
3     if(!id){
4         return;
5     }
6     this.oBox = document.getElementById(id);
7     this.toRed();
8 }

最终完成整个继承

 

关于继承的参数