|
|
51CTO旗下网站
|
|
移动端

1.5.7 创建自己的JavaScript对象

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍创建自己的JavaScript对象。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:42

1.5.7 创建自己的JavaScript对象
 
在JavaScript中我们不但可以使用系统提供的对象,还可以创建自己的对象,其把相当于Java中类的声明和对象的创建合二为一了。创建对象时对象不止有一个属性,所以属性与属性之间用逗号分隔,其余的声明规则与Java类似,便不赘述了。其简略语法如下:
 
  1. <引用名>={<属性名>:<属性值>,{<属性名>:<属性值>…}} 
在JavaScript中,对象实际上可以看作数组,因此对象的成员不仅可以用“<引用>.<属性>”的方式来访问,而且还可以用“<引用>[<属性>]”使用数组一样的使用。如果希望对象可以重用,也可以像Java那样先声明类再“new”对象,其语法如下:
 
 
  1. function<类名>([构造函数参数列表]) { 
  2.     this.<属性名1>=<构造函数参数>
  3.     … 
  4.     this.<属性名n>=<构造函数参数>
实际上一个所谓类的声明就是一个函数的声明,只是在函数中多了“this.<属性名>”,这既是属性的声明,同时又进行了初始化。大家都知道一个类不但可以有属性,还可以有方法,给类添加方法的语法如下:
 
  1. function<类名>([构造函数参数列表]){ 
  2.     this.<方法名1>=<函数名1>;//函数可以是在任意地方声明的函数 
  3.     … 
  4.     this.<方法名n>=<函数名 n>
 
实际上方法的声明就是把已经写好的函数分配给一个属性而已。前面说过对象实际上可以看作一个数组,所以可以对对象的属性进行遍历,在JavaScript中可以方便地利用下面形式的for语句对指定对象的所有属性进行遍历:
 
 
  1. for(var<变量>in<对象引用>){ 
  2.     //语句序列 
 
对对象操作的基本方法就这么多,在创建对象时是用操作符“new”,释放(删除)对象时用“delete”操作符。由于JavaScript是弱类型语言,在下一小节中会看到无论声明什么类型的变量都是var字符。有时需要判断变量的类型,这就要使用“typeof”操作符,如表1-15所示。
 
表1-15typeof操作符的应用
 

“typeof”操作返回的是一个字符串。从表1-15看到,typeof返回了一个undefined。在JavaScript中,不但布尔类变量true/false可以参与逻辑计算,undefined和null都可以当作逻辑false使用。JavaScript支持原型,通过使用原型可以向已有的对象类型注射新的方法、属性。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_22.html。
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_22</title> 
  3. </head><body> 
  4. <script type="text/javascript"> 
  5. tom={name:"Tom",age:21}; //创建自己的对象 
  6. 6 document.write("Name:"+tom.name+"<br>"); //读取对象的属性值 
  7. 7 document.write("Age:"+tom.age+"<br>"); 
  8. 8 //对象可以看作数组,用数组形式访问对象,下面的例子我们便演示了如何用数组形式访问对象 
  9. tom={name:"Tom",age:21}; 
  10. 10 document.write("Name:"+tom["name"]+"<br>"); //用数组形式访问对象 
  11. 11 document.write("Age:"+tom["age"]+"<br>"); 
  12. 12 //对象的重用,可以像Java 那样先声明类再“new”对象 
  13. 13 function Student(sno,sname,sage,sclass){ //声明Student 类 
  14. 14 this.sno=sno; //为Student 类添加属性 
  15. 15 this.sname=sname; //为属性添加属性值 
  16. 16 this.sage=sage; 
  17. 17 this.sclass=sclass;} 
  18. 18 tom=new Student("10001","Tom",21,"97002"); //创建Student 对象 
  19. 19 document.write(tom.sname+"<br>"); 
  20. 20 //给类添加方法,即为类中的属性添加一个方法 
  21. 21 function Student1(sno,sname,sage,sclass){ //声明Student1 
  22. 22 this.sno=sno; //将Student类声明中传入的参数赋值给属性 
  23. 23 this.sname=sname; //为sname 属性赋值 
  24. 24 this.sage=sage; //为sage 属性赋值 
  25. 25 this.sclass=sclass; //为sclass 属性赋值 
  26. 26 this.toString=toString;} //把toString 方法挂接到Student 
  27. 27 function toString(){ //声明toString 方法 
  28. 28 var result=""; //声明一个空白字符串 
  29. 29 result+="学号: "+this.sno+"<br>"; //为字符串添加学号内容 
  30. 30 result+="姓名: "+this.sname+"<br>"; //为字符串添加姓名内容 
  31. 31 result+="年龄: "+this.sage+"<br>"; //为字符串添加年龄内容 
  32. 32 result+="班级: "+this.sclass+"<br>"; //为字符串添加班级内容 
  33. 33 return result;} //将最终所得字符串返回 
  34. 34 tom=new Student1("10001","Tom",21,"97002"); //创建Student1 对象 
  35. 35 document.write(tom.toString()); 
  36. 36 tom={name:"Tom",age:21,no:10001}; //对对象的属性进行遍历 
  37. 37 for(var i in tom){ //对对象属性用循环进行遍历 
  38. 38 document.write(i+":"+tom[i]+"<br>");} 
  39. 39 function toWyfString(){ //用原型给已有对象注射新方法、新属性 
  40. 40 var ss=this.wyfTime+this.toGMTString(); //得到系统时间 
  41. 41 return ss;} //将字符串返回 
  42. 42 function toGMTString(){ 
  43. 43 return "HaHa!!!"; 
  44. 44 }//通过使用原型可以向已有的对象类型注射新的方法、属性 
  45. 45 //对对象的功能进行扩展,同时也能覆盖原有的方法。 
  46. 46 Date.prototype.wyfTime="WYF: "; //对对象属性进行扩展 
  47. 47 Date.prototype.toWyfString = toWyfString; //覆盖原有的方法 
  48. 48 d=new Date(); 
  49. 49 document.write(d.toWyfString()+"<br>"); 
  50. 50 document.write(d.toGMTString()+"<br>"); 
  51. 51 Date.prototype.toGMTString = toGMTString; //覆盖原有的方法 
  52. 52 document.write(d.toGMTString()+"<br>"); 
  53. 53 </script></body></html> 
第5~19行为创建我们自己的对象与对象的重用的代码,这一部分的内容与Java没有太大的差异。在创建自己的对象时相当于将类的声明和对象的创建合二为一了。对象的声明实际上就是一个函数的声明,只不过在函数体中多了“this.<属性名>”。
 
第20~38行为为类添加方法与对对象属性进行遍历的代码。实际上添加方法就是把已经写好的函数分配给一个属性而已。对对象属性进行遍历时用var变量in对象引用的方式进行遍历即可。本例中是将每个属性输出了一遍。
 
第39~53行为通过使用原型给已有对象注射新方法、新属性的代码。示例中对对象的属性进行了扩展,之后用我们自己写的方法通过原型覆盖了已有类中的原有方法。之后通过前后对比向读者展示了如何用原型对对对象功能进行扩展。
 
上面代码为本小节中所讲述的内容的应用。前面已经讲述了创建对象与数组,本节讲述的是如何开发我们自己的类,以及声明自己的对象,和对象的一些用法,这些内容与Java有些类似,有Java开发经验的读者对此肯定不会陌生。
 
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
 
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

程序员密码学

《程序员密码学》涉及密码学的各个研究方向,分组密码、散列函数、公钥密码以及相关的攻击,同时也讲解了密码学算法实现上常用的ASN.编码、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊