面向过程编程到面向对象编程的转换实例

1、面向过程(OP)和面向对象(OO)：

面向过程是是一种以过程为中心的编程思想；

面向对象主要是把事物给对象化。

2、面向对象编程：适宜大型项目、类库、游戏

面向过程编程：适宜效果类

3、对象：1属性 2方法

类：对象的集合

4、创建对象的方法： 对象的首字母一般都大写 Date( )

（ 1 ）

1  var  obj={ 
2         name:"gfhs"; // 属性
3         show:function( ){    alert(this.name);        }   //方法

View Code

};

（ 2 ）

1  var obj=function( ){   //   构造一个类
2             } // 功能不一样  类  构造函数
3         obj.prototype.showNmae=function(){ alert(this.name); };  //原型 
4         var  yue=new obj( );  //给类添加对象
5         yue.name="gfhf";  //给类添加属性

View Code

（3 ）

1 var obj=function( ){  
2         this.name = name;
3         this.show= function(){alert(this.name); }
4         var yue = new obj("wy");//创建对象并赋值

View Code

（ 4 ）

 1 var Person=function (name,age){
 2 //功能:构造一个类(构造函数)
 3 this.name=name;
 4 this.age=age;
 5 this.showName=function (){
 6 alert(this.name);
 7 }
 8 };//功能：类，构造函数
 9 var tang=new Person("tang","18");
10 var yue=new Person("yue","18");
11 Person.prototype.sex="man";
12 Person.prototype.showSex=function (){
13 alert(this.sex);
14 }
15 tang.showSex();
16 yue.showSex();
17 //添加属性  
18 obj.sex="girl";
19 //添加方法 
20  obj.showSex=function(){    alert(this.sex);       };

View Code

5、属性与变量的区别

属性：有归属，前面跟有对象

变量：无归属

方法：有归属

函数：无归属

6、原型的基本格式：

1 String.prototype.index="哈哈";    //对象名.prototype.属性=值；
2 String.prototype.showIndex=function (){  //对象名.prototype.方法名=function( ){ };
3  
4  
5 alert(this.index);
6 }

View Code

7、原型的使用方式

1  Date.prototype.getWeek=function (){
2  
3 var arr=["日","一","二","三","四","五","六"];
4 var oDay=this.getDay();
5 // alert("星期"+arr[oDay]);
6 return "星期"+arr[oDay];
7 }
8 var newDate=new Date();
9 alert(newDate.getWeek());

View Code

8、原型链

function Obj(){};

var wyy=new Obj();

alert(wyy.name);

//1.wyy这个对象上面有没有name->没有

//2.Obj这个对象上面有没有name->没有

//3.Object这个对象上面有没有name->没有,返回undefined，并赋值给wyy

9、判断对象类型：

// alert(arr instanceof Array);

// alert(arr instanceof Object);

// alert(arr instanceof Function);

子类 instanceof 父类 ---》ture or false

10、this的指向 谁调用了，this就是谁

function show(){

alert(this);

}

（1）show();//window

（2） var arr=[1,2];

arr.show1=show;

arr.show1(); //arr

（3） document.onclick=show;//document

（4）setTimeout(show,100);//window

（5）new show();//Object

（6）var tang=new show();// Object

11、面向过程编程---》面向对象编程以tab切换为例子

面向过程编程的tab切换

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 div{
 8 height: 100px;
 9 width: 100px;
10 background-color: #ccc;
11 display: none;
12 }
13 </style>
14 <script type="text/javascript">
15 window.onload=function (){
16 var aBtn=document.getElementsByTagName("input");
17 var aDiv=document.getElementsByTagName("div");
18 for (var i = 0; i < aBtn.length; i++) {
19 aBtn[i].index=i;
20 aBtn[i].onclick=function (){
21  
22 for (var i = 0; i < aBtn.length; i++) {
23 aDiv[i].style.display="none";
24 };
25 aDiv[this.index].style.display="block";
26 }
27 };
28 }
29 </script>
30 </head>
31 <body>
32 <input type="button" value="按钮1">
33 <input type="button" value="按钮2">
34 <input type="button" value="按钮3">
35 <div style="display:block">块1</div>
36 <div>块2</div>
37 <div>块3</div>
38 </body>
39 </html>

View Code

面向过程tab切换

（1）创建构造函数，并别把变量变成属性，既在变量前加上所属对象，此为this

 1 function Tab(){
 2 this.aBtn=document.getElementsByTagName("input");
 3 this.aDiv=document.getElementsByTagName("div");
 4  
 5 for (var i=0; i<this.aBtn.length; i++){
 6  
 7 this.aBtn[i].index=i;
 8 this.aBtn[i].onclick=function (){
 9  
10 for (var i = 0; i < aBtn.length; i++) {
11 aDiv[i].style.display="none";
12 };
13 aDiv[this.index].style.display="block";
14 }
15 }
16 }

View Code

（2）把它的匿名函数抽出来办成一个原型方法

1 Tab.prototype.fnClick=function (that){
2 for (var i = 0; i < this.aBtn.length; i++) {
3 this.aDiv[i].style.display="none";
4 };
5 this.aDiv[that.index].style.display="block";
6 }

View Code

（3）在构造函数中引用原型方法，注意此时方法的对象this非Tab( )的this,所以要在this还是正确的时候给this赋给一个变量来保存

 1 function Tab(){
 2  
 3 this.aBtn=document.getElementsByTagName("input");
 4 this.aDiv=document.getElementsByTagName("div");
 5  
 6 var _this=this;
 7  
 8 for (var i=0; i<this.aBtn.length; i++){
 9  
10 this.aBtn[i].index=i;
11 this.aBtn[i].onclick=function (){
12 _this.fnClick(this);
13 }
14 }
15 }

View Code

完整代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 div{
 8 height: 100px;
 9  100px;
10 background-color: #ccc;
11 display: none;
12 }
13 </style>
14 <script type="text/javascript">
15 Tab.prototype.fnClick=function (that){
16 for (var i = 0; i < this.aBtn.length; i++) {
17 this.aDiv[i].style.display="none";
18 };
19 this.aDiv[that.index].style.display="block";
20 }
21  
22 function Tab(){
23  
24 this.aBtn=document.getElementsByTagName("input");
25 this.aDiv=document.getElementsByTagName("div");
26  
27 var _this=this;
28  
29 for (var i=0; i<this.aBtn.length; i++){
30  
31 this.aBtn[i].index=i;
32 this.aBtn[i].onclick=function (){
33 _this.fnClick(this);
34 }
35 }
36 }
37  
38 window.onload=function (){
39 new Tab();
40 }
41 </script>
42 </head>
43 <body>
44 <input type="button" value="按钮1">
45 <input type="button" value="按钮2">
46 <input type="button" value="按钮3">
47 <div style="display:block">块1</div>
48 <div>块2</div>
49 <div>块3</div>
50 </body>
51 </html>
52

View Code

个人心得：在面向对象编程的过程中最难最纠结的就是this的指向，只要弄清this的指向，编程就会变得轻松。当然对于tab切换这样的效果类使用面向对象编程显然比使用面向过程编程纠结，而面向对象编程在大型项目、类库、游戏中就能显现出它的优势。