您的位置：首页 > Web前端 > JavaScript

javascript面向对象编程基础

2016-03-07 11:38 405 查看

该文章通过一个实例来讲解和实现JavaScript面向对象的使用：

实例：面向对象的选项卡注释：该案例首先应用面向过程来实现，然后再将面向过程改成面向对象。请注重修改的过程。实现的原理：
把面向过程的程序改写成面向对象的形式
原则：
不能有函数嵌套，但可以有全局变量
过程：
onload ->构造函数
全局变量 ->属性
函数 ->方法

改错
this、事件、闭包、传参

对象闭包
通过闭包传递this
多说无益，首先我们来看看效果：
第一步：按面向过程实现
代码如下：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style >#div1 input{background:white;}#div1 input.active{background:yellow;}#div1 div{width:200px;height: 200px;background: #ccc;display:none;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');var aBtn=oDiv.getElementsByTagName('input');var aDiv=oDiv.getElementsByTagName('div');for(var i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onclick=function(){for(var i=0;i<aBtn.length;i++){aBtn[i].className='';aDiv[i].style.display='none';}this.className='active';aDiv[this.index].style.display='block';};}};</script></head><body><div id="div1"><input class="active" type="button" value="AAA" /><input type="button" value="BBB"><input type="button" value="CCC"><div style="display: block;">IOS学习</div><div>PHP学习</div><div>C++学习</div></div></body></html>
第二步：
改写成面向对象window.onload                                       构造函数初始化整个程序                                      初始化整个程序变量                                               属性函数                                               方法函数嵌套
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style >#div1 input{background:white;}#div1 input.active{background:yellow;}#div1 div{width:200px;height: 200px;background: #ccc;display:none;}</style><script>var aBtn;var aBtn;window.onload=function(){var oDiv=document.getElementById('div1');aBtn=oDiv.getElementsByTagName('input');aDiv=oDiv.getElementsByTagName('div');for(var i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onclick=fnClick;}};function  fnClick(){for(var i=0;i<aBtn.length;i++){aBtn[i].className='';aDiv[i].style.display='none';}this.className='active';aDiv[this.index].style.display='block';}</script></head><body><div id="div1"><input class="active" type="button" value="AAA" /><input type="button" value="BBB"><input type="button" value="CCC"><div style="display: block;">IOS学习</div><div>PHP学习</div><div>C++学习</div></div></body></html>
第三步：将以上程序改写为只有方法和属性，实现面向对象
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style >#div1 input{background:white;}#div1 input.active{background:yellow;}#div1 div{width:200px;height: 200px;background: #ccc;display:none;}</style><script>window.onload=function(){new TableSwitch('div1');}function   TableSwitch(id){var _this=this;var oDiv=document.getElementById(id);this.aBtn=oDiv.getElementsByTagName('input');this.aDiv=oDiv.getElementsByTagName('div');for(var i=0;i<this.aBtn.length;i++){this.aBtn[i].index=i;this.aBtn[i].onclick=function(){_this.fnClick(this);};}};TableSwitch.prototype.fnClick=function(oBtn){for(var i=0;i<this.aBtn.length;i++){this.aBtn[i].className='';this.aDiv[i].style.display='none';}oBtn.className='active';this.aDiv[oBtn.index].style.display='block';}</script></head><body><div id="div1"><input class="active" type="button" value="AAA" /><input type="button" value="BBB"><input type="button" value="CCC"><div style="display: block;">IOS学习</div><div>PHP学习</div><div>C++学习</div></div></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航