标签：ror 实现 定义 ret tor 点击 pre height blog
今天学习继承时候遇到的一个小问题，总结一下
布局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 }
最终完成整个继承
标签：ror 实现 定义 ret tor 点击 pre height blog
原文地址：http://www.cnblogs.com/liudongpei/p/6024925.html
