JavaScript七 - 對象

7.1對象基礎

7.1.1什麼是對象

在 JavaScript 中,對象是一組無序的相關屬性和方法的集合,所有的事物都是對象,例如字符串、數值、數組、函數等。
對象是由屬性和方法組成的。

  • 屬性:事物的特徵,在對象中用屬性來表示(常用名詞)
  • 方法:事物的行爲,在對象中用方法來表示(常用動詞)


7.1.2爲什麼需要對象

保存一個值時,可以使用變量,保存多個值(一組值)時,可以使用數組。

如果要保存一個人的完整信息呢?

例如,將“張三瘋”的個人的信息保存在數組中的方式爲:
var arr = [‘張三瘋’, ‘男', 128,154];

上述例子中用數組保存數據的缺點是:數據只能通過索引值訪問,開發者需要清晰的清除所有的數據的排行才能準確地獲取數據,而當數據量龐大時,不可能做到記憶所有數據的索引值。

爲了讓更好地存儲一組數據,對象應運而生:對象中爲每項數據設置了屬性名稱,可以訪問數據更語義化,數據結構清晰,表意明顯,方便開發者使用。

使用對象記錄上組數據爲:

var obj = {
  "name":"張三瘋",
  "sex":"男",
  "age":128,
  "height":154
}

JS中的對象表達結構更清晰,更強大。

7.1.3字面量創建對象

利用字面量創建對象

使用對象字面量創建對象
  • 就是花括號 { } 裏面包含了表達這個具體事物(對象)的屬性和方法;{ } 裏面採取鍵值對的形式表示
  • 鍵:相當於屬性名

  • 值:相當於屬性值,可以是任意類型的值(數字類型、字符串類型、布爾類型,函數類型等)

    代碼如下:

    var star = {
      name : '孫悟空',
      age : 18,
      sex : '男',
      sayHi : function(){
        alert('大家好啊~');
      }
    };
    

    上述代碼中 star即是創建的對象。

7.1.4對象的使用

  • 對象的屬性

    • 對象中存儲具體數據的 "鍵值對"中的 "鍵"稱爲對象的屬性,即對象中存儲具體數據的項
  • 對象的方法

    • 對象中存儲函數的 "鍵值對"中的 "鍵"稱爲對象的方法,即對象中存儲函數的項
  • 訪問對象的屬性

    • 對象裏面的屬性調用 : 對象.屬性名 ,這個小點 . 就理解爲“ 的 ”

    • 對象裏面屬性的另一種調用方式 : 對象[‘屬性名’],注意方括號裏面的屬性必須加引號

      示例代碼如下:

      console.log(star.name)     // 調用名字屬性
      console.log(star['name'])  // 調用名字屬性
      
  • 調用對象的方法

    • 對象裏面的方法調用:對象.方法名() ,注意這個方法名字後面一定加括號

      示例代碼如下:

      star.sayHi();    // 調用 sayHi 方法,注意,一定不要忘記帶後面的括號
      
  • 變量、屬性、函數、方法總結

    屬性是對象的一部分,而變量不是對象的一部分,變量是單獨存儲數據的容器

    • 變量:單獨聲明賦值,單獨存在
    • 屬性:對象裏面的變量稱爲屬性,不需要聲明,用來描述該對象的特徵
    • 方法是對象的一部分,函數不是對象的一部分,函數是單獨封裝操作的容器
      • 函數:單獨存在的,通過“函數名()”的方式就可以調用
      • 方法:對象裏面的函數稱爲方法,方法不需要聲明,使用“對象.方法名()”的方式就可以調用,方法用來描述該對象的行爲和功能。

7.1.5new Object()創建對象

利用 new Object 創建對象

  • 創建空對象

    var andy = new Obect();
    

    通過內置構造函數Object創建對象,此時andy變量已經保存了創建出來的空對象

  • 給空對象添加屬性和方法

    • 通過對象操作屬性和方法的方式,來爲對象增加屬性和方法

      示例代碼如下:

    andy.name = '孫悟空';
    andy.age = 18;
    andy.sex = '男';
    andy.sayHi = function(){
        alert('大家好啊~');
    }
    

    注意:

    • Object() :第一個字母大寫
    • new Object() :需要 new 關鍵字
    • 使用的格式:對象.屬性 = 值;

7.1.6構造函數創建對象

  • 構造函數:是一種特殊的函數,主要用來初始化對象,即爲對象成員變量賦初始值,它總與 new 運算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來,然後封裝到這個函數裏面。

  • 構造函數的封裝格式:

    function 構造函數名(形參1,形參2,形參3) {
         this.屬性名1 = 參數1;
         this.屬性名2 = 參數2;
         this.屬性名3 = 參數3;
         this.方法名 = 函數體;
    }
    
  • 構造函數的調用格式

    var obj = new 構造函數名(實參1,實參2,實參3)
    

    以上代碼中,obj即接收到構造函數創建出來的對象。

  • 注意事項

    1. 構造函數約定首字母大寫
    2. 函數內的屬性和方法前面需要添加 this ,表示當前對象的屬性和方法。
    3. 構造函數中不需要 return 返回結果
    4. 當我們創建對象的時候,必須用 new 來調用構造函數

7.1.7構造函數和對象區別

構造函數,如 Stars(),抽象了對象的公共部分,封裝到了函數裏面,它泛指某一大類(class)
創建對象,如 new Stars(),特指某一個,通過 new 關鍵字創建對象的過程我們也稱爲對象實例化

7.1.8new關鍵字的作用

  • 在構造函數代碼開始執行之前,創建一個空對象;
  • 修改this的指向,把this指向創建出來的空對象;
  • 執行函數的代碼;
  • 在函數完成之後,返回this---即創建出來的對象。

7.1.9對象遍歷

for...in 語句用於對數組或者對象的屬性進行循環操作。

其語法如下:

for (變量 in 對象名字) {
  // 在此執行代碼
}

語法中的變量是自定義的,它需要符合命名規範,通常我們會將這個變量寫爲 k 或者 key。

for (var k in obj) {
  console.log(k);      // 這裏的 k 是屬性名
  console.log(obj[k]); // 這裏的 obj[k] 是屬性值
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章