1. 程式人生 > 實用技巧 >CF587F. Duff is Mad

CF587F. Duff is Mad

1. 物件的相關概念

  • 什麼是物件?

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

    • 屬性:事物的特徵,在物件中用屬性來表示(常用名詞)

    • 方法:事物的行為,在物件中用方法來表示(常用動詞)

  • 為什麼需要物件?

    儲存一個值時,可以使用變數,儲存多個值(一組值)時,可以使用陣列。

    如果要儲存一個人的完整資訊呢?

    例如,將“張三瘋”的個人的資訊儲存在陣列中的方式為:

    var arr = [‘張三瘋’, ‘男', 128,154];
    上述例子中用陣列儲存資料的缺點是:資料只能通過索引值訪問,開發者需要清晰的清除所有的資料的排行才能準確地獲取資料,而當資料量龐大時,不可能做到記憶所有資料的索引值。

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

    使用物件記錄上組資料為:
    var obj = {
    "name":"張三瘋",
    "sex":"男",
    "age":128,
    "height":154
    }
    JS中的物件表達結構更清晰,更強大。

2.建立物件的三種方式

  • 利用字面量建立物件

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

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

      程式碼如下:

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

      上述程式碼中 star即是建立的物件。

  • 物件的使用

    • 物件的屬性

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

    • 物件的方法

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

    • 訪問物件的屬性

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

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

        示例程式碼如下:

        console.log(star.name)   // 呼叫名字屬性
        console.log(star['name']) // 呼叫名字屬性
    • 呼叫物件的方法

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

        示例程式碼如下:

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

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

      • 變數:單獨宣告賦值,單獨存在

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

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

- 函式:單獨存在的,通過“函式名()”的方式就可以呼叫
- 方法:物件裡面的函式稱為方法,方法不需要宣告,使用“物件.方法名()”的方式就可以呼叫,方法用來描述該物件的行為和功能。
  • 利用 new Object 建立物件

    • 建立空物件

      var andy = new Obect();

      通過內建建構函式Object建立物件,此時andy變數已經儲存了創建出來的空物件

    • 給空物件新增屬性和方法

      • 通過物件操作屬性和方法的方式,來為物件增加屬性和方法

        示例程式碼如下:

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

      注意:

      • Object() :第一個字母大寫

      • new Object() :需要 new 關鍵字

      • 使用的格式:物件.屬性 = 值;

  • 利用建構函式建立物件

    • 建構函式

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

      • 其他

        建構函式,如 Stars(),抽象了物件的公共部分,封裝到了函式裡面,它泛指某一大類(class) 建立物件,如 new Stars(),特指某一個,通過 new 關鍵字建立物件的過程我們也稱為物件例項化

  • new關鍵字的作用

    1. 在建構函式程式碼開始執行之前,建立一個空物件;

    2. 修改this的指向,把this指向創建出來的空物件;

    3. 執行函式的程式碼

    4. 在函式完成之後,返回this---即創建出來的物件

    3. 遍歷物件

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

    其語法如下:
    for (變數 in 物件名字) {
    // 在此執行程式碼
    }
    語法中的變數是自定義的,它需要符合命名規範,通常我們會將這個變數寫為 k 或者 key。
    for (var k in obj) {
    console.log(k); // 這裡的 k 是屬性名
    console.log(obj[k]); // 這裡的 obj[k] 是屬性值
    }