首頁 web前端 js教程 javascript 面向对象编程 聊聊对象的事_js面向对象

javascript 面向对象编程 聊聊对象的事_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 Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1246
24
如何使用Go語言實現物件導向的事件驅動程式設計 如何使用Go語言實現物件導向的事件驅動程式設計 Jul 20, 2023 pm 10:36 PM

如何使用Go語言實現物件導向的事件驅動程式設計引言:物件導向的程式設計範式被廣泛應用於軟體開發中,而事件驅動程式設計是一種常見的程式設計模式,它透過事件的觸發和處理來實現程式的流程控制。本文將介紹如何使用Go語言實現物件導向的事件驅動編程,並提供程式碼範例。一、事件驅動程式設計的概念事件驅動程式設計是一種基於事件和訊息的程式設計模式,它將程式的流程控制轉移到事件的觸發和處理上。在事件驅動

@JsonIdentityInfo註解在Java中使用Jackson的重要性是什麼? @JsonIdentityInfo註解在Java中使用Jackson的重要性是什麼? Sep 23, 2023 am 09:37 AM

當物件在Jackson庫中具有父子關係時,將使用@JsonIdentityInfo註解。 @JsonIdentityInfo 註解 用於在序列化和反序列化過程中指示物件身分。 ObjectIdGenerators.PropertyGenerator是一個抽象佔位符類,用來表示要使用的物件識別碼來自POJO屬性的情況。語法@Target(value={ANNOTATION_TYPE,TYPE,FIELD,METHOD,PARAMETER})@Retention(value=RUNTIME)public

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物件導向程式設計中的享元模式在物件導向程式設計中,設計模式是一種常用的軟體設計方法,它可以提高程式碼的可讀性、可維護性和可擴充性。享元模式(Flyweightpattern)是設計模式中的一種,它透過共享物件來降低記憶體的開銷。本文將探討如何在PHP中使用享元模式來提升程式效能。什麼是享元模式?享元模式是一種結構型設計模式,它的目的是在不同物件之間共享相同的

Go語言的物件導向特性解析 Go語言的物件導向特性解析 Apr 04, 2024 am 11:18 AM

Go語言支援物件導向編程,透過struct定義對象,使用指標接收器定義方法,並透過介面實現多態。物件導向特性在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