Rumah > hujung hadapan web > tutorial js > javascript 面向对象编程 聊聊对象的事_js面向对象

javascript 面向对象编程 聊聊对象的事_js面向对象

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 18:46:12
asal
853 orang telah melayarinya

先看一下JSON(javascript object notation)对象,JSON是一种脚本操作时常用的数据交换格式对象,相对于XML来说JSON是一种比较轻量级的格式,在一些intelligence的IDE中还可以方便的通过点操作JSON对象中的成员。

      JSON是一种键/值对方式来描述内部成员的格式,其内部成员可以是几乎任何一种类型的对象,当然也可以是方法、类、数组,也可以是另外一个JSON对象。

    <SPAN class=kwrd>var</SPAN> student = {
Salin selepas log masuk
      Name: <SPAN class=str>"张三"</SPAN>,
Salin selepas log masuk
      Age: 20,
Salin selepas log masuk
      Hobby: <SPAN class=str>"读书"</SPAN>,
Salin selepas log masuk
      Books: [
Salin selepas log masuk
        {
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
          BookName : <SPAN class=str>"C#"</SPAN> ,
Salin selepas log masuk
          Price : 70
Salin selepas log masuk
Salin selepas log masuk
        },
Salin selepas log masuk
Salin selepas log masuk
        {
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
          BookName : <SPAN class=str>"Java"</SPAN> ,
Salin selepas log masuk
          Price : 70
Salin selepas log masuk
Salin selepas log masuk
        },
Salin selepas log masuk
Salin selepas log masuk
        {
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
          BookName : <SPAN class=str>"Javascript"</SPAN> ,
Salin selepas log masuk
          Price : 80
Salin selepas log masuk
        }
Salin selepas log masuk
      ]
Salin selepas log masuk
    };
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

上面代码用JSON对象描述了一个学生的信息,他有姓名、年龄、爱好、书集等。在访问该学生对象时,可以通过student变量来操作学生的信息。

    <SPAN class=kwrd>var</SPAN> stuInfo = <SPAN class=str>"姓名:"</SPAN> + student.Name +
Salin selepas log masuk
           <SPAN class=str>",年龄:"</SPAN> + student.Age +
Salin selepas log masuk
<SPAN class=str>           ",爱好:"</SPAN> + student.Hobby +
Salin selepas log masuk
           <SPAN class=str>",拥有的书:"</SPAN> +
Salin selepas log masuk
                      student.Books[0].BookName + <SPAN class=str>"、"</SPAN> +
Salin selepas log masuk
           student.Books[1].BookName + <SPAN class=str>"、"</SPAN> +
Salin selepas log masuk
                      student.Books[2].BookName;
Salin selepas log masuk
     alert(stuInfo);
Salin selepas log masuk

这样的操作方式风格和C#也非常相像。以上的代码是静态的构造出了学生对象,学生对象的结构就确定了。在其它的编程语言中一般对象结构一旦确定就不能很方便的进行修改,但是在javascript中的对象结构也可以方便的进行改动。下面为student对象添加一个Introduce方法来做自我介绍。

    student.Introduce = <SPAN class=kwrd>function</SPAN>() {
Salin selepas log masuk
      <SPAN class=kwrd>var</SPAN> stuInfo = <SPAN class=str>"姓名:"</SPAN> + <SPAN class=kwrd>this</SPAN>.Name +
Salin selepas log masuk
             <SPAN class=str>",年龄:"</SPAN> + <SPAN class=kwrd>this</SPAN>.Age +
Salin selepas log masuk
             <SPAN class=str>",爱好:"</SPAN> + <SPAN class=kwrd>this</SPAN>.Hobby +
Salin selepas log masuk
             <SPAN class=str>",拥有的书:"</SPAN> +
Salin selepas log masuk
             <SPAN class=kwrd>this</SPAN>.Books[0].BookName + <SPAN class=str>"、"</SPAN> +
Salin selepas log masuk
             <SPAN class=kwrd>this</SPAN>.Books[1].BookName + <SPAN class=str>"、"</SPAN> +
Salin selepas log masuk
             <SPAN class=kwrd>this</SPAN>.Books[2].BookName;
Salin selepas log masuk
      alert(stuInfo)
Salin selepas log masuk
    };
Salin selepas log masuk
    student.Introduce();
Salin selepas log masuk
Salin selepas log masuk

student对象原来并没有Introduce方法,第一次为student.Introduce赋值会在student对象中创建一个新的成员,后面如果再为student.Introduce赋值则会覆盖上一次所赋的值。当然我们这的值是一个function。也可以用类似索引的方式来添加成员。

    student[<SPAN class=str>"Introduce"</SPAN>] = <SPAN class=kwrd>function</SPAN>() {
Salin selepas log masuk
     ……
Salin selepas log masuk
    };
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
 
Salin selepas log masuk
    student.Introduce();
Salin selepas log masuk
Salin selepas log masuk

当然添加的成员也可以删除掉。删除掉之后则成为undefined,再访问该成员时则不支持。

    delete student.Introduce;
Salin selepas log masuk
    student.Introduce();
Salin selepas log masuk
 
Salin selepas log masuk
Salin selepas log masuk

image

javascript是弱类型的语言,有的时候即使有IDE的辅助也不能很清楚知道当前所操作对象的成员,可能会需要对当前对象的属性进行查询,这时候我们可以使用for循环来完成。

    <SPAN class=kwrd>for</SPAN> (<SPAN class=kwrd>var</SPAN> key <SPAN class=kwrd>in</SPAN> student) {
Salin selepas log masuk
      document.write(key + <SPAN class=str>" : "</SPAN> + student[key] + <SPAN class=str>"<br />"</SPAN>);
Salin selepas log masuk
    };
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

image

对student对象进行遍历时,是对student的成员进行遍历,这里的key则对应student对象中的每一个成员属性名称。student[key]则是对student某个成员进行访问。如果想调用student的Introduce方法也可以用索引的方式,student[“Introduce”]()。

上面简单的聊了聊JSON对象,总的来说JSON是很方便的数据打包方式。javascript中的其它的对象,不论是浏览器对象,还是自定义类型所创建的对象或者是数组等等,它们也都具有JSON对象类似的操作方式。我们可以直接用索引的方式为window添加成员,我们也可以为数组添加字符串形式的下标把它当成Hashtable来操作。

    window[<SPAN class=str>"Hi"</SPAN>] = <SPAN class=kwrd>function</SPAN>() {
Salin selepas log masuk
      alert(<SPAN class=str>"helloworld!"</SPAN>);
Salin selepas log masuk
    };
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
    window[<SPAN class=str>"Hi"</SPAN>]();
Salin selepas log masuk
 
Salin selepas log masuk
Salin selepas log masuk
    <SPAN class=kwrd>var</SPAN> array = [];
Salin selepas log masuk
    array[<SPAN class=str>"一"</SPAN>] = <SPAN class=str>"A"</SPAN>;
Salin selepas log masuk
    array[<SPAN class=str>"二"</SPAN>] = <SPAN class=str>"B"</SPAN>;
Salin selepas log masuk
    array[<SPAN class=str>"三"</SPAN>] = <SPAN class=str>"C"</SPAN>;
Salin selepas log masuk
    array[<SPAN class=str>"四"</SPAN>] = <SPAN class=str>"D"</SPAN>;
Salin selepas log masuk
    alert(array[<SPAN class=str>"一"</SPAN>] + array[<SPAN class=str>"二"</SPAN>] + array[<SPAN class=str>"三"</SPAN>] + array[<SPAN class=str>"四"</SPAN>]);
Salin selepas log masuk

      把数组当成Hashtable来操作时,要注意,并非是为数组添加数组元素,而是在数组对象中添加新的属性成员。而且如果for(var key in array)循环遍历数组对象的话,key得到的却不是array对象的属性名称,而是数组元素的索引号。

下一次聊聊function。

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan