> 웹 프론트엔드 > JS 튜토리얼 > javascript 객체지향 프로그래밍 object_js 객체지향에 대해 이야기해 봅시다.

javascript 객체지향 프로그래밍 object_js 객체지향에 대해 이야기해 봅시다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 18:46:12
원래의
859명이 탐색했습니다.

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

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

    <SPAN class=kwrd>var</SPAN> student = {
로그인 후 복사
      Name: <SPAN class=str>"张三"</SPAN>,
로그인 후 복사
      Age: 20,
로그인 후 복사
      Hobby: <SPAN class=str>"读书"</SPAN>,
로그인 후 복사
      Books: [
로그인 후 복사
        {
로그인 후 복사
로그인 후 복사
로그인 후 복사
          BookName : <SPAN class=str>"C#"</SPAN> ,
로그인 후 복사
          Price : 70
로그인 후 복사
로그인 후 복사
        },
로그인 후 복사
로그인 후 복사
        {
로그인 후 복사
로그인 후 복사
로그인 후 복사
          BookName : <SPAN class=str>"Java"</SPAN> ,
로그인 후 복사
          Price : 70
로그인 후 복사
로그인 후 복사
        },
로그인 후 복사
로그인 후 복사
        {
로그인 후 복사
로그인 후 복사
로그인 후 복사
          BookName : <SPAN class=str>"Javascript"</SPAN> ,
로그인 후 복사
          Price : 80
로그인 후 복사
        }
로그인 후 복사
      ]
로그인 후 복사
    };
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

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

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

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

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

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

    student[<SPAN class=str>"Introduce"</SPAN>] = <SPAN class=kwrd>function</SPAN>() {
로그인 후 복사
     ……
로그인 후 복사
    };
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
 
로그인 후 복사
    student.Introduce();
로그인 후 복사
로그인 후 복사

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

    delete student.Introduce;
로그인 후 복사
    student.Introduce();
로그인 후 복사
 
로그인 후 복사
로그인 후 복사

image

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

    <SPAN class=kwrd>for</SPAN> (<SPAN class=kwrd>var</SPAN> key <SPAN class=kwrd>in</SPAN> student) {
로그인 후 복사
      document.write(key + <SPAN class=str>" : "</SPAN> + student[key] + <SPAN class=str>"<br />"</SPAN>);
로그인 후 복사
    };
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

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>() {
로그인 후 복사
      alert(<SPAN class=str>"helloworld!"</SPAN>);
로그인 후 복사
    };
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
    window[<SPAN class=str>"Hi"</SPAN>]();
로그인 후 복사
 
로그인 후 복사
로그인 후 복사
    <SPAN class=kwrd>var</SPAN> array = [];
로그인 후 복사
    array[<SPAN class=str>"一"</SPAN>] = <SPAN class=str>"A"</SPAN>;
로그인 후 복사
    array[<SPAN class=str>"二"</SPAN>] = <SPAN class=str>"B"</SPAN>;
로그인 후 복사
    array[<SPAN class=str>"三"</SPAN>] = <SPAN class=str>"C"</SPAN>;
로그인 후 복사
    array[<SPAN class=str>"四"</SPAN>] = <SPAN class=str>"D"</SPAN>;
로그인 후 복사
    alert(array[<SPAN class=str>"一"</SPAN>] + array[<SPAN class=str>"二"</SPAN>] + array[<SPAN class=str>"三"</SPAN>] + array[<SPAN class=str>"四"</SPAN>]);
로그인 후 복사

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

下一次聊聊function。

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿