js面向过程改写成面向对象

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

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

一：改写前提步骤：

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

小总结4：替换过程（注意this的使用）

** 备注重点：
　　改错：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 type="button" value="教育" />  <input type="button" value="财经" />  <input type="button" value="aaa" />  <div >11111</div>  <div >22222</div>  <div >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 type="button" value="教育" />  <input type="button" value="财经" />  <input type="button" value="aaa" />  <div >11111</div>  <div >22222</div>  <div >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 type="button" value="教育" />  <input type="button" value="财经" />  <input type="button" value="aaa" />  <div >11111</div>  <div >22222</div>  <div >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="按钮">

原标题：js面向过程改写成面向对象

关键词：JS