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]は値です.