zoukankan      html  css  js  c++  java
  • js面向过程改写成面向对象--通用方法

    响亮的标题:一个万能的,保底的。面向过程改写成面向对象的方法

    前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象的程序。小编这里介绍的方法属于一个面向过程到面向对象的过度期间,(这里要明白面向对象的一些常识:构造函数创建出对象,对象.属性,对象.方法)

    一:改写前提步骤:

      1.前提:面向过程中的所有代码都在window.onload 里面
      2.面向过程里面所有的函数都领到外面去(不能有函数嵌套)
      3.提出共同的变量为全局变量(可以有全局变量 当有两个以上的函数都用到了共同的一个变量的话--把这个变量提出来变成全局变量)

    小总结4:替换过程(注意this的使用)

    面向过程面向对象
    onload(初始化整个程序) 构造函数(初始化对象)
    全局变量 属性(对象.属性)     this.属性
    函数  方法(构造函数.原型.方法)    构造函数.prototype.方法

    ** 备注重点:
      改错:this,事件,闭包,传参
      重点:通过闭包传递this

    **小编提示:

      面向对象中70%以上都会用到this这个关键字,所以要想使用好面向对象,必须弄明白this

    二:案例展示:(不注重要是布局)

    1.面向过程案例展示

    <script>
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');      //获取父级
        var aBtn=oDiv.getElementsByTagName('input');   //获取oDiv下的所有的input
        var aDiv=oDiv.getElementsByTagName('div');     //获取oDiv下的所有div
        var i=0;    //预先设置变量 i
        //思路:清除所有的input元素上的class,并影藏对应的div。
        //然后:添加当前点击的那个input的class。并显示对应的那个div
    
        for(i=0;i<aBtn.length;i++)   
        {
            aBtn[i].index=i;    //给每一个input元素新增加一个属性index
            aBtn[i].onclick=function ()   
            {   
    
                //思路:先清除所有的input上面的class,并隐藏input对应的div
                for(i=0;i<aBtn.length;i++)        
                {
                    aBtn[i].className='';        
                    aDiv[i].style.display='none';
                }
    
                //思路:然后给当前点击的那个input添加上class = active,并显示出input对应的那个div
                this.className='active';
                aDiv[this.index].style.display='block';
            };
        }
    };
    </script>
    
    <div id="div1">
        <input class="active" type="button" value="教育" />
        <input type="button" value="财经" />
        <input type="button" value="aaa" />
        <div style="display:block;">11111</div>
        <div style="display:none">22222</div>
        <div style="display:none">33333</div>
    </div>

    2.面向过程里面所有的函数都领到外面去(不能有函数嵌套)。提出共同的变量为全局变量

    <script>
    var aDiv = null;   //声明全局变量
    var aBtn = null;   //声明全局变量
    
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');      //获取父级
        aBtn=oDiv.getElementsByTagName('input');   //获取oDiv下的所有的input
        aDiv=oDiv.getElementsByTagName('div');     //获取oDiv下的所有div
        var i=0;    //预先设置变量 i
        //思路:清除所有的input元素上的class,并影藏对应的div。
        //然后:添加当前点击的那个input的class。并显示对应的那个div
    
        for(i=0;i<aBtn.length;i++)   
        {
            aBtn[i].index=i;    //给每一个input元素新增加一个属性index
            aBtn[i].onclick=tab;
        }
    };
    
    function tab(){
        //思路:先清除所有的input上面的class,并隐藏input对应的div
        for(i=0;i<aBtn.length;i++)        
        {
            aBtn[i].className='';        
            aDiv[i].style.display='none';
        }
    
        //思路:然后给当前点击的那个input添加上class = active,并显示出input对应的那个div
        this.className='active';
        aDiv[this.index].style.display='block';
    };
    </script>
    
    <div id="div1">
        <input class="active" type="button" value="教育" />
        <input type="button" value="财经" />
        <input type="button" value="aaa" />
        <div style="display:block;">11111</div>
        <div style="display:none">22222</div>
        <div style="display:none">33333</div>
    </div>

    3,this修改后

    <script>
    window.onload = function(){
         var oTab = new TabSwitch('div1');
    }
    
    function TabSwitch(id)   //构造函数
    {
        var oDiv=document.getElementById(id);      //获取父级
        this.aBtn=oDiv.getElementsByTagName('input');   //获取oDiv下的所有的input
        this.aDiv=oDiv.getElementsByTagName('div');     //获取oDiv下的所有div
        var i=0;    //预先设置变量 i
        //思路:清除所有的input元素上的class,并影藏对应的div。
        //然后:添加当前点击的那个input的class。并显示对应的那个div
    
        var _this = this;  //this表示new出来的对象
    
        for(i=0;i<this.aBtn.length;i++)   
        {
            this.aBtn[i].index=i;    //给每一个input元素新增加一个属性index
            this.aBtn[i].onclick=function(){
                _this.tab(this);   // **  _this表示通过构造函数new出来的对象。 this表示调用事件onclick的对象--> 按钮input
            }
            
        }
    };
    
    TabSwitch.prototype.tab = function(oBtn){
        //思路:先清除所有的input上面的class,并隐藏input对应的div
        for(i=0;i<this.aBtn.length;i++)    //this表示通过构造函数new出来的对象     
        {
            this.aBtn[i].className='';        
            this.aDiv[i].style.display='none';
        }
    
        //思路:然后给当前点击的那个input添加上class = active,并显示出input对应的那个div
        oBtn.className='active';
        this.aDiv[oBtn.index].style.display='block';
    };
    </script>
    
    <div id="div1">
        <input class="active" type="button" value="教育" />
        <input type="button" value="财经" />
        <input type="button" value="aaa" />
        <div style="display:block;">11111</div>
        <div style="display:none">22222</div>
        <div style="display:none">33333</div>
    </div>

    咱使用this来讲2个面向对象的小案例:this啥时候会出问题。

      1:在定时器里面

      2:在事件里面(通过闭包的方式把this传过去)

    面向对象this案例一(正常现象):

    <script>
    function Aaa(){
        this.a = 55;
        console.log(this)   //表示new出来的对象
    }
    
    Aaa.prototype.show = function (){
        alert(this.a)
        console.log(this)   //表示new出来的对象
    }
    
    var obj1 = new Aaa();
    obj1.show();   // 55
    
    </script>

    面向对象this案例二(定时器里面的this):

    <script>
    function Aaa(){
        this.a = 55;
        setInterval(this.show, 3000);  //this为 window   证明了定时器里面的this不正常为window
            console.log(this)   //构造函数对象
    }
    Aaa.prototype.show = function (){
        alert(this)   //表示为 window
    }
    var obj1 = new Aaa();
    </script>
    
    改进方法
    
    <script>
    function Aaa(){
        this.a = 55;
        var _this = this ;   //this为构造函数的对象,然后赋给一个变量 _this
        setInterval(function(){
            _this.show();   //_this为 构造函数的对象 
        }, 3000);  
        console.log(this)   //构造函数对象
    }
    
    Aaa.prototype.show = function (){
        alert(this)   //构造函数的对象
    }
    var obj1 = new Aaa();
    
    </script>

    面向对象this案例三(事件里面的this):

    <script>
        function Aaa(){
            this.a = 55;
            document.getElementById('odiv1').onclick = this.show;
        }
    
        Aaa.prototype.show = function(){
            alert(this.a);   //打印出:undefone   因为:this为 input按钮,但是input按钮上根本没有a这个属性,所以提示为undefine
            console.log(this);   // this为 input按钮
        }
    
        window.onload = function(){
            new Aaa();
        }
    </script>
    
    改进后
    
    <script>
        function Aaa(){
            this.a = 55;
            var _this = this;  //     _this = this = 构造函数的对象
    
            document.getElementById('odiv1').onclick =function(){
                _this.show();   //_this 表示为构造函数的对象
            } 
        }
    
        Aaa.prototype.show = function(){
            alert(this.a);  //55
        }
    
        window.onload = function(){
            new Aaa();
        }
    </script>
    <input id="odiv1" type="button" value="按钮">
  • 相关阅读:
    Ch5 关联式容器(上)
    Ch4 序列式容器(下)
    Ch4 序列式容器(上)
    DNN模型学习笔记
    关于换博客的说明
    睡前一小时数学之导数的学习与证明
    OpenJudge 666:放苹果 // 瞎基本DP
    OpenJudge 2990:符号三角形 解析报告
    OpenJudge1700:八皇后问题 //不属于基本法的基本玩意
    BZOJ1088扫雷Mine 解析报告
  • 原文地址:https://www.cnblogs.com/andyhxl/p/6079625.html
Copyright © 2011-2022 走看看