`
javababy1
  • 浏览: 1219966 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

温习javascript面向对象

 
阅读更多
Code:
  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. <title>javascript面向对象编程</title>
  5. <scriptsrc="Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
  6. <scripttype="text/javascript">
  7. $(function(){
  8. //functionanimal(name){
  9. //this.name=name;
  10. //this.age=0;
  11. //}
  12. //vara1=animal;
  13. //alert(a1);//弹出整个函数体
  14. //vara2=animal("dinglang");
  15. //alert(a2);//弹出undefined
  16. //vara3=newanimal();
  17. //alert(a3);//弹出object
  18. //vara4=newanimal;
  19. //alert(a4);//弹出object
  20. //求值
  21. //alert(sum(1,3));//要求弹出结果为4
  22. //alert(sum(1,3,5,4,7));//要求弹出结果为20
  23. //根据java或者C#的编程经验,首先想到的是函数重载。
  24. //functionsum(a,b){
  25. //returna+b;
  26. //}
  27. //functionsum(a,b,c,d,e){
  28. //returna+b+c+d+e;
  29. //}
  30. //不幸的是,javascript并不支持函数重载。如果照上面那么写,只有下面的那个函数才会生效
  31. //javascript支持可变参数的函数
  32. functionsum(){
  33. varn=0;
  34. for(vari=0;i<arguments.length;i++){
  35. n+=arguments[i];
  36. }
  37. returnn;
  38. }
  39. //javascript高级知识--闭包
  40. //函数里面嵌套函数,且在外部被引用了,所以这个对象i不会被垃圾回收机制清除,所以i递增
  41. functionf1(){
  42. vari=0;
  43. varf2=function(){
  44. i++;
  45. alert(i);
  46. }
  47. returnf2;//f2对象指的是整个函数体
  48. }
  49. varf3=f1();//"f1()"就是指该函数的执行结果或者返回值--f2
  50. //f3();//1
  51. //f3();//2
  52. //f3();//3
  53. //作用域与this关键字
  54. //varobj=newObject();
  55. //obj.v="visaobject";
  56. ////相当于这么写
  57. //varobj2={v:"visaobject"};
  58. //作用域Scope
  59. varb1={v:"thisisb1"};
  60. varb2={v:"thisisb2"};
  61. functionb(x,y){
  62. //alert(this.v+","+x+","+y);
  63. }
  64. b("ding","lang");//undefined,"ding","lang"
  65. //调用b函数时,b函数中的this关键字指的是window对象.而Window对象中没有v对象,所以undefined
  66. //window.b("ding","lang");//undefined,"ding","lang"--与b("ding","lang");意义相同
  67. //b.call();//就等于b();
  68. //call函数的第一个参数表示的是函数的上下文--表示b函数中的this所以this关键字=b1
  69. //b.call(b1,"ding","lang");//thisisb1,ding,lang
  70. //注意apply函数的用法:第一个参数表示的也是函数中的上下文。不过后面的参数要以数组的形式传递
  71. //b.apply(b2,["ding","lang"]);////thisisb1,ding,lang
  72. //关于作用域,再补充一点
  73. varb3={v:"thisisb3",
  74. sayHello:function(){
  75. alert(this.v);
  76. }
  77. }
  78. //b3.sayHello();//thisisb3
  79. //b3.sayHello.call(b1);//会调用b1对象中的sayHello函数--thisisb1
  80. //for...in
  81. //vararr=newArray();//new一个js数组,与c#、java等编程语言不同,可以不指定长度
  82. //arr[0]=1;//赋值
  83. //arr[1]=2;
  84. //arr[2]=3;
  85. //javascript支持直接定义赋值
  86. vararr=newArray(1,2,3);
  87. for(vari=0;i<arr.length;i++){
  88. //alert(arr[i]);//弹出1,2,3
  89. }
  90. //注意:javascript中的for...in,看起来与C#或者java中的foreach类似,但是不同
  91. for(varkeyinarr){
  92. //alert(key);//弹出0,1,2key指的是键,而不是值。在C#的foreach中,“in”前的变量指的是值
  93. //alert(arr[key]);//可以使用这种方式取值--key指的是键,也就是某个对象中包含的所有的对象,而不是值
  94. }
  95. //假如我没有firebug,想使用IE实现类似与firebug控制台中console.dir的功能,可以这样
  96. for(varkeyinwindow){
  97. //这样就能将window对象中,包含的全部对象迭代显示出来。也就实现了firebug中console.dir的功能
  98. //document.getElementById("key").innerHTML+=(key+":"+window[key]+"</br>");
  99. }
  100. //对象的删除(释放内存--在extjs组件中常用)
  101. //deleteb3.v;//删除b3对象中的v成员
  102. //alert(b3.v);//undefined--因为v这个成员已经被删除了
  103. //类的修改,扩展(重点,难点)
  104. //1.假如我要实现一个简单的加法计算
  105. //varnumOne=5;//如果直接这么定义,那么下面的numOne.add(8);执行会报错
  106. //如果我这么写,下面调用就不会报错了(因为此时的numOne,是个类.相当于java或C#语言中原始的基本数据类型、包装类型)
  107. varnumOne=newNumber(5);
  108. numOne.add=function(numTwo){
  109. returnthis+numTwo;
  110. }
  111. //alert(numOne.add);//undefined
  112. //alert(numOne.add(8));//这样写看起来没错,但是会报错--numOne.addisnotafunction
  113. varnumThree=newNumber(100);
  114. //如果我现在想要给numThree对象中也加上add这么一个函数
  115. //直接使用prototype这个特殊的属性来实现,给所有的Number类型实例都加入add函数
  116. Number.prototype.add=function(numTwo){
  117. returnthis+numTwo;
  118. }
  119. alert(numThree.add(200).add(300));//弹出600100+200+300=600
  120. //说明所有的Number类型确实都具有了add这么一个函数超级延时绑定--类的扩展
  121. //小例子--扩展String类,给所有的String类加上sayILoveYou
  122. //String.prototype.sayILoveYou=function(){
  123. //alert(this.toString()+",ILoveYou");
  124. //}
  125. //varstrOne="dinglang";
  126. //strOne.sayILoveYou();
  127. //javascript中的类的用法
  128. //使用构造函数的方式,定义简单的Person类(javascript函数也是一个类)
  129. functionPerson(name){
  130. this.name=name;
  131. this.age=20;
  132. varyear=2010;//定义一个私有的成员sex
  133. //this.sayHello=function(){
  134. //alert(this.name+":今年"+this.age+"岁,HelloWold");
  135. //可以直接在这里面定义sayHello成员函数(特权方法),但是每次实例化该类的时候都会重新去定义,所有还是选择用prototype属性的方式
  136. //如果在sayHello函数中要使用year这个私有对象,就可以直接在此定义这个特权方法。这就是典型的“闭包”。
  137. }
  138. //如果使用了new关键字,说明Person就是一个类。否则的话,只是一个普通的函数
  139. varp1=newPerson("丁浪");//new一个Person类的实例
  140. varp2=newPerson("蔡世友");//注意:别按照java或者C#的习惯,写成了Personp=newPerson("XXX");
  141. //给Person这个自定义的类,添加一个sayHello函数
  142. Person.prototype.sayHello=function(){
  143. alert(this.name+":今年"+this.age+"岁,HelloWold");
  144. }
  145. p1.sayHello();
  146. p2.sayHello();
  147. //实现javascript中的继承
  148. functionclassA(name){
  149. this.name=name;
  150. this.showName=function(){
  151. alert(this.name);
  152. }
  153. }
  154. functionclassB(name){
  155. //1)使用newMethod的方式实现继承
  156. //this.newMethod=classA;
  157. //this.newMethod(name);
  158. //deletethis.newMethod;//释放对象
  159. //2)调用claasA这个函数,并把他的上下文(作用域)指向this(也就是classB类的实例)
  160. //这样也能实现继承效果(使用call或者apply)
  161. classA.call(this,name);
  162. //classA.apply(this,[name]);
  163. }
  164. objA=newclassA("操作系统");
  165. objB=newclassB("组成原理");
  166. objA.showName();//弹出“操作系统”
  167. objB.showName();//弹出“组成原理”
  168. })
  169. </script>
  170. </head>
  171. <body>
  172. <divid="key"></div>
  173. </body>
  174. </html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics