[Day 13] JavaScript 物件基礎(Object)

2024 iThome 鐵人賽

DAY 13

JavaScript

從零開始學習JavaScript 30天系列第 13 篇

16th鐵人賽

tonywang0707

團隊噗攏共

2024-08-20 23:24:54

201 瀏覽

分享至

Hi，大家好，我是Tony，是一個對於程式設計有一點點概念的新手。

今天是挑戰的第13天~
之前幾天很趕進度，都來不及當天發完文章QQ。
但今天的會來的及發表了哈哈。
今天的學習內容是：JavaScript 物件基礎(Object)

學習內容來自
彭彭老師JavaScript 物件基礎
https://www.youtube.com/watch?v=3WHc-Ed5yfI&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=20

昨天的學習內容：[Day 12] JavaScript 函式回傳值
https://ithelp.ithome.com.tw/articles/10345324

1. 什麼是物件？

物件是一個容器，用來封裝其他的資料，物件自己也是一種資料。
物件的使用流程：

建立物件
使用物件

2. 建立物件

先建立一個空白的物件，
語法：

<script>
    new Object();
</script>

物件也能放入變數中
語法如下：

<script>
   let obj=new Object();
</script>

3. 建立物件的成員(member)

物件的成員就是封裝在物件底下的資料。
函式也可以是物件裡的成員。
語法：物件.成員的名稱=資料

看一下範例：

<script>
    let obj=new Object();
    obj.x=3;
    obj.y=4;
    obj.show=function(){
        console.log("Hello");
    };
</script>

意思是，我先宣告一個變數，
變數是建立好的一個空白的物件。
接著在物件中放入物件成員，
物件成員x是3，
物件成員y是4，
物件成員show是個函式，函式內容是印出字串Hello。
以上就是範例的解釋內容。

4. 物件成員的種類

在上方的範例中，
成員x跟y，資料並非函式，稱之為屬性。
成員show，資料是一個函式，稱之為方法。
所以範例中的物件，就會說這個物件有兩個屬性x跟y，一個方法show。

5. 使用物件

使用一樣的範例來看如何使用物件：

<script>
    let obj=new Object();
    obj.x=3;
    obj.y=4;
    obj.show=function(){
        console.log("Hello");
    };
    
    //下方是使用物件
    console.log(obj); //印出整個物件
    console.log(obj.x+obj.y);  //使用物件屬性做運算
    obj.show(); //呼叫函式，在後面放上小括號()
</script>

都是用到之前學到的方式來做運用。

6. 在物件的方法中，使用this關鍵字

當我們在物件的方法中，使用this時，是表示物件本身
(因為this會出現在其他地方，所以這裡表明，一定是用在物件的方法中。)
範例：

<script>
    let obj=new Object();
    obj.x=3;
    obj.y=4;
    obj.show=function(){
        console.log("this.x,this.y");
    };
</script>

其中在方法裡的this.x、this.y，就代表obj.x、obj.y。

7. 使用JSON語法建立物件

JSON是縮寫，表示JavaScript Object Notation(Javascript物件表示法)
只要用一對大括號{}，就可以當作物件，
再把物件成員與資料放入大括號中。
程式碼範例：

<script>
    //JSON語法
    {成員名稱1:資料,成員名稱2:資料,...}
    
    //範例
    let obj1={}
    let obj2={
        x:3,
        y:4,
        show:function(){
            console.log(this.x,this.y);
        }
    };
</script>

接著我們進入練習

練習

練習1：空白物件，放進變數中，印出來

  <script>
      let man=new Object();
      console.log(man)
  </script>

網頁結果1
一開始會先顯示Objest，但重新整理後，就會出現{}
點開{}後就會出現物件內的資料

練習2：在物件中放入成員資料

假設這個物件是的人，寫入一些身份資料~

  <script>
      let man=new Object();
      man.age=18;
      man.name="小帥";
      man.talk=function(){
          console.log("Hello")
      };
      console.log(man);
  </script>

網頁結果2
可以看到所有屬性與方法都會寫出來。

練習3：使用物件

與上面的物件一樣，來使用物件。

  <script>
      let man=new Object();
      man.age=18;
      man.name="小帥";
      man.talk=function(){
          console.log("Hello")
      };
      //使用物件
      console.log(man);
      console.log(man.age>20); //人是否可以投票(滿20歲)
      man.talk(); //讓人說話(呼叫物件的方法)
  </script>

網頁結果3
結果出現false，表示未滿20歲xD
以及對話Hello

練習4：在物件的方法中，使用this，自我介紹。

同樣物件，修改一下方法，並使用this。

  <script>
      let man=new Object();
      man.age=18;
      man.name="小帥";
      man.talk=function(){
          console.log("Hello 我是",this.name,"我今年",this.age,"歲");
      };
      man.talk(); //自我介紹
  </script>

網頁結果4

練習4：用JSON語法建立物件，使用this，自我介紹。

同樣物件，修改一下方法，並使用this。

  <script>
      let man={
          age:18,
          name:"小帥",
          talk:function(){
              console.log("Hello 我是",this.name,"我今年",this.age,"歲");
          }
      };
      console.log(man);
      man.talk(); //自我介紹
  </script>