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

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

May 16, 2016 pm 06:46 PM
객체지향

先看一下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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Go 언어를 사용하여 객체 지향 이벤트 중심 프로그래밍을 구현하는 방법 Go 언어를 사용하여 객체 지향 이벤트 중심 프로그래밍을 구현하는 방법 Jul 20, 2023 pm 10:36 PM

Go 언어를 사용하여 객체 지향 이벤트 중심 프로그래밍을 구현하는 방법 소개: 객체 지향 프로그래밍 패러다임은 소프트웨어 개발에 널리 사용되며 이벤트 중심 프로그래밍은 트리거링 및 처리를 통해 프로그램 흐름을 실현하는 일반적인 프로그래밍 모델입니다. 이벤트. 이 기사에서는 Go 언어를 사용하여 객체 지향 이벤트 중심 프로그래밍을 구현하는 방법을 소개하고 코드 예제를 제공합니다. 1. 이벤트 중심 프로그래밍의 개념 이벤트 중심 프로그래밍은 이벤트와 메시지를 기반으로 하는 프로그래밍 모델로, 프로그램의 흐름 제어를 이벤트 트리거 및 처리로 전달합니다. 이벤트 중심으로

Java에서 Jackson을 사용하는 @JsonIdentityInfo 주석의 중요성은 무엇입니까? Java에서 Jackson을 사용하는 @JsonIdentityInfo 주석의 중요성은 무엇입니까? Sep 23, 2023 am 09:37 AM

@JsonIdentityInfo 주석은 Jackson 라이브러리에서 객체가 부모-자식 관계를 가질 때 사용됩니다. @JsonIdentityInfo 주석은 직렬화 및 역직렬화 중에 객체 ID를 나타내는 데 사용됩니다. ObjectIdGenerators.PropertyGenerator는 사용할 개체 식별자가 POJO 속성에서 나오는 상황을 나타내는 데 사용되는 추상 자리 표시자 클래스입니다. 구문@Target(값={ANNOTATION_TYPE,TYPE,FIELD,METHOD,PARAMETER})@Retention(값=RUNTIME)공개

PHP 고급 기능: 객체 지향 프로그래밍의 모범 사례 PHP 고급 기능: 객체 지향 프로그래밍의 모범 사례 Jun 05, 2024 pm 09:39 PM

PHP의 OOP 모범 사례에는 명명 규칙, 인터페이스 및 추상 클래스, 상속 및 다형성, 종속성 주입이 포함됩니다. 실제 사례에는 웨어하우스 모드를 사용하여 데이터를 관리하고 전략 모드를 사용하여 정렬을 구현하는 것이 포함됩니다.

Go의 객체 지향 프로그래밍 살펴보기 Go의 객체 지향 프로그래밍 살펴보기 Apr 04, 2024 am 10:39 AM

Go 언어는 유형 정의 및 메소드 연관을 통해 객체 지향 프로그래밍을 지원합니다. 전통적인 상속을 지원하지 않지만 구성을 통해 구현됩니다. 인터페이스는 유형 간의 일관성을 제공하고 추상 메소드를 정의할 수 있도록 합니다. 실제 사례에서는 OOP를 사용하여 고객 운영 생성, 획득, 업데이트 및 삭제를 포함하여 고객 정보를 관리하는 방법을 보여줍니다.

Golang에 클래스와 유사한 객체지향 기능이 있나요? Golang에 클래스와 유사한 객체지향 기능이 있나요? Mar 19, 2024 pm 02:51 PM

Golang(Go 언어)에는 전통적인 의미의 클래스 개념이 없지만, 클래스와 유사한 객체지향 기능을 구현할 수 있는 구조체라는 데이터 형식을 제공합니다. 이 기사에서는 구조를 사용하여 객체 지향 기능을 구현하는 방법을 설명하고 특정 코드 예제를 제공합니다. 구조의 정의와 사용법 먼저 구조의 정의와 사용법을 살펴보자. Golang에서는 type 키워드를 통해 구조를 정의한 다음 필요한 곳에 사용할 수 있습니다. 구조에는 속성이 포함될 수 있습니다.

PHP 객체 지향 프로그래밍의 플라이웨이트 패턴 분석 PHP 객체 지향 프로그래밍의 플라이웨이트 패턴 분석 Aug 14, 2023 pm 05:25 PM

PHP 개체 지향 프로그래밍에서 플라이웨이트 패턴 분석 개체 지향 프로그래밍에서 디자인 패턴은 코드의 가독성, 유지 관리성 및 확장성을 향상시킬 수 있는 일반적으로 사용되는 소프트웨어 디자인 방법입니다. 플라이웨이트 패턴은 객체를 공유하여 메모리 오버헤드를 줄이는 디자인 패턴 중 하나입니다. 이 기사에서는 프로그램 성능을 향상시키기 위해 PHP에서 플라이웨이트 모드를 사용하는 방법을 살펴보겠습니다. 플라이웨이트 모드란 무엇인가요? 플라이웨이트 패턴은 서로 다른 객체 간에 동일한 객체를 공유하는 것을 목적으로 하는 구조적 디자인 패턴입니다.

Go 언어의 객체지향적 특징 분석 Go 언어의 객체지향적 특징 분석 Apr 04, 2024 am 11:18 AM

Go 언어는 객체 지향 프로그래밍, 구조체를 통한 객체 정의, 포인터 수신기를 사용한 메서드 정의, 인터페이스를 통한 다형성 구현을 지원합니다. 객체 지향 기능은 Go 언어에서 코드 재사용, 유지 관리 용이성 및 캡슐화를 제공하지만 클래스 및 상속 및 메서드 시그니처 캐스트에 대한 전통적인 개념이 부족하다는 제한 사항도 있습니다.

PHP 객체 지향 프로그래밍에 대한 심층적인 이해: 객체 지향 프로그래밍을 위한 디버깅 기술 PHP 객체 지향 프로그래밍에 대한 심층적인 이해: 객체 지향 프로그래밍을 위한 디버깅 기술 Jun 05, 2024 pm 08:50 PM

개체 상태 추적, 중단점 설정, 예외 추적 및 xdebug 확장 활용을 마스터하면 PHP 개체 지향 프로그래밍 코드를 효과적으로 디버그할 수 있습니다. 1. 객체 상태 추적: var_dump() 및 print_r()을 사용하여 객체 속성 및 메소드 값을 확인합니다. 2. 중단점 설정: 개발 환경에서 중단점을 설정하면 실행이 중단점에 도달하면 디버거가 일시 중지되므로 개체 상태를 쉽게 확인할 수 있습니다. 3. 예외 추적: 예외 발생 시 스택 추적 및 메시지를 가져오려면 try-catch 블록과 getTraceAsString()을 사용합니다. 4. 디버거 사용: xdebug_var_dump() 함수는 코드 실행 중에 변수의 내용을 검사할 수 있습니다.

See all articles