js面向对象及一些小demo

最新推荐文章于 2022-11-10 12:22:00 发布

weixin_30710457

最新推荐文章于 2022-11-10 12:22:00 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ling-2yuan/archive/2013/06/06/3120866.html

本文通过实例演示了如何使用JavaScript实现类的定义、初始化及继承，包括不同方式下的构造函数和原型方法的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  1 <html>
  2 
  3 <head>
  4 <script language="javascript" type="text/javascript">
  5 function myClass()
  6 {
  7     //此处相当于构造函数
  8     this.ID = 1;
  9     this.Name1 = this.Name;
 10     this.showMessage();
 11 }
 12 
 13 myClass.prototype.Name = "johnson";
 14 myClass.prototype.showMessage = function()
 15 {
 16     alert("ID: " + this.ID + ", Name: " + this.Name);
 17 }
 18 
 19 var obj1 = new myClass()
 20 
 21 var obj2 = new myClass();
 22 
 23 alert(obj1.showMessage==obj2.showMessage)
 24 
 25 
 26 //方法三：上面的方法结构美观，便捷，但构建函数不能带参数，修改方法 
 27 var player3 = function() { 
 28 this.init.apply(this, arguments); 
 29 } 
 30 player3.prototype = { 
 31 init:function(_name){ 
 32 this.name = _name; 
 33 }, 
 34 say:function(){ 
 35 alert(this.name); 
 36 } 
 37 } 
 38 var p3 = new player3('llinzzi3'); 
 39 p3.say(); 
 40  
 41  
 42  
 43  //类的继承 
 44 
 45 //方法一 
 46 var player4 = function(){ 
 47 this.init.apply(this, arguments); 
 48 } 
 49 player4.prototype = new player3; 
 50 player4.prototype.shout = function(){ 
 51 alert(this.name.toUpperCase()); 
 52 } 
 53 
 54 var p4 = new player4('llinzzi4'); 
 55 p4.shout(); 
 56 
 57 
 58 
 59 function StringBuffer () {
 60   this._strings_ = new Array();
 61 }
 62 
 63 StringBuffer.prototype.append = function(str) {
 64   this._strings_.push(str);
 65 };
 66 
 67 StringBuffer.prototype.toString = function() {
 68   return this._strings_.join("");
 69 };
 70 
 71  
 72  
 73 //myClass.prototype.constructor()
 74 var d1 = new Date();
 75 var str = "";
 76 for (var i=0; i < 10000; i++) {
 77     str += "text";
 78 }
 79 var d2 = new Date();
 80 
 81 document.write("Concatenation with plus: "
 82  + (d2.getTime() - d1.getTime()) + " milliseconds");
 83 
 84 var buffer = new StringBuffer();
 85 d3 = new Date();
 86 for (var i=0; i < 10000; i++) {
 87     buffer.append("text");
 88 }
 89 var result = buffer.toString();
 90 d4 = new Date();
 91 
 92 document.write("<br />Concatenation with StringBuffer: "
 93  + (d4.getTime() - d3.getTime()) + " milliseconds");
 94 document.writeln("<br/>");
 95 document.writeln("浏览器名称: "+navigator.appName+"<br>");
 96 
 97 document.writeln("版本号: "+navigator.appVersion+"<br>");//可用判断浏览器及版本 MSIE 8.0
 98 
 99 document.writeln("代码名字: "+navigator.appCodeName+"<br>");
100 
101 document.writeln("用户代理标识: "+navigator.userAgent);
102      
103 
104     // alert(ooption+'!');
105     // alert('length'+document.myform.selCity.options.length);
106  
107  
108 
109 
110 
111 //省市联动
112 function changeCity( ) {
113     var cityList = new Array( );
114     cityList['四川省']=['成都', '绵阳','泸州'];
115     cityList['山东省']=['济南', '青岛','日照'];
116     cityList['湖北省'] = ['武汉','宜昌','潜江'];
117 
118     var pIndex=document.myform.selProvince.value; 
119     var newOption1;
120     document.myform.selCity.options.length=0;
121 
122     for (var j in cityList[pIndex]) 
123     {
124         // alert(j);
125          newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); 
126         document.myform.selCity.options.add(newOption1);
127      }
128      
129      alert(document.myform.selCity.options+"!!@");
130      var oSelect    = document.getElementById ("selCity");
131 
132     var oOption = document.createElement("option");
133  
134     oSelect.options.add(oOption);
135     var sText = '你好';
136     oOption.innerHTML=sText;
137     oOption.Value=sText;
138     oOption.selected=true;
139     alert('selectIndex:'+oSelect.selectedIndex);
140     alert(oSelect.childNodes.length);//childNodes DOM文档模型
141     ;
142     alert('elements.length: '+myform.elements.item("selProvince").length);//只能应用于form表单
143     alert(oSelect.attributes.item("name").value);//获取对象属性的集合
144 }
145 
146 
147 </script>
148 <title></title>
149 
150 </head>
151 
152 <body>
153 <form name="myform">
154 
155 <select name="selProvince" onChange="changeCity( );" id="selProvince">
156       <OPTION>--请选择开户帐号的省份--</OPTION>
157       <OPTION value="四川省">四川省</OPTION>
158       <OPTION value="山东省">山东省</OPTION>
159       <OPTION value="湖北省">湖北省</OPTION>
160 </select>
161 
162  <select name="selCity" id="selCity">
163 
164 
165  </select>
166 
167 </form>
168 </body>
169 
170 </html>