js創建對象的三種方式

 1  <script>
 2         //創建對象的三種方式
 3         // 1.利用對象字面量(傳說中的大括弧)創建對象 
 4 
 5         var obj1 = {
 6             uname: 'ash',
 7             age: 18,
 8             sex: "女",
 9             sayhi: function() {
10                 console.log("hello kitty");
11 
12             }
13         }
14 
15         //訪問屬性的兩種方法
16         console.log(obj1.uname);
17         console.log(obj1[`age`]);
18 
19         //調用對象的方法
20         obj1.sayhi();
21 
22 
23         // 創建對象的第二種方式,用new 關鍵字
24         var obj2 = new Object();
25         //追加屬性和方法
26         obj2.uname = '小明';
27         obj2.age = 20;
28         obj2.sex = "男";
29         obj2.sayHi = function() {
30             console.log("hi~");
31         }
32         console.log(obj2.age);
33         console.log(obj2[`age`]);
34         obj2.sayHi();
35 
36 
37         //    以上兩種方法創建對象一次只能創建一個，用構造函數可以多次創建對象
38         // 創建對象的第三種方式,用構造函數
39         function Star(uname, age, sex) {
40             this.uname = uname; //構造函數裡面一定要用到this關鍵字 ，表示當前對象
41             this.age = age;
42             this.sex = sex;
43             this.sing = function(ge) {
44                 console.log(uname + "的主打歌 " + ge);
45 
46             }
47         }
48 
49         var LDH = new Star("劉德華", 20, "男");
50         console.log(LDH.uname);
51         console.log(LDH.age);
52         LDH.sing("冰雨");
53 
54         /* new一個對象的執行過程：
55         1.創建一個新對象
56         2.this指向這個對象
57         3.形參為這個對象的屬性和方法賦值
58         4.返回這個對象，所以構造函數裡面不需要return */
59 
60         var YBN = new Star("姚貝娜", 21, "女"); //new出一個對象
61         YBN.sing("隨他吧");
62     </script>

如何遍歷這個對象的屬性和值呢？用for in 迴圈

 1 <script>
 2         // 首先，我用構造函數創建對象
 3         function Star(uname, age, sex) {
 4             this.uname = uname;
 5             this.age = age;
 6             this.sex = sex;
 7             this.sing = function(ge) {
 8                 console.log(uname + "的主打歌" + ge);
 9 
10             }
11 
12         }
13         var GLN = new Star("龔琳娜", 30, "女");
14         //現在來遍歷龔琳娜的屬性
15         for (const key in GLN) {
16             console.log(GLN.uname + "的屬性有" + key);
17             console.log(GLN.uname + "的值有" + GLN[key]);
18         }
19     </script>

註意，key只是屬性，obj[key] 才是值