Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 18:46:12
Original
790 Leute haben es durchsucht

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

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

    <span class="kwrd">var</span> student = {
Nach dem Login kopieren
      Name: <span class="str">"张三"</span>,
Nach dem Login kopieren
      Age: 20,
Nach dem Login kopieren
      Hobby: <span class="str">"读书"</span>,
Nach dem Login kopieren
      Books: [
Nach dem Login kopieren
        {
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
          BookName : <span class="str">"C#"</span> ,
Nach dem Login kopieren
          Price : 70
Nach dem Login kopieren
Nach dem Login kopieren
        },
Nach dem Login kopieren
Nach dem Login kopieren
        {
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
          BookName : <span class="str">"Java"</span> ,
Nach dem Login kopieren
          Price : 70
Nach dem Login kopieren
Nach dem Login kopieren
        },
Nach dem Login kopieren
Nach dem Login kopieren
        {
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
          BookName : <span class="str">"Javascript"</span> ,
Nach dem Login kopieren
          Price : 80
Nach dem Login kopieren
        }
Nach dem Login kopieren
      ]
Nach dem Login kopieren
    };
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

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

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

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

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

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

    student[<span class="str">"Introduce"</span>] = <span class="kwrd">function</span>() {
Nach dem Login kopieren
     ……
Nach dem Login kopieren
    };
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
 
Nach dem Login kopieren
    student.Introduce();
Nach dem Login kopieren
Nach dem Login kopieren

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

    delete student.Introduce;
Nach dem Login kopieren
    student.Introduce();
Nach dem Login kopieren
 
Nach dem Login kopieren
Nach dem Login kopieren

        image

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

    <span class="kwrd">for</span> (<span class="kwrd">var</span> key <span class="kwrd">in</span> student) {
Nach dem Login kopieren
      document.write(key + <span class="str">" : "</span> + student[key] + <span class="str">"<br>"</span>);
Nach dem Login kopieren
    };
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

        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>() {
Nach dem Login kopieren
      alert(<span class="str">"helloworld!"</span>);
Nach dem Login kopieren
    };
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
    window[<span class="str">"Hi"</span>]();
Nach dem Login kopieren
 
Nach dem Login kopieren
Nach dem Login kopieren
    <span class="kwrd">var</span> array = [];
Nach dem Login kopieren
    array[<span class="str">"一"</span>] = <span class="str">"A"</span>;
Nach dem Login kopieren
    array[<span class="str">"二"</span>] = <span class="str">"B"</span>;
Nach dem Login kopieren
    array[<span class="str">"三"</span>] = <span class="str">"C"</span>;
Nach dem Login kopieren
    array[<span class="str">"四"</span>] = <span class="str">"D"</span>;
Nach dem Login kopieren
    alert(array[<span class="str">"一"</span>] + array[<span class="str">"二"</span>] + array[<span class="str">"三"</span>] + array[<span class="str">"四"</span>]);
Nach dem Login kopieren

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

下一次聊聊function。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage