js作成対象の3つの方法

11648 ワード

 1  
<span style="color: #008080;"> 2</span>         <span style="color: #008000;">//</span><span style="color: #008000;">         </span>
<span style="color: #008080;"> 3</span>         <span style="color: #008000;">//</span><span style="color: #008000;"> 1.       (       )     </span>
<span style="color: #008080;"> 4</span> 
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;">var</span> obj1 =<span style="color: #000000;"> {
</span><span style="color: #008080;"> 6</span>             uname: 'ash'<span style="color: #000000;">,
</span><span style="color: #008080;"> 7</span>             age: 18<span style="color: #000000;">,
</span><span style="color: #008080;"> 8</span>             sex: " "<span style="color: #000000;">,
</span><span style="color: #008080;"> 9</span>             sayhi: <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
</span><span style="color: #008080;">10</span>                 console.log("hello kitty"<span style="color: #000000;">);
</span><span style="color: #008080;">11</span> 
<span style="color: #008080;">12</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">13</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">14</span> 
<span style="color: #008080;">15</span>         <span style="color: #008000;">//</span><span style="color: #008000;">         </span>
<span style="color: #008080;">16</span> <span style="color: #000000;">        console.log(obj1.uname);
</span><span style="color: #008080;">17</span> <span style="color: #000000;">        console.log(obj1[`age`]);
</span><span style="color: #008080;">18</span> 
<span style="color: #008080;">19</span>         <span style="color: #008000;">//</span><span style="color: #008000;">       </span>
<span style="color: #008080;">20</span> <span style="color: #000000;">        obj1.sayhi();
</span><span style="color: #008080;">21</span> 
<span style="color: #008080;">22</span> 
<span style="color: #008080;">23</span>         <span style="color: #008000;">//</span><span style="color: #008000;">           , new    </span>
<span style="color: #008080;">24</span>         <span style="color: #0000ff;">var</span> obj2 = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Object();
</span><span style="color: #008080;">25</span>         <span style="color: #008000;">//</span><span style="color: #008000;">       </span>
<span style="color: #008080;">26</span>         obj2.uname = '  '<span style="color: #000000;">;
</span><span style="color: #008080;">27</span>         obj2.age = 20<span style="color: #000000;">;
</span><span style="color: #008080;">28</span>         obj2.sex = " "<span style="color: #000000;">;
</span><span style="color: #008080;">29</span>         obj2.sayHi = <span style="color: #0000ff;">function</span><span style="color: #000000;">() {
</span><span style="color: #008080;">30</span>             console.log("hi~"<span style="color: #000000;">);
</span><span style="color: #008080;">31</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">32</span> <span style="color: #000000;">        console.log(obj2.age);
</span><span style="color: #008080;">33</span> <span style="color: #000000;">        console.log(obj2[`age`]);
</span><span style="color: #008080;">34</span> <span style="color: #000000;">        obj2.sayHi();
</span><span style="color: #008080;">35</span> 
<span style="color: #008080;">36</span> 
<span style="color: #008080;">37</span>         <span style="color: #008000;">//</span><span style="color: #008000;">                      ,             </span>
<span style="color: #008080;">38</span>         <span style="color: #008000;">//</span><span style="color: #008000;">           ,     </span>
<span style="color: #008080;">39</span>         <span style="color: #0000ff;">function</span><span style="color: #000000;"> Star(uname, age, sex) {
</span><span style="color: #008080;">40</span>             <span style="color: #0000ff;">this</span>.uname = uname; <span style="color: #008000;">//</span><span style="color: #008000;">           this    ,      </span>
<span style="color: #008080;">41</span>             <span style="color: #0000ff;">this</span>.age =<span style="color: #000000;"> age;
</span><span style="color: #008080;">42</span>             <span style="color: #0000ff;">this</span>.sex =<span style="color: #000000;"> sex;
</span><span style="color: #008080;">43</span>             <span style="color: #0000ff;">this</span>.sing = <span style="color: #0000ff;">function</span><span style="color: #000000;">(ge) {
</span><span style="color: #008080;">44</span>                 console.log(uname + "     " +<span style="color: #000000;"> ge);
</span><span style="color: #008080;">45</span> 
<span style="color: #008080;">46</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">47</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">48</span> 
<span style="color: #008080;">49</span>         <span style="color: #0000ff;">var</span> LDH = <span style="color: #0000ff;">new</span> Star("   ", 20, " "<span style="color: #000000;">);
</span><span style="color: #008080;">50</span> <span style="color: #000000;">        console.log(LDH.uname);
</span><span style="color: #008080;">51</span> <span style="color: #000000;">        console.log(LDH.age);
</span><span style="color: #008080;">52</span>         LDH.sing("  "<span style="color: #000000;">);
</span><span style="color: #008080;">53</span> 
<span style="color: #008080;">54</span>         <span style="color: #008000;">/*</span><span style="color: #008000;"> new         :
</span><span style="color: #008080;">55</span> <span style="color: #008000;">        1.       
</span><span style="color: #008080;">56</span> <span style="color: #008000;">        2.this      
</span><span style="color: #008080;">57</span> <span style="color: #008000;">        3.               
</span><span style="color: #008080;">58</span> <span style="color: #008000;">        4.      ,           return </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">59</span> 
<span style="color: #008080;">60</span>         <span style="color: #0000ff;">var</span> YBN = <span style="color: #0000ff;">new</span> Star("   ", 21, " "); <span style="color: #008000;">//</span><span style="color: #008000;">new     </span>
<span style="color: #008080;">61</span>         YBN.sing("   "<span style="color: #000000;">);
</span><span style="color: #008080;">62</span>     
 
このオブジェクトの属性と値はどうやって巡回しますか?for inで循環する
 1 
<span style="color: #008080;"> 2</span>         <span style="color: #008000;">//</span><span style="color: #008000;">   ,          </span>
<span style="color: #008080;"> 3</span>         <span style="color: #0000ff;">function</span><span style="color: #000000;"> Star(uname, age, sex) {
</span><span style="color: #008080;"> 4</span>             <span style="color: #0000ff;">this</span>.uname =<span style="color: #000000;"> uname;
</span><span style="color: #008080;"> 5</span>             <span style="color: #0000ff;">this</span>.age =<span style="color: #000000;"> age;
</span><span style="color: #008080;"> 6</span>             <span style="color: #0000ff;">this</span>.sex =<span style="color: #000000;"> sex;
</span><span style="color: #008080;"> 7</span>             <span style="color: #0000ff;">this</span>.sing = <span style="color: #0000ff;">function</span><span style="color: #000000;">(ge) {
</span><span style="color: #008080;"> 8</span>                 console.log(uname + "    " +<span style="color: #000000;"> ge);
</span><span style="color: #008080;"> 9</span> 
<span style="color: #008080;">10</span> <span style="color: #000000;">            }
</span><span style="color: #008080;">11</span> 
<span style="color: #008080;">12</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">13</span>         <span style="color: #0000ff;">var</span> GLN = <span style="color: #0000ff;">new</span> Star("   ", 30, " "<span style="color: #000000;">);
</span><span style="color: #008080;">14</span>         <span style="color: #008000;">//</span><span style="color: #008000;">           </span>
<span style="color: #008080;">15</span>         <span style="color: #0000ff;">for</span> (const key <span style="color: #0000ff;">in</span><span style="color: #000000;"> GLN) {
</span><span style="color: #008080;">16</span>             console.log(GLN.uname + "    " +<span style="color: #000000;"> key);
</span><span style="color: #008080;">17</span>             console.log(GLN.uname + "   " +<span style="color: #000000;"> GLN[key]);
</span><span style="color: #008080;">18</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">19</span>     
なお、keyは属性だけで、obj[key]は値です.