程序博客网 > 热力型数据地图模板

javascript面向对象技术基础

来源：互联网 发布：热力型数据地图模板 编辑：程序博客网 时间：2024/05/17 07:53

看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.
javascript中的对象还没解释清楚怎么回事,一上来就直奔主题,类/继承/原型/私有变量....
结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂...
这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也
会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考.
如果不做说明,则文中出现的所有英文语句(程序体除外)都是引自<<javascript-the definitive guide,5th edition>>.


-------------------------------------------------
对象和数组(Objects and Arrays)
什么是对象?把一些"名字-属性"的组合放在一个单元里面,就组成了一个对象.我们可以理解为javascript中
的对象就是一些"键-值"对的集合(An object is a collection of named values. These named values are usually referred
to as properties of the object.--Section3.5).
"名字"只能是string类型,不能是其他类型,而属性的类型则是
任意的(数字/字符串/其他对象..).可以用new Object()来创建一个空对象,也可以简单的用"{}"来创建一个
空对象,这两者的作用是等同的.

Js代码 复制代码
  1. var emptyObject1 = {};           //创建空对象  
  2. var emptyObject2 = new Object(); //创建空对象  
  3. var person = {"name":"sdcyst",  
  4.           "age":18,  
  5.           "sex":"male"};     //创建一个包含初始值的对象person  
  6. alert(person.name);              //sdcyst  
  7. alert(person["age"]);            //18 


 从上面的例子我们也可以看到，访问一个对象的属性，可以简单的用对象名加"."后加属性的名字，也
可以用"[]"操作符来获取,此时在[]里面的属性名字要加引号,这是因为对象中的索引都是字符串类型的.
javasript对象中属性的个数是可变的,在创建了一个对象之后可以随时对它赋予任何的属性.

Js代码 复制代码
  1. var person = {};  
  2. person.name = "sdcyst";  
  3. person["age"] = 18;  
  4. alert(person.name + "__" + person.age); //sdcyst__18  
  5.   
  6. var _person = {name:"balala","age":23}; //在构建一个对象时,属性的名字可以不用引号来标注(name),  
  7.                     //但是仍旧是一个字符串类型.在访问的时候[]内仍旧需要引号  
  8. alert(_person["name"] + "__" + person.age); //balala__23  
  9. alert(_person[name]);                   //undefinied  

 通过"."操作符获取对象的属性,必须得知道属性的名字.一般来说"[]"操作符获取对象属性的功能更强大一些,
可以在[]中放入一些表达式来取属性的值，
比如可以用在循环控制语句中,而"."操作符则没有这种灵活性。

Js代码 复制代码
  1. var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};  
  2. var namestring = "";  
  3. for(var props in name) {  //循环name对象中的属性名字  
  4.     namestring += name[props];  
  5. }  
  6. alert(namestring);  //NAME1NAME2NAME3NAME4  
  7.   
  8. namestring = "";  
  9. for(var i=0; i<4; i++) {  
  10.     namestring += name["name"+(i+1)];  
  11. }  
  12. alert(namestring);  //NAME1NAME2NAME3NAME4  

 delete操作符可以删除对象中的某个属性,判断某个属性是否存在可以使用"in"操作符.

Js代码 复制代码
  1. var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};  
  2. var namestring = "";  
  3. for(var props in name) {  //循环name对象中的属性名字  
  4.     namestring += name[props];  
  5. }  
  6. alert(namestring);  //NAME1NAME2NAME3NAME4  
  7.   
  8. delete name.name1;  //删除name1属性  
  9. delete name["name3"];  //删除name3属性  
  10. namestring = "";  
  11. for(var props in name) {  //循环name对象中的属性名字  
  12.     namestring += name[props];  
  13. }  
  14. alert(namestring);  //NAME2NAME4  
  15.   
  16. alert("name1" in name); //false  
  17. alert("name4" in name); //true  

 需要注意,对象中的属性是没有顺序的.

对象的constructor属性
每一个javascript对象都有一个constructor属性.这个属性对应了对象初始化时的构造函数(函数也是对象).

Js代码 复制代码
  1. var date = new Date();  
  2. alert(date.constructor);  //Date  
  3. alert(date.constructor == "Date");  //false  
  4. alert(date.constructor == Date);  //true  
 

 

数组
我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,
数组中的数据可以是任何的数据类型.数组本身仍旧是对象,但是由于数组的很多特性,通常情况下把数组和对象区别
开来分别对待(Throughout this book, objects and arrays are often treated as distinct datatypes.
This is a useful and reasonable simplification; you can treat objects and arrays as separate types
for most of your JavaScript programming.To fully understand the behavior of objects and arrays,
however, you have to know the truth: an array is nothing more than an object with a thin layer of extra
functionality. You can see this with the typeof operator: applied to an array value, it returns
the string "object".  --section7.5).
创建数组可以用"[]"操作符,或者是用Array()构造函数来new一个.

Js代码 复制代码
  1. var array1 = [];  //创建空数组  
  2. var array2 = new Array();  //创建空数组  
  3. array1 = [1,"s",[3,4],{"name1":"NAME1"}]; //  
  4. alert(array1[2][1]);  //4   访问数组中的数组元素  
  5. alert(array1[3].name1); //NAME1 访问数组中的对象  
  6. alert(array1[8]);   //undefined  
  7. array2 = [,,];  //没有数值填入只有逗号,则对应索引处的元素为undefined  
  8. alert(array2.length); //3  
  9. alert(array2[1]);     //undefined  

 用new Array()来创建数组时,可以指定一个默认的大小,其中的值此时为undefined,以后可以再给他们赋值.但是由于
javascript中的数组的长度是可以任意改变的,同时数组中的内容也是可以任意改变的,因此这个初始化的长度实际上
对数组没有任何的约束力.对于一个数组,如果对超过它最大长度的索引赋值,则会改变数组的长度,同时会对没有赋值
的索引处赋值undefined,看下面的例子.

Js代码 复制代码
  1. var array = new Array(10);  
  2. alert(array.length);   //10  
  3. alert(array[4]);       //undefined  
  4. array[100] = "100th";  //这个操作会改变数组的长度,同时将10-99索引对应的值设为undefined  
  5. alert(array.length);   //101  
  6. alert(array[87]);      //undefined  

 可以用delete操作符删除数组的元素,注意这个删除仅仅是将数组在该位置的元素设为undefined,数组的长度并没有改变.
我们已经使用过了数组的length属性,length属性是一个可以读/写的属性,也就是说我们可以通过改变数组的length属性来
任意的改变数组的长度.如果将length设为小于数组长度的值,则原数组中索引大于length-1的值都会被删除.如果length
的值大于原始数组的长度,则在它们之间的值设为undefined.

Js代码 复制代码
  1. var array = new Array("n1","n2","n3","n4","n5");  //五个元素的数组  
  2. var astring = "";  
  3. for(var i=0; i<array.length; i++) {           //循环数组元素  
  4.     astring += array[i];  
  5. }  
  6. alert(astring);       //n1n2n3n4n5  
  7. delete array[3];                   //删除数组元素的值  
  8. alert(array.length + "_" + array[3])  //5_undefined  
  9.   
  10. array.length = 3;    //缩减数组的长度  
  11. alert(array[3]);     //undefined  
  12. array.length = 8;    //扩充数组的长度  
  13. alert(array[4]);     //undefined  

 对于数组的其他方法诸如join/reverse等等,在这就不再一一举例.

通过上面的解释,我们已经知道,对象的属性值是通过属性的名字(字符串类型)来获取,而数组的元素是通过索
引(整数型 0~~2**32-1)来得到值.数组本身也是一个对象,所以对象属性的操作也完全适合于数组.

Js代码 复制代码
  1. var array = new Array("no1","no2");  
  2. array["po"] = "props1";  
  3. alert(array.length);   //2  
  4. //对于数组来说,array[0]同array["0"]效果是一样的(?不确定,测试时如此)  
  5. alert(array[0] + "_" + array["1"] + "_" + array.po);//no1_no2_props1 

函数
javascript函数相信大家都写过不少了,所以我们这里只是简单介绍一下.
创建函数:
function f(x) {........}
var f = function(x) {......}
上面这两种形式都可以创建名为f()的函数,不过后一种形式可以创建匿名函数
函数定义时可以设置参数,如果传给函数的参数个数不够,则从最左边起依次对应,其余的用undefined赋值,如果传给函数
的参数多于函数定义参数的个数,则多出的参数被忽略.

 

Js代码 复制代码
  1. function myprint(s1,s2,s3) {  
  2.     alert(s1+"_"+s2+"_"+s3);  
  3. }  
  4. myprint();      //undefined_undefined_undefined  
  5. myprint("string1","string2"); //string1_string2_undefined  
  6. myprint("string1","string2","string3","string4"); //string1_string2_string3  

 

因此,对于定义好的函数,我们不能指望调用者将所有的参数全部传进来.对于那些必须用到的参数应该在函数体中
加以检测(用!操作符),或者设置默认值然后同参数进行或(||)操作来取得参数.

 

Js代码 复制代码
  1. function myprint(s1,person) {  
  2.     var defaultperson = {   //默认person对象  
  3.         "name":"name1",  
  4.     "age":18,  
  5.     "sex":"female"  
  6.     };  
  7.     if(!s1) {    //s1不允许为空  
  8.         alert("s1 must be input!");  
  9.     return false;  
  10.     }  
  11.     person = person || defaultperson;  //接受person对象参数  
  12.     alert(s1+"_"+person.name+":"+person.age+":"+person.sex);  
  13. };  
  14.   
  15. myprint(); //s1 must be input!  
  16. myprint("s1"); //s1_name1:18:female  
  17. myprint("s1",{"name":"sdcyst","age":23,"sex":"male"});  //s1_sdcyst:23:male  

 

函数的arguments属性
在每一个函数体的内部,都有一个arguments标识符,这个标识符代表了一个Arguments对象.Arguments对象非常类似
于Array(数组)对象,比如都有length属性,访问它的值用"[]"操作符利用索引来访问参数值,但是,二者是完全不同的
东西,仅仅是表面上有共同点而已(比如说修改Arguments对象的length属性并不会改变它的长度).

 

Js代码 复制代码
  1. function myargs() {  
  2.     alert(arguments.length);  
  3.     alert(arguments[0]);  
  4. }  
  5. myargs();   //0  ---  undefined  
  6. myargs("1",[1,2]);  //2 --- 1  

 Arguments对象有一个callee属性,标示了当前Arguments对象所在的方法.可以使用它来实现匿名函数的内部递归调用.

Js代码 复制代码
  1. function(x) {  
  2.     if (x <= 1) return 1;  
  3.     return x * arguments.callee(x-1);  
  4. }  (section8.2)  

 ------------------------------------------------------------------

Method--方法
方法就是函数.我们知道,每一个对象都包含0个或多个属性,属性可以是任意类型,当然也包括对象.函数本身就是一种
对象,因此我们完全可以把一个函数放到一个对象里面,此时,这个函数就成了对象的一个方法.此后如果要使用该方法,
则可以通过对象名利用"."操作符来实现.

Js代码 复制代码
  1. var obj = {f0:function(){alert("f0");}}; //对象包含一个方法  
  2. function f1() {alert("f1");}  
  3. obj.f1 = f1;    //为对象添加方法  
  4.   
  5. obj.f0(); //f0  f0是obj的方法  
  6. obj.f1(); //f1  f1是obj的方法  
  7. f1();     //f1  f1同时又是一个函数,可以直接调用  
  8. f0();     //f0仅仅是obj的方法,只能通过对象来调用  

 

方法的调用需要对象的支持,那么在方法中如何获取对象的属性呢?this!this关键字我们已经很熟悉了,在javascript的方
法中,我们可以用this来取得对方法调用者(对象)的引用,从而获取方法调用者的各种属性.

 

Js代码 复制代码
  1. var obj = {"name":"NAME","sex":"female"};  
  2. obj.print = function() {  //为对象添加方法  
  3.     alert(this.name + "_" + this["sex"]);  
  4. };  
  5. obj.print();  //NAME_female  
  6. obj.sex = "male";  
  7. obj.print();  //NAME_male  

 

下面我们来一个更加面向对象的例子.

Js代码 复制代码
  1. var person = {name:"defaultname",  
  2.               setName:function(s){  
  3.               this.name = s;  
  4.           },  
  5.           "printName":function(){  
  6.               alert(this.name);  
  7.           }}  
  8. person.printName();       //defaultname  
  9. person.setName("newName");  
  10. person.printName();       //newName  

 

在上面的例子中,完全可以用person.name=..来直接改变person的name属性,在此我们只是为了展示一下刚才提到的内容.
另一种改变person属性的方法就是:定义一个function,接收两个参数,一个是person,一个是name的值,看起来像是这样:
changeName(person,"newName").哪种方法好呢?很明显,例子中的方法更形象,更直观一些,而且好像有了那么一点面向
对象的影子.

再次强调一下,方法(Method)本身就是是函数(function),只不过方法的使用更受限制.在后面的篇幅中,如果提到函数,那么
提到的内容同样适用于方法,反之则不尽然.

函数的prototype属性
每一个函数都包含了一个prototype(原型)属性,这个属性构成了javascript面向对象的核心基础.在后面我们会详细讨论.




 
热力型数据地图模板 热力型数据地图模板
原创粉丝点击
热门IT博客
商品直销软件商品直销软件
网络名誉侵权起诉状网络名誉侵权起诉状
hotspot实战 知乎
app拍照解题软件
网络加速小助手
李慕豪数据
指向整形数组的指针
维护网络信息都做什么
网络系统威胁 网络传输
形容很好的网络
无机晶体结构数据库
步步高 知乎
爰淘宝下载
大学生做什么网络兼职
java数组为空和为null
好记的淘宝店铺名字
36氪人工智能研究报告
modbus tcp编程
完美dota助手没有网络
柬埔寨可以淘宝吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 汽化器原理 氨水汽化器 汽化器图片 气化器 液化石油气汽化器 石油液化气汽化器 煤气气化炉 大型气化炉 秸秆气化炉制作 红外线气化炉 野外气化炉 家用燃煤气化采暖炉 电子气化炉 酒精气化炉 自制半气化炉 气化炉价格 秸秆气化炉厂家 生物质气化采暖炉 新型生物质气化炉 自制酒精气化炉 家用燃煤气化炉 大型秸秆气化炉 diy气化炉 燃煤气化炉 家用气化采暖炉 气化炉哪家好 电子气化炉头 气化炉制作 木柴气化炉 气化炉图片 气化炉原理 自制气化炉 气化炉生产厂家 桔杆气化炉 一体式气化炉 下吸式气化炉 生物质半气化炉 生物质气化炉原理 户外气化炉 上吸式气化炉 无烟气化炉

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里