Upgrade to Pro — share decks privately, control downloads, hide ads and more …

第9回SenchaUG@札幌「Sencha Learning Place No.2」

Avatar for Tanaka Yuuya Tanaka Yuuya
June 10, 2013
130

第9回SenchaUG@札幌「Sencha Learning Place No.2」

Avatar for Tanaka Yuuya

Tanaka Yuuya

June 10, 2013
Tweet

Transcript

  1. ΦϒδΣΫτ +40/ w +BWB4DSJQUͷσʔλܕͷͭ w Ωʔͱ஋͕ϖΞʹͳ͍ͬͯΔ࿈૝഑ྻ w +BWB4DSJQUͷΦϒδΣΫτͷදه๏Λ ϕʔεͱͨܰ͠ྔͳσʔλهड़ݴޠ w

    +BWB4DSJQU0CKFDU/PUBUJPOͱ͍͏ ໊લ͕ͩɺ༷ʑͳιϑτ΢ΣΞɾϓϩ άϥϜݴޠؒʹ͓͚Δσʔλͷड͚౉ ͠ʹ࢖༻Ͱ͖ΔΑ͏ʹઃܭ͞Ε͍ͯΔ
  2. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ࣅ͍ͯΔ
  3. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ͚ͲɺΑ͘ݟΔͱҧ͏
  4. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ͜͜΋ҧ͏
  5. ΦϒδΣΫτʢهड़ྫʣ +40/ʢهड़ྫʣ { name: 'Yamada Tarou', sample: true, id: 100,

    product: “ABCD-001”, price: function() { return 200 * 0.05; } } { “name”: “Yamada Tarou”, “sample”: true, “id”: 100, “product”: “ABCD-001”, “price”: “function() { return 200 * 0.05; }” } ͜Εʹؔͯ͠͸ɺͦ΋ͦ΋ग़དྷͳ͍
  6. ม਺ͷॳظԽͬͯʁ function init(obj) { if (!obj) { obj = {};

    } if (obj.name) { return true; } return false; } init(null); // false ࣗ෼͕ॻ͍͍ͯΔίʔυ಺ͷॲཧͰ࢖༻͍ͯ͠Δ ม਺͕ɺԿ͔͠ΒͷݪҼͰηοτ͞Εͣ VOEFpOFE·ͨ͸OVMM͕ηοτ͞Εͯ͠·ͬͨ ৔߹ʹɺͦͷޙͷॲཧͰͦͷม਺ͷϓϩύςΟͳ ͲʹΞΫηεˠෆਖ਼ࢀরΤϥʔͱͳΔͷΛ๷͙ͨ ΊॳظԽΛߦ͍·͢
  7. 4FODIB&YU+4ɾ5PVDIͰଟ༷͞Ε͍ͯΔॳظԽํ๏ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false $PPM
  8. ͳͥ͜ΕͰॳظԽͰ͖Δͷ͔ʁ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false +BWB4DSJQUʹ͸ ҎԼͷΑ͏ͳൺֱԋࢉࢠ͕͋Γ·͢ɻ w "/%྆ํ͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ม਺໊ w 03ͲͪΒ͔͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊||ม਺໊ w /05GBMTFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ ͔ͩΒͳʹʁ
  9. ͳͥ͜ΕͰॳظԽͰ͖Δͷ͔ʁ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false +BWB4DSJQUʹ͸ ҎԼͷΑ͏ͳൺֱԋࢉࢠ͕͋Γ·͢ɻ w "/%྆ํ͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ม਺໊ w 03ͲͪΒ͔͕USVFͰ͋Ε͹USVF w ίʔυྫɿม਺໊||ม਺໊ w /05GBMTFͰ͋Ε͹USVF w ίʔυྫɿม਺໊ ͔ͩΒͳʹʁ 
  10. 03ԋࢉࢠ࢖ͬͯॳظԽͯ͠Δͷ͔ŋŋŋɺԿނŋŋŋʁ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false ઌ΄ͲྫΛڍ͛ͨ"/%ͱ03ʹ͍ͭͯ͸ɺগ͠ಛ ௃͕͋Γ·͢ɻ ͦΕ͸ŋŋŋ ม਺͕ධՁ͞ΕΔॱ൪Ͱ͢ʂ ͜ͷҧ͍Λ͏·͍͜ͱར༻ͯ͠ɺॳظԽʹར༻͠ ͍ͯΔͷͰ͢ɻ
  11. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false "/%ԋࢉࢠͷධՁͷॱ൪ ·ͣ"/%͸ɺඞͣͲͪΒ΋USVFͰͳ͚Ε͹͍͚· ͤΜɻҎԼͷࣜ͸ɺGBMTF͕ฦ͖ͬͯ·͢ɻ GBMTFUSVF
  12. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false ධՁͷॱং ্ه͕ධՁͷॱͰ͢ɻઌ಄͔ΒධՁ͞Ε݁Ռ͕ฦ ͞ΕΔྲྀΕʹͳΓ·͢ɻ͔͠͠"/%ͷ৔߹ɺઌ಄ ͕GBMTFͷ࣌఺Ͱ݁Ռ͕֬ఆ͠·͢ͷͰ ม਺໊ม਺໊ 1 2 GBMTFUSVF 1 2 ൪ͷΈධՁ͞ΕɺͦΕҎ߱͸ධՁ͞Εͳ͍
  13. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false 03ԋࢉࢠͷධՁͷॱ൪ ·ͣ03͸ɺͲͪΒ͔͕USVFͰ͋Ε͹USVFΛฦ͠· ͢ɻҎԼͷࣜ͸ɺUSVF͕ฦ͖ͬͯ·͢ɻ GBMTFccUSVF
  14. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false ධՁͷॱং ॱ൪ࣗମ͸"/%ͱಉ͡Ͱ͢ɻͨͩɺൺֱ࣌ͷ৚݅ ͕ͲͪΒ͔͕USVFͰ͋Ε͹ͱ͍͏৚݅ͳͷͰŋŋŋ ม਺໊ccม਺໊ 1 2 GBMTFccUSVF 1 ࠷ޙ·Ͱൺֱ͞ΕΔʂʂ ਺஋ͳͲΛ࢖ͬͯ΍Δͱ෼͔Γ΍͍͢ͷͰ͕͢ 2
  15. ม਺ͷධՁͷॱংʹ͍ͭͯ function init(obj) { var data = obj || {};

    if (data.name) { return true; } return false; } init(null); // false 03ԋࢉࢠͷධՁॱͷ֬ೝ cc $POTPMFͰҎԼͷࣜΛ࣮ߦ͢Δͱ ͕ฦ͖ͬͯ·͢ΑͶɻ Ͱ͸࣍͸Ͳ͏Ͱ͠ΐ͏ɻ VOEFpOFEcc\^ VOEFpOFE͸ɺධՁ͞Εͨࡍ͸GBMTFʹͳΓͭ໨ ʹࢦఆ͍ͯ͠ΔۭͷΦϒδΣΫτ͕ฦ͖ͬͯ·͢
  16. ԿނίϯετϥΫλΛ࢖͏͔ લճͷ6(Ͱ΋৮Ε·͕ͨ͠ɺΦϒδΣΫτ͸ࢀর ౉͠Ͱ͢ɻ ӈͷίʔυΛ࣮ߦͨ͠ࡍʹɺग़ྗ͞ΕΔͷ͸Ͳͷ Α͏ͳ஋ʹͳΔͰ͠ΐ͏͔ɻ console.log(ug1.x); // 200 console.log(ug2.x); //

    200 ΦϒδΣΫτ͸ɺࢀর౉͠ͳͷͰVH΋VH΋஋ ͕มߋ͞Εͯ͠·͍·͢ɻ function UgObject() { // initialize code .... this.x = 100; this.y = 200; } var ug = new UgObject(); var ug1 = ug; var ug2 = ug; ug1.x = 200; console.log(ug1.x); console.log(ug2.x);
  17. ԿނίϯετϥΫλΛ࢖͏͔ ͜ͷ໰୊Λճආ͢ΔҝʹOFXԋࢉࢠΛར༻͠·͢ɻOFXԋࢉࢠ͸ɺΦϒδ ΣΫτͷ࣮ଶΛෳ੡ͯ͘͠ΕΔͨΊɺ࡞੒ͨ͠ΦϒδΣΫτ͕ͦΕͧΕผͷ ࢀরʹͳΔͷͰ͢ɻ function UgObject() { // initialize code

    .... this.x = 100; this.y = 200; } var ug1 = new UgObject(); var ug2 = new UgObject(); ug1.x = 200; ug2.x = 0; console.log(ug1.x); //200 console.log(ug2.x); // 0
  18. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ function RectClass() { this.width = 200; this.height = 150;

    } var rect = new RectClass(); rect width: 200 height: 150 ͜Ε͸͋Δཁૉͷߏ଄Λද͢ΦϒδΣΫ τͰ͢ɻ
  19. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ +BWB4DSJQUͷؔ਺ΦϒδΣΫτ͸ඞͣQSPUPUZQFϓϩύςΟΛ͍࣋ͬͯ·͢ function BlockClass() {} BlockClass.prototype = rect; var block

    = new BlockClass(); rect width: 200 height: 150 ઌ΄ͲͷSFDUΦϒδΣ ΫτΛ#MDPL$MBTTͷ QSPUPUZQFʹઃఆ block prototype { block.width // ? block.height // ? block.x // ?
  20. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ Ͳ͏Ώ͏͜ͱ͔ͱ͍͏ͱɹ rect block prototype rect width: 200 height: 150

    block.width → block.prototype.width block.height → block.prototype.height block.x → block.prototype.x ͦͷΦϒδΣΫτࣗମʹɺࢀরͨ͠ύϥϝʔλ͕ઃఆ͞Ε͍ͯͳ͍৔߹ɺϓϩ τλΠϓΛࢀর͠ɺͦͷύϥϝʔλ͕ଘࡏ͢Δ͔ධՁ͞Ε·͢
  21. ෼͔Βͳ͍ͷͰਤʹ͠·͠ΐ͏ ઌ΄ͲͷίϯετϥΫλΛগ͠มߋͯ͠Έ·͠ΐ͏ function BlockClass() { this.width = 300; } BlockClass.prototype

    = rect; var block = new BlockClass(); block prototype { block.width // ? block.height // ? rect width: 300
  22. ͪΐͬͱدΓಓ ݁Ռ͸ɺҎԼͷΑ͏ʹͳΓ·͢ rect block prototype { block.hasOwnProperty(width); // true block.hasOwnProperty(height);

    // false width: 300 XJEUIϓϩύςΟ͸CMPDLΦϒδΣΫτࣗମʹଘࡏ͠·͕͢ɺXJEUIϓϩύςΟ ʹؔͯ͠͸ɺ͋͘·ͰQSPUPUZQFʹઃఆ͞Ε͍ͯΔ஋Ͱ͋ͬͯɺCMPDLΦϒδΣ Ϋτࣗ਎ʹ͸ଘࡏ͍ͯ͠ͳ͍ҝ͜ͷΑ͏ͳ݁ՌʹͳΓ·͢
  23. Ͱ͸ɺ໭Γ·͢ ઌ΄ͲͷCMPDLΦϒδΣΫτΛQSPUPUZQFʹઃఆ͠ɺ৭৘ใΛ࣋ͨͤͨ $PMPS#MPDL$MBTTΛ࡞੒͠·͢ function ColorBlockClass() { this.color = 0xFF0000; }

    ColorBlockClass.prototype = block; var colorblock = new ColorBlockClass(); colorblock prototype colorblock.width // ? colorblock.height // ? colorblock.color // ? block color: 0xFF0000