=========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>