首页 > Web开发 > 详细

JS面向对象及组件开发

时间：2016-04-13 15:58:54      阅读：296      评论：0      收藏：0      [点我收藏+]

面向对象的组成

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. var arr = [];  
  9.   
  10. arr.number = 10;  //对象下面的变量：叫做对象的属性  
  11.   
  12. //alert( arr.number );  
  13. //alert( arr.length );  
  14.   
  15. arr.test = function(){  //对象下面的函数 : 叫做对象的方法  
  16.     alert(123);  
  17. };  
  18.   
  19. arr.test();  
  20.   
  21. arr.push();  
  22. arr.sort();  
  23.   
  24. </script>  
  25. </head>  
  26.   
  27. <body>  
  28. </body>  
  29. </html>  

创建第一个面向对象程序
[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //var obj = {};  
  9.   
  10. var obj = new Object();  //创建了一个空的对象  
  11. obj.name = ‘小明‘;  //属性  
  12. obj.showName = function(){  //方法  
  13.     alert(this.name);  
  14. };  
  15.   
  16. obj.showName();  
  17.   
  18.   
  19. var obj2 = new Object();  //创建了一个空的对象  
  20. obj2.name = ‘小强‘;  //属性  
  21. obj2.showName = function(){  //方法  
  22.     alert(this.name);  
  23. };  
  24.   
  25. obj2.showName();  
  26.   
  27.   
  28.   
  29. </script>  
  30. </head>  
  31.   
  32. <body>  
  33. </body>  
  34. </html>  

工厂方式
[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //工厂方式 : 封装函数  
  9.   
  10. function createPerson(name){  
  11.       
  12.     //1.原料  
  13.     var obj = new Object();  
  14.     //2.加工  
  15.     obj.name = name;  
  16.     obj.showName = function(){  
  17.         alert( this.name );  
  18.     };  
  19.     //3.出场  
  20.     return obj;  
  21.       
  22. }  
  23.   
  24. var p1 = createPerson(‘小明‘);  
  25. p1.showName();  
  26. var p2 = createPerson(‘小强‘);  
  27. p2.showName();  
  28.   
  29. </script>  
  30. </head>  
  31.   
  32. <body>  
  33. </body>  
  34. </html>  

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8.   
  9. //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)  
  10.   
  11. //new后面调用的函数 : 叫做构造函数  
  12.   
  13. function CreatePerson(name){  
  14.       
  15.     this.name = name;  
  16.     this.showName = function(){  
  17.         alert( this.name );  
  18.     };  
  19.       
  20. }  
  21.   
  22. var p1 = new CreatePerson(‘小明‘);  
  23. //p1.showName();  
  24. var p2 = new CreatePerson(‘小强‘);  
  25. //p2.showName();  
  26.   
  27. alert( p1.showName == p2.showName );  //false  
  28.   
  29. var arr = new Array();  
  30. var date = new Date();  
  31.   
  32. </script>  
  33. </head>  
  34.   
  35. <body>  
  36. </body>  
  37. </html>  

对象的引用

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*var a = [1,2,3];  
  9. var b = [1,2,3];  
  10.   
  11. alert( a == b );  //false*/  
  12.   
  13. //var a = 5;  
  14. //var b = a;  
  15. //b += 3;  
  16. ////alert(b); //8  
  17. //alert(a); //5   基本类型 : 赋值的时候只是值的复制  
  18.   
  19.   
  20. //var a = [1,2,3];  
  21. //var b = a;  
  22. //b.push(4);  
  23. ////alert(b);  //[1,2,3,4]  
  24. //alert(a);  //[1,2,3,4]   对象类型 : 赋值不仅是值的复制，而且也是引用的传递  
  25.   
  26. //var a = [1,2,3];  
  27. //var b = a;  
  28. //b = [1,2,3,4];  
  29. ////alert(b); //[1,2,3,4]  
  30. //alert(a); //[1,2,3]  
  31.   
  32. //var a = 5;  
  33. //var b = 5;  
  34. //  
  35. //alert(a == b);  //基本类型 : 值相同就可以  
  36.   
  37.   
  38. //var a = [1,2,3];  
  39. //var b = [1,2,3];  
  40.   
  41. //alert( a == b );  //false  //对象类型 : 值和引用都相同才行  
  42.   
  43. var a = [1,2,3];  
  44. var b = a;  
  45. alert( a==b );  //true  
  46.   
  47. </script>  
  48. </head>  
  49.   
  50. <body>  
  51. </body>  
  52. </html>  

原型

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )  
  9.   
  10. //原型 : CSS中的class  
  11. //普通方法 : CSS中的style  
  12.   
  13. //原型 : prototype : 要写在构造函数的下面  
  14.   
  15. /*var arr = [1,2,3,4,5];  
  16. var arr2 = [2,2,2,2,2];  
  17.   
  18. arr.sum = function(){  
  19.       
  20.     var result = 0;  
  21.     for(var i=0;i<this.length;i++){  
  22.         result += this[i];  
  23.     }  
  24.     return result;  
  25.       
  26. };  
  27. arr2.sum = function(){  
  28.       
  29.     var result = 0;  
  30.     for(var i=0;i<this.length;i++){  
  31.         result += this[i];  
  32.     }  
  33.     return result;  
  34.       
  35. };  
  36.   
  37. //alert( arr.sum() );  //15  
  38. //alert( arr2.sum() );  //10*/  
  39.   
  40. var arr = [1,2,3,4,5];  
  41. var arr2 = [2,2,2,2,2];  
  42.   
  43. Array.prototype.sum = function(){  
  44.     var result = 0;  
  45.     for(var i=0;i<this.length;i++){  
  46.         result += this[i];  
  47.     }  
  48.     return result;  
  49. };  
  50.   
  51. alert( arr.sum() );  //15  
  52. alert( arr2.sum() );  //10  
  53.   
  54. </script>  
  55. </head>  
  56.   
  57. <body>  
  58. </body>  
  59. </html>  

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. var arr = [];  
  9. //arr.number = 10;  
  10. Array.prototype.number = 20;  
  11.   
  12. alert(arr.number);  
  13.   
  14. </script>  
  15. </head>  
  16.   
  17. <body>  
  18. </body>  
  19. </html>  

工厂方法之原型

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8.   
  9. //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)  
  10.   
  11. //new后面调用的函数 : 叫做构造函数  
  12.   
  13. function CreatePerson(name){  
  14.       
  15.     this.name = name;  
  16.       
  17. }  
  18. CreatePerson.prototype.showName = function(){  
  19.     alert( this.name );  
  20. };  
  21.   
  22. var p1 = new CreatePerson(‘小明‘);  
  23. //p1.showName();  
  24. var p2 = new CreatePerson(‘小强‘);  
  25. //p2.showName();  
  26.   
  27. alert( p1.showName == p2.showName );  //true  
  28.   
  29. var arr = new Array();  
  30. var date = new Date();  
  31.   
  32. </script>  
  33. </head>  
  34.   
  35. <body>  
  36. </body>  
  37. </html>  

面向对象的写法

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. function 构造函数(){  
  9.     this.属性  
  10. }  
  11.   
  12. 构造函数.原型.方法 = function(){};  
  13.   
  14.   
  15. var 对象1 = new 构造函数();  
  16. 对象1.方法();  
  17. </script>  
  18. </head>  
  19.   
  20. <body>  
  21. </body>  
  22. </html>  

面向对象的选项卡

[html] view plain copy
 技术分享技术分享
  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. </script>  
  68. </head>  
  69.   
  70. <body>  
  71. <div id="div1">  
  72.     <input class="active" type="button" value="1">  
  73.     <input type="button" value="2">  
  74.     <input type="button" value="3">  
  75.     <div style="display:block">11111</div>  
  76.     <div>22222</div>  
  77.     <div>33333</div>  
  78. </div>  
  79. </body>  
  80. </html>  

[html] view plain copy
 技术分享技术分享
  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>  

[html] view plain copy
 技术分享技术分享
  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>  

面向对象的拖拽

[html] view plain copy
 技术分享技术分享
  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>  

包装对象

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*function Aaa(){  
  9.     this.name = ‘小明‘;  
  10. }  
  11. Aaa.prototype.showName = function(){  
  12.     alert( this.name );  
  13. };  
  14.   
  15. var a1 = new Aaa();  
  16. a1.showName();  
  17.   
  18.   
  19. var arr = new Array();  
  20. arr.push();  
  21. arr.sort();  
  22.   
  23. //在JS源码 : 系统对象也是基于原型的程序  
  24.   
  25. function Array(){  
  26.     this.lenglth = 0;  
  27. }  
  28. Array.prototype.push = function(){};  
  29. Array.prototype.sort = function(){};*/  
  30.   
  31.   
  32. //尽量不要去修改或者添加系统对象下面的方法和属性  
  33.   
  34. var arr = [1,2,3];  
  35.   
  36. Array.prototype.push = function(){  
  37.       
  38.     //this : 1,2,3  
  39.     //arguments : 4,5,6  
  40.       
  41.     for(var i=0;i<arguments.length;i++){  
  42.         this[this.length] = arguments[i]  
  43.     }  
  44.       
  45.     return this.length;  
  46. };  
  47.   
  48. arr.push(4,5,6);  
  49.   
  50. alert( arr );  
  51.   
  52. //pop shift unshift splice sort  
  53.   
  54. </script>  
  55. </head>  
  56.   
  57. <body>  
  58. </body>  
  59. </html>  

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*var str = ‘hello‘;  
  9.   
  10. alert( typeof str );  
  11.   
  12. str.charAt(0);  
  13. str.indexOf(‘e‘);*/  
  14.   
  15. //null undefined  
  16. //包装对象 : 基本类型都有自己对应的包装对象 : String  Number  Boolean   
  17.   
  18. /*var str = new String(‘hello‘);  
  19.   
  20. //alert( typeof str );  
  21.   
  22. alert(str.charAt(1));  
  23.   
  24. String.prototype.charAt = function(){};*/  
  25.   
  26.   
  27.   
  28. //var str = ‘hello‘;  
  29. //str.charAt(0);  //基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失  
  30.   
  31.   
  32. /*var str = ‘hello‘;  
  33.   
  34. String.prototype.lastValue = function(){  
  35.     return this.charAt(this.length-1);  
  36. };  
  37.   
  38. alert( str.lastValue() );  //o*/  
  39.   
  40.   
  41. var str = ‘hello‘;  
  42.   
  43. str.number = 10;  
  44.   
  45. alert( str.number );  //undefined  
  46.   
  47. </script>  
  48. </head>  
  49.   
  50. <body>  
  51. </body>  
  52. </html>  

原型链

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //原型链 : 实例对象与原型之间的连接，叫做原型链  
  9.   
  10. //原型链的最外层 : Object.prototype  
  11.   
  12. function Aaa(){  
  13.     //this.num = 20;  
  14. }  
  15. //Aaa.prototype.num = 10;  
  16. Object.prototype.num = 30;  
  17.   
  18. var a1 = new Aaa();  
  19. alert(a1.num);  
  20.   
  21. </script>  
  22. </head>  
  23.   
  24. <body>  
  25. </body>  
  26. </html>  

hasOwnProperty

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //hasOwnProperty : 看是不是对象自身下面的属性  
  9.   
  10. var arr = [];  
  11. arr.num = 10;  
  12. Array.prototype.num2 = 20;  
  13.   
  14. //alert(  arr.hasOwnProperty(‘num‘)  );  //true  
  15.   
  16. alert(  arr.hasOwnProperty(‘num2‘)  );  //false  
  17.   
  18.   
  19.   
  20. </script>  
  21. </head>  
  22.   
  23. <body>  
  24. </body>  
  25. </html>  

constructor 

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //constructor : 查看对象的构造函数  
  9.   
  10. /*function Aaa(){  
  11. }  
  12.   
  13. var a1 = new Aaa();  
  14.   
  15. alert( a1.constructor );  //Aaa  
  16.   
  17. var arr = [];  
  18. alert( arr.constructor == Array );  //true*/  
  19.   
  20.   
  21. /*function Aaa(){  
  22. }  
  23. //Aaa.prototype.constructor = Aaa;   //每一个函数都会有的，都是自动生成的  
  24.   
  25. //Aaa.prototype.constructor = Array;  
  26.   
  27. var a1 = new Aaa();  
  28. alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/  
  29.   
  30.   
  31. /*function Aaa(){  
  32. }  
  33.   
  34. Aaa.prototype.name = ‘小明‘;  
  35. Aaa.prototype.age = 20;  
  36.   
  37. Aaa.prototype = {  
  38.     constructor : Aaa,  
  39.     name : ‘小明‘,  
  40.     age : 20  
  41. };  
  42.   
  43. var a1 = new Aaa();  
  44. alert( a1.constructor );*/  
  45.   
  46.   
  47. function Aaa(){  
  48. }  
  49.   
  50. Aaa.prototype.name = 10;  
  51. Aaa.prototype.constructor = Aaa;  
  52.   
  53. for( var attr in Aaa.prototype ){  
  54.     alert(attr);  
  55. }  
  56.   
  57. </script>  
  58. </head>  
  59.   
  60. <body>  
  61. </body>  
  62. </html>  

instanceof

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //instanceof : 对象与构造函数在原型链上是否有关系  
  9.   
  10. function Aaa(){  
  11. }  
  12.   
  13. var a1 = new Aaa();  
  14.   
  15. //alert( a1 instanceof Object );  //true  
  16.   
  17.   
  18. var arr = [];  
  19.   
  20. alert( arr instanceof Array );  
  21.   
  22. </script>  
  23. </head>  
  24.   
  25. <body>  
  26. </body>  
  27. </html>  

toString

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //toString() : 系统对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的  
  9.   
  10. /*var arr = [];  
  11. alert( arr.toString == Object.prototype.toString ); //false*/  
  12.   
  13. /*function Aaa(){  
  14. }  
  15. var a1 = new Aaa();  
  16. alert( a1.toString == Object.prototype.toString );  //true*/  
  17.   
  18.   
  19. //toString() : 把对象转成字符串  
  20.   
  21. /*var arr = [1,2,3];  
  22.   
  23. Array.prototype.toString = function(){  
  24.     return this.join(‘+‘);  
  25. };  
  26.   
  27. alert( arr.toString() );  //‘1,2,3‘*/  
  28.   
  29.   
  30. //var num = 255;  
  31. //alert( num.toString(16) );  //‘ff‘  
  32.   
  33.   
  34. //利用toString做类型的判断 :   
  35.   
  36. /*var arr = [];  
  37.   
  38. alert( Object.prototype.toString.call(arr) == ‘[object Array]‘ ); */ //‘[object Array]‘  
  39.   
  40. window.onload = function(){  
  41.       
  42.     var oF = document.createElement(‘iframe‘);  
  43.     document.body.appendChild( oF );  
  44.       
  45.     var ifArray = window.frames[0].Array;  
  46.       
  47.     var arr = new ifArray();  
  48.       
  49.     //alert( arr.constructor == Array );  //false  
  50.       
  51.     //alert( arr instanceof Array );  //false  
  52.       
  53.     alert( Object.prototype.toString.call(arr) == ‘[object Array]‘ );  //true  
  54.       
  55.       
  56. };  
  57.   
  58. </script>  
  59. </head>  
  60.   
  61. <body>  
  62. </body>  
  63. </html>  

继承

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //继承 : 子类不影响父类，子类可以继承父类的一些功能 ( 代码复用 )  
  9.   
  10. //属性的继承 : 调用父类的构造函数 call  
  11.   
  12. //方法的继承 : for in :  拷贝继承 (<a href="http://lib.csdn.net/base/22" class="replace_word" title="jQuery知识库" target="_blank" style="color:#df3434; font-weight:bold;">jquery</a>也是采用拷贝继承extend)  
  13.   
  14. function CreatePerson(name,sex){   //父类  
  15.     this.name = name;  
  16.     this.sex = sex;  
  17. }  
  18. CreatePerson.prototype.showName = function(){  
  19.     alert( this.name );  
  20. };  
  21.   
  22. var p1 = new CreatePerson(‘小明‘,‘男‘);  
  23. //p1.showName();  
  24.   
  25.   
  26. function CreateStar(name,sex,job){  //子类  
  27.       
  28.     CreatePerson.call(this,name,sex);  
  29.       
  30.     this.job = job;  
  31.       
  32. }  
  33.   
  34. //CreateStar.prototype = CreatePerson.prototype;  
  35.   
  36. extend( CreateStar.prototype , CreatePerson.prototype );  
  37.   
  38. CreateStar.prototype.showJob = function(){  
  39. };  
  40.   
  41. var p2 = new CreateStar(‘黄晓明‘,‘男‘,‘演员‘);  
  42.   
  43. p2.showName();  
  44.   
  45.   
  46. function extend(obj1,obj2){  
  47.     for(var attr in obj2){  
  48.         obj1[attr] = obj2[attr];  
  49.     }  
  50. }  
  51. </script>  
  52. </head>  
  53.   
  54. <body>  
  55. </body>  
  56. </html>  

对象的复制

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. /*var a = {  
  9.     name : ‘小明‘  
  10. };  
  11.   
  12. var b = a;  
  13.   
  14. b.name = ‘小强‘;  
  15.   
  16. alert( a.name );*/  
  17.   
  18.   
  19. /*var a = {  
  20.     name : ‘小明‘  
  21. };  
  22.   
  23. //var b = a;  
  24.   
  25. var b = {};  
  26.   
  27. extend( b , a );  
  28.   
  29. b.name = ‘小强‘;  
  30.   
  31. alert( a.name );  
  32.   
  33.   
  34. function extend(obj1,obj2){  
  35.     for(var attr in obj2){  
  36.         obj1[attr] = obj2[attr];  
  37.     }  
  38. }*/  
  39.   
  40.   
  41. var a = [1,2,3];  
  42. var b = a;  
  43. //b.push(4);  
  44.   
  45. b = [1,2,3,4];  
  46.   
  47. alert(a);  
  48.   
  49. </script>  
  50. </head>  
  51.   
  52. <body>  
  53. </body>  
  54. </html>  

继承的拖拽

[html] view plain copy
 技术分享技术分享
  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{ width:100px; height:100px; background:red; position:absolute;}  
  8. #div2{ width:100px; height:100px; background:yellow; position:absolute; left:100px;}  
  9. </style>  
  10. <script>  
  11.   
  12. window.onload = function(){  
  13.     var d1 = new Drag(‘div1‘);  
  14.     d1.init();  
  15.       
  16.     var d2 = new ChildDrag(‘div2‘);  
  17.     d2.init();  
  18. };  
  19.   
  20. function Drag(id){  //父类  
  21.     this.obj = document.getElementById(id);  
  22.     this.disX = 0;  
  23.     this.disY = 0;  
  24. }  
  25. Drag.prototype.init = function(){  
  26.       
  27.     var This = this;  
  28.       
  29.     this.obj.onmousedown = function(ev){  
  30.         var ev = ev || window.event;  
  31.         This.fnDown(ev);  
  32.           
  33.         document.onmousemove = function(ev){  
  34.             var ev = ev || window.event;  
  35.             This.fnMove(ev);  
  36.         };  
  37.         document.onmouseup = function(){  
  38.             This.fnUp();  
  39.         };  
  40.         return false;  
  41.     };  
  42.       
  43. };  
  44.   
  45. Drag.prototype.fnDown = function(ev){  
  46.     this.disX = ev.clientX - this.obj.offsetLeft;  
  47.     this.disY = ev.clientY - this.obj.offsetTop;  
  48. };  
  49. Drag.prototype.fnMove = function(ev){  
  50.     this.obj.style.left = ev.clientX - this.disX + ‘px‘;  
  51.     this.obj.style.top = ev.clientY - this.disY + ‘px‘;  
  52. };  
  53. Drag.prototype.fnUp = function(){  
  54.     document.onmousemove = null;  
  55.     document.onmouseup = null;  
  56. };  
  57.   
  58.   
  59. function ChildDrag(id){   //子类  
  60.     Drag.call(this,id);  
  61. }  
  62.   
  63. extend( ChildDrag.prototype , Drag.prototype );  
  64.   
  65. ChildDrag.prototype.fnMove = function(ev){  
  66.       
  67.     var L = ev.clientX - this.disX;  
  68.     var T = ev.clientY - this.disY;  
  69.       
  70.     if(L<0){  
  71.         L = 0;  
  72.     }  
  73.     else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){  
  74.         L = document.documentElement.clientWidth - this.obj.offsetWidth;  
  75.     }  
  76.       
  77.     this.obj.style.left = L + ‘px‘;  
  78.     this.obj.style.top = T + ‘px‘;  
  79. };  
  80.   
  81. function extend(obj1,obj2){  
  82.     for(var attr in obj2){  
  83.         obj1[attr] = obj2[attr];  
  84.     }  
  85. }  
  86.   
  87. </script>  
  88. </head>  
  89.   
  90. <body>  
  91. <div id="div1"></div>  
  92. <div id="div2"></div>  
  93. </body>  
  94. </html>  

类式继承

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //类 : JS是没有类的概念的 , 把JS中的构造函数看做的类  
  9.       
  10. //要做属性和方法继承的时候，要分开继承  
  11.       
  12. function Aaa(){   //父类  
  13.     this.name = [1,2,3];  
  14. }     
  15. Aaa.prototype.showName = function(){  
  16.     alert( this.name );  
  17. };  
  18.   
  19. function Bbb(){   //子类  
  20.       
  21.     Aaa.call(this);  
  22.       
  23. }  
  24.   
  25. var F = function(){};  
  26. F.prototype = Aaa.prototype;  
  27. Bbb.prototype = new F();  
  28. Bbb.prototype.constructor = Bbb; //修正指向问题  
  29.   
  30. var b1 = new Bbb();  
  31. //b1.showName();  
  32. //alert( b1.name );  
  33. //alert( b1.constructor );  
  34. b1.name.push(4);  
  35.   
  36. var b2 = new Bbb();  
  37.   
  38. alert( b2.name );  
  39.   
  40.   
  41.   
  42. </script>  
  43. </head>  
  44.   
  45. <body>  
  46. </body>  
  47. </html>  

原型继承

[html] view plain copy
 技术分享技术分享
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. var a = {  
  9.     name : ‘小明‘  
  10. };  
  11.   
  12. var b = cloneObj(a);  
  13.   
  14. b.name = ‘小强‘;  
  15.   
  16. //alert( b.name );  
  17. alert( a.name );  
  18.   
  19. function cloneObj(obj){  
  20.       
  21.     var F = function(){};  
  22.       
  23.     F.prototype = obj;  
  24.       
  25.     return new F();  
  26.       
  27. }  
  28.   
  29.   
  30. 拷贝继承:  通用型的  有new或无new的时候都可以  
  31.   
  32. 类式继承:  new构造函数  
  33.   
  34. 原型继承:  无new的对象  
  35.   
  36.   
  37. </script>  
  38. </head>  
  39.   
  40. <body>  
  41. </body>  
  42. </html> 

JS面向对象及组件开发

原文：http://blog.csdn.net/xiaohubeiplus/article/details/51143371
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！