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

关于继承的参数

2024-08-18 14:48:37   221人阅读

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

布局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 }

最终完成整个继承

 

关于继承的参数


联系
我们