首页 > 代码库 > 关于继承的参数
关于继承的参数
今天学习继承时候遇到的一个小问题,总结一下
布局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 }
最终完成整个继承
关于继承的参数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。