js面向对象

=========JS面向对象1===========

1. JS自带很多对象，这些对象下有很多方法。例如： Date() Array()

2. 面向对象特点（OOP）：

3 . 面向对象的组成：对象的属性和方法。

4. 工厂函数：（模仿系统自带的对象）

 1 //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
 2 
 3 //new后面调用的函数 : 叫做构造函数
 4 
 5 function CreatePerson(name){
 6     
 7     this.name = name;
 8     this.showName = function(){
 9         alert( this.name );
10     };
11     
12 }
13 
14 var p1 = new CreatePerson('小明');
15 //p1.showName();
16 var p2 = new CreatePerson('小强');
17 //p2.showName();
18 
19 alert( p1.showName == p2.showName );  //false
20 
21 var arr = new Array();
22 var date = new Date();

5. 基本类型的比较是只比较值相等，而对像之间的比较会比较值和引用地址是否相等。

6. 原型：去改写对象下面公用的方法或者属性，让公用的方法或者属性在内存中存在一份（提高性能）

7. 原型（prototype）方法要写在构造函数后面。

8. 面向对象的写法：

1 function 构造函数(){
2     this.属性
3 }
4 
5 构造函数.原型.方法 = function(){};
6 
7 
8 var 对象1 = new 构造函数();
9 对象1.方法();

 1 //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
 2 
 3 //new后面调用的函数 : 叫做构造函数
 4 
 5 function CreatePerson(name){
 6     
 7     this.name = name;
 8     
 9 }
10 CreatePerson.prototype.showName = function(){
11     alert( this.name );
12 };
13 
14 var p1 = new CreatePerson('小明');
15 //p1.showName();
16 var p2 = new CreatePerson('小强');
17 //p2.showName();
18 
19 alert( p1.showName == p2.showName );  //true
20 
21 var arr = new Array();
22 var date = new Date();

9. 使用面向对象的方式编写选项卡：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
  8 .active{ background:red;}
  9 </style>
 10 <script>
 11 
 12 /*window.onload = function(){
 13     var oParent = document.getElementById('div1');
 14     var aInput = oParent.getElementsByTagName('input');
 15     var aDiv = oParent.getElementsByTagName('div');
 16     
 17     for(var i=0;i<aInput.length;i++){
 18         aInput[i].index = i;
 19         aInput[i].onclick = function(){
 20             for(var i=0;i<aInput.length;i++){
 21                 aInput[i].className = '';
 22                 aDiv[i].style.display = 'none';
 23             }
 24             this.className = 'active';
 25             aDiv[this.index].style.display = 'block';
 26         };
 27     }
 28     
 29 };*/
 30 
 31 //先变型:
 32 //尽量不要出现函数嵌套函数
 33 //可以有全局变量
 34 //把onload中不是赋值的语句放到单独函数中
 35 
 36 
 37 /*var oParent = null;
 38 var aInput = null;
 39 var aDiv = null;
 40 
 41 window.onload = function(){
 42     
 43     oParent = document.getElementById('div1');
 44     aInput = oParent.getElementsByTagName('input');
 45     aDiv = oParent.getElementsByTagName('div');
 46 
 47     init();
 48     
 49 };
 50 
 51 function init(){
 52     for(var i=0;i<aInput.length;i++){
 53         aInput[i].index = i;
 54         aInput[i].onclick = change;
 55     }
 56 }
 57 
 58 function change(){
 59     for(var i=0;i<aInput.length;i++){
 60         aInput[i].className = '';
 61         aDiv[i].style.display = 'none';
 62     }
 63     this.className = 'active';
 64     aDiv[this.index].style.display = 'block';
 65 }*/
 66 
 67 //改成面向对象:
 68 //全局变量就是属性
 69 //函数就是方法
 70 //Onload中创建对象
 71 
 72 //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
 73 
 74 window.onload = function(){
 75     
 76     var t1 = new Tab();
 77     t1.init();
 78     
 79 };
 80 
 81 function Tab(){
 82     this.oParent = document.getElementById('div1');
 83     this.aInput = this.oParent.getElementsByTagName('input');
 84     this.aDiv = this.oParent.getElementsByTagName('div');
 85 }
 86 
 87 Tab.prototype.init = function(){
 88     var This = this;
 89     for(var i=0;i<this.aInput.length;i++){
 90         this.aInput[i].index = i;
 91         this.aInput[i].onclick = function(){
 92             This.change(this);
 93         };
 94     }
 95 };
 96 
 97 Tab.prototype.change = function(obj){
 98     for(var i=0;i<this.aInput.length;i++){
 99         this.aInput[i].className = '';
100         this.aDiv[i].style.display = 'none';
101     }
102     obj.className = 'active';
103     this.aDiv[obj.index].style.display = 'block';
104 };
105 
106 </script>
107 </head>
108 
109 <body>
110 <div id="div1">
111     <input class="active" type="button" value="1">
112     <input type="button" value="2">
113     <input type="button" value="3">
114     <div style="display:block">11111</div>
115     <div>22222</div>
116     <div>33333</div>
117 </div>
118 </body>
119 </html>

重用，然后第二次调用的时候添加其他方法：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
  8 .active{ background:red;}
  9 </style>
 10 <script>
 11 
 12 /*var arr = [4,7,1,3];
 13 arr.sort();  // 1 3 4 7
 14 
 15 var arr2 = [4,7,1,3];
 16 arr2.push(5);
 17 arr2.sort(); // 1 3 4 5 7
 18 */
 19 
 20 window.onload = function(){
 21     
 22     var t1 = new Tab('div1');
 23     t1.init();
 24     t1.autoPlay();
 25     
 26     var t2 = new Tab('div2');
 27     t2.init();
 28     t2.autoPlay();
 29     
 30 };
 31 
 32 function Tab(id){
 33     this.oParent = document.getElementById(id);
 34     this.aInput = this.oParent.getElementsByTagName('input');
 35     this.aDiv = this.oParent.getElementsByTagName('div');
 36     this.iNow = 0;
 37 }
 38 
 39 Tab.prototype.init = function(){
 40     var This = this;
 41     for(var i=0;i<this.aInput.length;i++){
 42         this.aInput[i].index = i;
 43         this.aInput[i].onclick = function(){
 44             This.change(this);
 45         };
 46     }
 47 };
 48 
 49 Tab.prototype.change = function(obj){
 50     for(var i=0;i<this.aInput.length;i++){
 51         this.aInput[i].className = '';
 52         this.aDiv[i].style.display = 'none';
 53     }
 54     obj.className = 'active';
 55     this.aDiv[obj.index].style.display = 'block';
 56 };
 57 
 58 Tab.prototype.autoPlay = function(){
 59     
 60     var This = this;
 61     
 62     setInterval(function(){
 63         
 64         if(This.iNow == This.aInput.length-1){
 65             This.iNow = 0;
 66         }
 67         else{
 68             This.iNow++;
 69         }
 70         
 71         for(var i=0;i<This.aInput.length;i++){
 72             This.aInput[i].className = '';
 73             This.aDiv[i].style.display = 'none';
 74         }
 75         This.aInput[This.iNow].className = 'active';
 76         This.aDiv[This.iNow].style.display = 'block';
 77         
 78         
 79     },2000);
 80     
 81 };
 82 
 83 </script>
 84 </head>
 85 
 86 <body>
 87 <div id="div1">
 88     <input class="active" type="button" value="1">
 89     <input type="button" value="2">
 90     <input type="button" value="3">
 91     <div style="display:block">11111</div>
 92     <div>22222</div>
 93     <div>33333</div>
 94 </div>
 95 
 96 <div id="div2">
 97     <input class="active" type="button" value="1">
 98     <input type="button" value="2">
 99     <input type="button" value="3">
100     <div style="display:block">11111</div>
101     <div>22222</div>
102     <div>33333</div>
103 </div>
104 </body>
105 </html>