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

先看一下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으로 문의하세요.
如何使用Go语言实现面向对象的事件驱动编程如何使用Go语言实现面向对象的事件驱动编程Jul 20, 2023 pm 10:36 PM

如何使用Go语言实现面向对象的事件驱动编程引言:面向对象的编程范式被广泛应用于软件开发中,而事件驱动编程是一种常见的编程模式,它通过事件的触发和处理来实现程序的流程控制。本文将介绍如何使用Go语言实现面向对象的事件驱动编程,并提供代码示例。一、事件驱动编程的概念事件驱动编程是一种基于事件和消息的编程模式,它将程序的流程控制转移到事件的触发和处理上。在事件驱动

解析PHP面向对象编程中的享元模式解析PHP面向对象编程中的享元模式Aug 14, 2023 pm 05:25 PM

解析PHP面向对象编程中的享元模式在面向对象编程中,设计模式是一种常用的软件设计方法,它可以提高代码的可读性、可维护性和可扩展性。享元模式(Flyweightpattern)是设计模式中的一种,它通过共享对象来降低内存的开销。本文将探讨如何在PHP中使用享元模式来提高程序性能。什么是享元模式?享元模式是一种结构型设计模式,它的目的是在不同对象之间共享相同的

go语言是面向对象的吗go语言是面向对象的吗Mar 15, 2021 am 11:51 AM

go语言既不是面向对象,也不是面向过程,因为Golang并没有明显的倾向,而是更倾向于让编程者去考虑该怎么去用它,也许它的特色就是灵活,编程者可以用它实现面向对象,但它本身不支持面向对象的语义。

python是面向对象还是面向过程python是面向对象还是面向过程Jan 05, 2023 pm 04:54 PM

python是面向对象的。Python语言在设计之初,就定位为一门面向对象的编程语言,“Python中一切皆对象”就是对Pytho 这门编程语言的完美诠释。类和对象是Python的重要特征,相比其它面向对象语言,Python很容易就可以创建出一个类和对象;同时,Python也支持面向对象的三大特征:封装、继承和多态。

如何使用Go语言实现面向对象的数据库访问如何使用Go语言实现面向对象的数据库访问Jul 25, 2023 pm 01:22 PM

如何使用Go语言实现面向对象的数据库访问引言:随着互联网的发展,大量的数据需要被存储和访问,数据库成为了现代应用开发中的重要组成部分。而作为一门现代化、高效性能的编程语言,Go语言很适合用来处理数据库操作。而本文将重点讨论如何使用Go语言实现面向对象的数据库访问。一、数据库访问的基本概念在开始讨论如何使用Go语言实现面向对象的数据库访问之前,我们先来了解一下

PHP面向对象编程入门指南PHP面向对象编程入门指南Jun 11, 2023 am 09:45 AM

PHP作为一种广泛使用的编程语言,已成为构建动态网站和网络应用程序的首选语言之一。其中,面向对象编程(OOP)的概念和技术越来越受到开发者的欢迎和推崇。本篇文章将为读者提供PHP面向对象编程的入门指南,介绍OOP的基本概念,语法和应用。什么是面向对象编程(OOP)?面向对象编程(Object-OrientedProgramming,简称OOP),是一种编程

面向对象是啥意思面向对象是啥意思Jul 17, 2023 pm 02:03 PM

面向对象是软件开发方法,一种编程范式。是一种将面向对象的思想应用于软件开发过程并指导开发活动的系统方法。这是一种基于“对象”概念的方法论。对象是由数据和允许的操作组成的包,它与目标实体有直接的对应关系。对象类定义了一组具有类似属性的对象。面向对象是基于对象的概念,以对象为中心,以类和继承为构建机制,认识、理解和描绘客观世界,设计和构建相应的软件系统。

Go语言中的面向对象编程方法Go语言中的面向对象编程方法Jun 01, 2023 am 11:21 AM

随着计算机技术的不断进步,编程语言也在不断发展与更新,每一种新的编程语言都有其自己独特的特点和优势。其中,Go语言作为一种比较新的编程语言,已经逐渐受到了开发者们的关注和喜爱。其中,面向对象编程方法是Go语言编程的重要组成部分,下面我们就来一起了解一下Go语言中的面向对象编程方法。一、Go语言中的面向对象编程面向对象编程(OOP,Object-Oriente

See all articles

핫 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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음