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="按钮">