分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > IT知识

js面向对象高级编程

发布时间：2023-09-06 01:17责任编辑：苏小强关键词：js面向对象

面向对象的组成

[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  8. vararr=[];
  10. arr.number=10;//对象下面的变量：叫做对象的属性
  12. //alert(arr.number);
  13. //alert(arr.length);
  15. arr.test=function(){//对象下面的函数:叫做对象的方法
  16. alert(123);
  17. };
  19. arr.test();
  21. arr.push();
  22. arr.sort();
  24. </script>
  25. </head>
  27. <body>
  28. </body>
  29. </html>


创建第一个面向对象程序

[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  8. //varobj={};
  10. varobj=newObject();//创建了一个空的对象
  11. obj.name=‘小明‘;//属性
  12. obj.showName=function(){//方法
  13. alert(this.name);
  14. };
  16. obj.showName();
  19. varobj2=newObject();//创建了一个空的对象
  20. obj2.name=‘小强‘;//属性
  21. obj2.showName=function(){//方法
  22. alert(this.name);
  23. };
  25. obj2.showName();
  29. </script>
  30. </head>
  32. <body>
  33. </body>
  34. </html>


工厂方式

[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  8. //工厂方式:封装函数
  10. functioncreatePerson(name){
  12. //1.原料
  13. varobj=newObject();
  14. //2.加工
  15. obj.name=name;
  16. obj.showName=function(){
  17. alert(this.name);
  18. };
  19. //3.出场
  20. returnobj;
  22. }
  24. varp1=createPerson(‘小明‘);
  25. p1.showName();
  26. varp2=createPerson(‘小强‘);
  27. p2.showName();
  29. </script>
  30. </head>
  32. <body>
  33. </body>
  34. </html>
[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  9. //当new去调用一个函数:这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
  11. //new后面调用的函数:叫做构造函数
  13. functionCreatePerson(name){
  15. this.name=name;
  16. this.showName=function(){
  17. alert(this.name);
  18. };
  20. }
  22. varp1=newCreatePerson(‘小明‘);
  23. //p1.showName();
  24. varp2=newCreatePerson(‘小强‘);
  25. //p2.showName();
  27. alert(p1.showName==p2.showName);//false
  29. vararr=newArray();
  30. vardate=newDate();
  32. </script>
  33. </head>
  35. <body>
  36. </body>
  37. </html>

对象的引用

[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  8. /*vara=[1,2,3];
  9. varb=[1,2,3];
  11. alert(a==b);//false*/
  13. //vara=5;
  14. //varb=a;
  15. //b+=3;
  16. ////alert(b);//8
  17. //alert(a);//5基本类型:赋值的时候只是值的复制
  20. //vara=[1,2,3];
  21. //varb=a;
  22. //b.push(4);
  23. ////alert(b);//[1,2,3,4]
  24. //alert(a);//[1,2,3,4]对象类型:赋值不仅是值的复制，而且也是引用的传递
  26. //vara=[1,2,3];
  27. //varb=a;
  28. //b=[1,2,3,4];
  29. ////alert(b);//[1,2,3,4]
  30. //alert(a);//[1,2,3]
  32. //vara=5;
  33. //varb=5;
  34. //
  35. //alert(a==b);//基本类型:值相同就可以
  38. //vara=[1,2,3];
  39. //varb=[1,2,3];
  41. //alert(a==b);//false//对象类型:值和引用都相同才行
  43. vara=[1,2,3];
  44. varb=a;
  45. alert(a==b);//true
  47. </script>
  48. </head>
  50. <body>
  51. </body>
  52. </html>


原型

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


工厂方法之原型

[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  9. //当new去调用一个函数:这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
  11. //new后面调用的函数:叫做构造函数
  13. functionCreatePerson(name){
  15. this.name=name;
  17. }
  18. CreatePerson.prototype.showName=function(){
  19. alert(this.name);
  20. };
  22. varp1=newCreatePerson(‘小明‘);
  23. //p1.showName();
  24. varp2=newCreatePerson(‘小强‘);
  25. //p2.showName();
  27. alert(p1.showName==p2.showName);//true
  29. vararr=newArray();
  30. vardate=newDate();
  32. </script>
  33. </head>
  35. <body>
  36. </body>
  37. </html>


面向对象的写法

[html]view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <script>
  8. function构造函数(){
  9. this.属性
  10. }
  12. 构造函数.原型.方法=function(){};
  15. var对象1=new构造函数();
  16. 对象1.方法();
  17. </script>
  18. </head>
  20. <body>
  21. </body>
  22. </html>


面向对象的选项卡

[html]view plaincopy
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1div{width:200px;height:200px;border:1px#000solid;display:none;}
  8. .active{background:red;}
  9. </style>
  10. <script>
  12. /*window.onload=function(){
  13. varoParent=document.getElementById(‘div1‘);
  14. varaInput=oParent.getElementsByTagName(‘input‘);
  15. varaDiv=oParent.getElementsByTagName(‘div‘);
  17. for(vari=0;i<aInput.length;i++){
  18. aInput[i].index=i;
  19. aInput[i].onclick=function(){
  20. for(vari=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. }
  29. };*/
  31. //先变型:
  32. //尽量不要出现函数嵌套函数
  33. //可以有全局变量
  34. //把onload中不是赋值的语句放到单独函数中
  37. varoParent=null;
  38. varaInput=null;
  39. varaDiv=null;
  41. window.onload=function(){
  43. oParent=document.getElementById(‘div1‘);
  44. aInput=oParent.getElementsByTagName(‘input‘);
  45. aDiv=oParent.getElementsByTagName(‘div‘);
  47. init();
  49. };
  51. functioninit(){
  52. for(vari=0;i<aInput.length;i++){
  53. aInput[i].index=i;
  54. aInput[i].onclick=change;
  55. }
  56. }
  58. functionchange(){
  59. for(vari=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. }
  67. </script>
  68. </head>
  70. <body>
  71. <div>
  72. <inputtype="button"value="1">
  73. <inputtype="button"value="2">
  74. <inputtype="button"value="3">
  75. <divstyle="display:block">11111</div>
  76. <div>22222</div>
  77. <div>33333</div>
  78. </div>
  79. </body>
  80. </html>
[html]view plaincopy
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1div{width:200px;height:200px;border:1px#000solid;display:none;}
  8. .active{background:red;}
  9. </style>
  10. <script>
  12. /*window.onload=function(){
  13. varoParent=document.getElementById(‘div1‘);
  14. varaInput=oParent.getElementsByTagName(‘input‘);
  15. varaDiv=oParent.getElementsByTagName(‘div‘);
  17. for(vari=0;i<aInput.length;i++){
  18. aInput[i].index=i;
  19. aInput[i].onclick=function(){
  20. for(vari=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. }
  29. };*/
  31. //先变型:
  32. //尽量不要出现函数嵌套函数
  33. //可以有全局变量
  34. //把onload中不是赋值的语句放到单独函数中
  37. /*varoParent=null;
  38. varaInput=null;
  39. varaDiv=null;
  41. window.onload=function(){
  43. oParent=document.getElementById(‘div1‘);
  44. aInput=oParent.getElementsByTagName(‘input‘);
  45. aDiv=oParent.getElementsByTagName(‘div‘);
  47. init();
  49. };
  51. functioninit(){
  52. for(vari=0;i<aInput.length;i++){
  53. aInput[i].index=i;
  54. aInput[i].onclick=change;
  55. }
  56. }
  58. functionchange(){
  59. for(vari=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. }*/
  67. //改成面向对象:
  68. //全局变量就是属性
  69. //函数就是方法
  70. //Onload中创建对象
  72. //改this指向问题:事件或者是定时器,尽量让面向对象中的this指向对象
  74. window.onload=function(){
  76. vart1=newTab();
  77. t1.init();
  79. };
  81. functionTab(){
  82. this.oParent=document.getElementById(‘div1‘);
  83. this.aInput=this.oParent.getElementsByTagName(‘input‘);
  84. this.aDiv=this.oParent.getElementsByTagName(‘div‘);
  85. }
  87. Tab.prototype.init=function(){
  88. varThis=this;
  89. for(vari=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. };
  97. Tab.prototype.change=function(obj){
    98. <

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved