【web前端基礎 | JS基礎】物件

物件

一：物件的相關概念

1：什麼是物件？

在 JavaScript 中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件，例如字串、數值、陣列、函式等。

物件是由屬性和方法組成的。

• 屬性：事物的特徵，在物件中用屬性來表示（常用名詞）

• 方法：事物的行為，在物件中用方法來表示（常用動詞）

2：為什麼需要物件:

儲存一個值時，可以使用變數，儲存多個值（一組值）時，可以使用陣列。

資料只能通過索引值訪問，開發者需要清晰的清除所有的資料的排行才能準確地獲取資料，而當資料量龐大時，不可能做到記憶所有資料的索引值。

為了讓更好地儲存一組資料，物件應運而生：物件中為每項資料設定了屬性名稱，可以訪問資料更語義化，資料結構清晰，表意明顯，方便開發者使用。

JS中的物件表達結構更清晰，更強大。

二：建立物件的三種方式

1：利用字面量建立物件

花括號： { }

• 裡面包含了表達這個具體事物（物件）的屬性和方法；

• 物件中儲存具體資料的 "鍵值對"中的 "鍵"稱為物件的屬性，即物件中儲存具體資料的項

• { } 裡面採取鍵值對的形式表示

• 物件中儲存函式的 "鍵值對"中的 "鍵"稱為物件的方法，即物件中儲存函式的項

• 鍵：相當於屬性名

• 值：相當於屬性值，可以是任意型別的值（數字型別、字串型別、布林型別，函式型別等）

• , 隔開

• 行為，方法：一個匿名函式

  程式碼如下：

var obj = {
    uname: "zhao",
    age: 18,
    sex: "女",
    tel: 1234567890,
    // zhao這個好人的行為
    speak: function () {
        console.log("好好學習，天天向上");
    }
}
//列印obj裡面的uname
console.log(obj.uname);
//列印行為
obj.speak();
}

• 物件的使用

  • 訪問物件的屬性

    • 物件裡面的屬性呼叫 : 物件.屬性名 ，這個小點 . 就理解為“ 的 ”

    • 物件裡面屬性的另一種呼叫方式 : 物件[‘屬性名’]，注意方括號裡面的屬性必須加引號

      示例程式碼如下：

      console.log(obj.uname)     // 呼叫名字屬性
      console.log(obj['uname'])  // 呼叫名字屬性
      

  • 呼叫物件的方法

    • 物件裡面的方法呼叫：物件.方法名() ，注意這個方法名字後面一定加括號

      obj.speak();             // 呼叫 sayHi 方法,注意，一定不要忘記帶後面的括號
      

  • 變數、屬性、函式、方法總結

    屬性是物件的一部分，而變數不是物件的一部分，變數是單獨儲存資料的容器

    • 變數：單獨宣告賦值，單獨存在

    • 屬性：物件裡面的變數稱為屬性，不需要宣告，用來描述該物件的特徵

    • 方法是物件的一部分，函式不是物件的一部分，函式是單獨封裝操作的容器

    • 函式：單獨存在的，通過“函式名()”的方式就可以呼叫

    • 方法：物件裡面的函式稱為方法，方法不需要宣告，使用“物件.方法名()”的方式就可以呼叫，方法用來描述該物件的行為和功能。

2：利用 new Object 建立物件

• 建立空物件

  var andy = new Obect();
  

  注意：

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

3：利用建構函式建立物件（前兩種一次只可以建立1個）

• 建構函式

  • 建構函式：是一種特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總與 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 來呼叫建構函式。

  • 其他

    1：建構函式，如 Stars()，抽象了物件的公共部分，封裝到了函式裡面，它泛指某一大類（class）

    2：建立物件，如 new Stars()，特指某一個，通過 new 關鍵字建立物件的過程我們也稱為物件例項化

• new關鍵字的作用

  1. 在建構函式程式碼開始執行之前，建立一個空物件；
  2. 修改this的指向，把this指向建立出來的空物件；
  3. 執行函式的程式碼
  4. 在函式完成之後，返回this—即建立出來的物件

4：遍歷物件

for…in 語句用於對陣列或者物件的屬性進行迴圈操作。

其語法如下：

for (變數 in 物件名字) {
    // 在此執行程式碼
}

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

for (var k in obj) {
    console.log(k);      // 這裡的 k 是屬性名
    console.log(obj[k]); // 這裡的 obj[k] 是屬性值
}