码迷，mamicode.com
首页 > Web开发 > 详细

JS面向对象及组件开发

时间：2016-04-13 16:00:58      阅读：390      评论：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年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！