1 - 對象

1.1 對象的相關(guān)概念

• 什么是對象瓜客？

  在 JavaScript 中，對象是一組無序的相關(guān)屬性和方法的集合竿开，所有的事物都是對象谱仪，例如字符串、數(shù)值否彩、數(shù)組疯攒、函數(shù)等。
  對象是由屬性和方法組成的列荔。

  • 屬性：事物的特征敬尺，在對象中用屬性來表示（常用名詞）

  • 方法：事物的行為枚尼，在對象中用方法來表示（常用動(dòng)詞）

• 為什么需要對象？

  保存一個(gè)值時(shí)砂吞，可以使用變量署恍，保存多個(gè)值（一組值）時(shí)，可以使用數(shù)組蜻直。

  如果要保存一個(gè)人的完整信息呢盯质？

  例如，將“張三瘋”的個(gè)人的信息保存在數(shù)組中的方式為：

  var arr = [‘張三瘋’, ‘男', 128,154];
  

  上述例子中用數(shù)組保存數(shù)據(jù)的缺點(diǎn)是：數(shù)據(jù)只能通過索引值訪問概而，開發(fā)者需要清晰的清除所有的數(shù)據(jù)的排行才能準(zhǔn)確地獲取數(shù)據(jù)唤殴，而當(dāng)數(shù)據(jù)量龐大時(shí)，不可能做到記憶所有數(shù)據(jù)的索引值到腥。

  為了讓更好地存儲(chǔ)一組數(shù)據(jù)朵逝，對象應(yīng)運(yùn)而生：對象中為每項(xiàng)數(shù)據(jù)設(shè)置了屬性名稱，可以訪問數(shù)據(jù)更語義化乡范，數(shù)據(jù)結(jié)構(gòu)清晰配名，表意明顯，方便開發(fā)者使用晋辆。

  使用對象記錄上組數(shù)據(jù)為：

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

  JS中的對象表達(dá)結(jié)構(gòu)更清晰渠脉，更強(qiáng)大。

1.2 創(chuàng)建對象的三種方式

• 利用字面量創(chuàng)建對象

  使用對象字面量創(chuàng)建對象：

就是花括號 { } 里面包含了表達(dá)這個(gè)具體事物（對象）的屬性和方法瓶佳；{ } 里面采取鍵值對的形式表示

• 鍵：相當(dāng)于屬性名

• 值：相當(dāng)于屬性值芋膘，可以是任意類型的值（數(shù)字類型、字符串類型霸饲、布爾類型为朋，函數(shù)類型等）

  代碼如下：

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

  上述代碼中 star即是創(chuàng)建的對象。

• 對象的使用

  • 對象的屬性

    • 對象中存儲(chǔ)具體數(shù)據(jù)的 "鍵值對"中的 "鍵"稱為對象的屬性厚脉，即對象中存儲(chǔ)具體數(shù)據(jù)的項(xiàng)

  • 對象的方法

    • 對象中存儲(chǔ)函數(shù)的 "鍵值對"中的 "鍵"稱為對象的方法习寸，即對象中存儲(chǔ)函數(shù)的項(xiàng)

  • 訪問對象的屬性

    • 對象里面的屬性調(diào)用 : 對象.屬性名 ，這個(gè)小點(diǎn) . 就理解為“ 的 ”

    • 對象里面屬性的另一種調(diào)用方式 : 對象[‘屬性名’]傻工，注意方括號里面的屬性必須加引號

      示例代碼如下：

      console.log(star.name)     // 調(diào)用名字屬性
      console.log(star['name'])  // 調(diào)用名字屬性
      

  • 調(diào)用對象的方法

    • 對象里面的方法調(diào)用：對象.方法名() 霞溪，注意這個(gè)方法名字后面一定加括號

      示例代碼如下：

      star.sayHi();              // 調(diào)用 sayHi 方法,注意，一定不要忘記帶后面的括號
      

  • 變量中捆、屬性鸯匹、函數(shù)、方法總結(jié)

屬性是對象的一部分泄伪，而變量不是對象的一部分殴蓬，變量是單獨(dú)存儲(chǔ)數(shù)據(jù)的容器

• 變量：單獨(dú)聲明賦值，單獨(dú)存在
• 屬性：對象里面的變量稱為屬性臂容，不需要聲明科雳，用來描述該對象的特征

方法是對象的一部分根蟹，函數(shù)不是對象的一部分脓杉，函數(shù)是單獨(dú)封裝操作的容器

• 函數(shù)：單獨(dú)存在的糟秘，通過“函數(shù)名()”的方式就可以調(diào)用

• 方法：對象里面的函數(shù)稱為方法，方法不需要聲明球散，使用“對象.方法名()”的方式就可以調(diào)用尿赚，方法用來描述該對象的行為和功能。

• 利用 new Object 創(chuàng)建對象

  • 創(chuàng)建空對象

    var andy = new Obect();
    

    通過內(nèi)置構(gòu)造函數(shù)Object創(chuàng)建對象蕉堰，此時(shí)andy變量已經(jīng)保存了創(chuàng)建出來的空對象

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

    • 通過對象操作屬性和方法的方式凌净，來為對象增加屬性和方法

      示例代碼如下：

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

    注意：

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

• 利用構(gòu)造函數(shù)創(chuàng)建對象

  • 構(gòu)造函數(shù)

    • 構(gòu)造函數(shù)：是一種特殊的函數(shù)，主要用來初始化對象屋讶，即為對象成員變量賦初始值冰寻，它總與 new 運(yùn)算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來皿渗，然后封裝到這個(gè)函數(shù)里面斩芭。

    • 構(gòu)造函數(shù)的封裝格式：

      function 構(gòu)造函數(shù)名(形參1,形參2,形參3) {
           this.屬性名1 = 參數(shù)1;
           this.屬性名2 = 參數(shù)2;
           this.屬性名3 = 參數(shù)3;
           this.方法名 = 函數(shù)體;
      }
      

    • 構(gòu)造函數(shù)的調(diào)用格式

      var obj = new 構(gòu)造函數(shù)名(實(shí)參1，實(shí)參2乐疆，實(shí)參3)
      

      以上代碼中划乖，obj即接收到構(gòu)造函數(shù)創(chuàng)建出來的對象。

    • 注意事項(xiàng)

      1. 構(gòu)造函數(shù)約定首字母大寫挤土。
      2. 函數(shù)內(nèi)的屬性和方法前面需要添加 this 琴庵，表示當(dāng)前對象的屬性和方法。
      3. 構(gòu)造函數(shù)中不需要 return 返回結(jié)果仰美。
      4. 當(dāng)我們創(chuàng)建對象的時(shí)候迷殿，必須用 new 來調(diào)用構(gòu)造函數(shù)。

    • 其他

      構(gòu)造函數(shù)咖杂，如 Stars()贪庙，抽象了對象的公共部分，封裝到了函數(shù)里面翰苫，它泛指某一大類（class）
      創(chuàng)建對象止邮，如 new Stars()，特指某一個(gè)奏窑，通過 new 關(guān)鍵字創(chuàng)建對象的過程我們也稱為對象實(shí)例化

        // 我們需要?jiǎng)?chuàng)建四大天王的對象  相同的屬性： 名字 年齡 性別  相同的方法： 唱歌
        // 構(gòu)造函數(shù)的語法格式
        // function 構(gòu)造函數(shù)名() {
        //     this.屬性 = 值;
        //     this.方法 = function() {}
        // }
        // new 構(gòu)造函數(shù)名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('劉德華', 18, '男'); // 調(diào)用函數(shù)返回的是一個(gè)對象
        // console.log(typeof ldh);
        console.log(ldh.name); // 劉德華
        console.log(ldh['sex']); // 男
        ldh.sing('冰雨');
        var zxy = new Star('張學(xué)友', 19, '男');
        console.log(zxy.name); // 張學(xué)友
        console.log(zxy.age); // 19
        zxy.sing('李香蘭')

• new關(guān)鍵字的作用

  1. 在構(gòu)造函數(shù)代碼開始執(zhí)行之前导披，創(chuàng)建一個(gè)空對象；
  2. 修改this的指向埃唯，把this指向創(chuàng)建出來的空對象撩匕；
  3. 執(zhí)行函數(shù)的代碼
  4. 在函數(shù)完成之后，返回this---即創(chuàng)建出來的對象

1.3 遍歷對象

for...in 語句用于對數(shù)組或者對象的屬性進(jìn)行循環(huán)操作墨叛。

其語法如下：

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

語法中的變量是自定義的止毕，它需要符合命名規(guī)范模蜡，通常我們會(huì)將這個(gè)變量寫為 k 或者 key。

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