{"action":"created","issue":{"url":"https://api.github.com/repos/Lidemy/forum/issues/6","repository_url":"https://api.github.com/repos/Lidemy/forum","labels_url":"https://api.github.com/repos/Lidemy/forum/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/Lidemy/forum/issues/6/comments","events_url":"https://api.github.com/repos/Lidemy/forum/issues/6/events","html_url":"https://github.com/Lidemy/forum/issues/6","id":366301767,"node_id":"MDU6SXNzdWUzNjYzMDE3Njc=","number":6,"title":"[MTR02] 作業 week4-4 終於（應該）看懂了吧？","user":{"login":"wowdyaln","id":17491125,"node_id":"MDQ6VXNlcjE3NDkxMTI1","avatar_url":"https://avatars0.githubusercontent.com/u/17491125?v=4","gravatar_id":"","url":"https://api.github.com/users/wowdyaln","html_url":"https://github.com/wowdyaln","followers_url":"https://api.github.com/users/wowdyaln/followers","following_url":"https://api.github.com/users/wowdyaln/following{/other_user}","gists_url":"https://api.github.com/users/wowdyaln/gists{/gist_id}","starred_url":"https://api.github.com/users/wowdyaln/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wowdyaln/subscriptions","organizations_url":"https://api.github.com/users/wowdyaln/orgs","repos_url":"https://api.github.com/users/wowdyaln/repos","events_url":"https://api.github.com/users/wowdyaln/events{/privacy}","received_events_url":"https://api.github.com/users/wowdyaln/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-10-03T11:53:05Z","updated_at":"2018-10-04T01:44:41Z","closed_at":null,"author_association":"NONE","body":"### slack 帳號\r\nroro\r\n\r\n### 作業名稱\r\nweek4 hw4：化繁為簡\r\n\r\n### 分隔\r\n\r\n在實作 hide() / show() 的時候，自己是用插入上游 prototype 的方式達成，由於網頁上看得到到的元素幾乎都是參照 HTMLElement 這個 function ，在 HTMLElement 的prototype 加入 hide/show 方法，下游就全部都可以用的到了。\r\n\r\n後來看到作業中的寫法 **return 一個物件，一開始看覺得蠻難理解的**。疑惑先放在一旁，心中有掛念住這個問題。\r\n\r\n```query.js\r\nfunction query(selector){\r\n  let dom = document.querySelector(selector)\r\n\r\n  return {\r\n    show: function(){\r\n      dom.style.visibility = \"visible\"\r\n    },\r\n    hide: function(){\r\n      dom.style.visibility = \"hidden\"\r\n    }\r\n  }\r\n}\r\n\r\nlet ele = query('.item')\r\nele.show()\r\nele.hide()\r\n```\r\n\r\n\r\n今天再把程式碼拿到 console 去試驗，東改西改拼湊一下。過程中突然領悟了（應該有領悟啦 XD ）！整理一下自己的心得。若有錯誤之處，歡迎大家指正。\r\n\r\n### 錯誤想法\r\n不懂的原因在於一開始陷入一個盲點 ( 以上方 code 爲範例)\r\n之前一直認爲 : `dom` 賦值給 `ele` ，然後 dom 身上順便加了兩個方法（show/hide）。\r\n只是...越看越奇怪，`dom` 又沒有被 return \r\n原來不是這樣一回事！\r\n以上只是爲了合理化的自行腦補 XD\r\n\r\n\r\n\r\n### 應該是這樣吧\r\n一個物件 （注意那個 return ！） 賦值給 `ele` ，而這個物件帶有兩個方法（show/hide）。\r\n\r\n所以 `ele` 成爲一個帶有兩個方法（show/hide）的物件，因此可以這樣用 `ele.show()  /  ele.hide()`\r\n接著，那個變數 `dom` 呢？ `dom` 原本只能活在定義 query 的作用域中。\r\n\r\n由於沒有 return `dom`；照理是沒法在外面找到 `dom` ；\r\n可是 `dom` 有被傳到 show/hide 函式定義作用域中，而 show/hide 被打包成一個物件，一起賦值到`ele`中。\r\n\r\nshow 跟 hide 分別產生了傳說中的 **『closure 閉包』** 讓 `dom` 可以活在  show / hide 裡面。而在 `ele` 是找不到 `dom` 屬性的，只能靠著 call show/hide 順便找到 `dom`。\r\n\r\n\r\n若是沒有存到變數`ele`裡面直接使用：\r\n`query('.item').show()`\r\n這樣 `dom` 一被使用完畢，就會消失無蹤了。\r\n\r\n以上小心得整理有點混亂，若有錯誤之處，歡迎大家指正討論。\r\n"},"comment":{"url":"https://api.github.com/repos/Lidemy/forum/issues/comments/426858214","html_url":"https://github.com/Lidemy/forum/issues/6#issuecomment-426858214","issue_url":"https://api.github.com/repos/Lidemy/forum/issues/6","id":426858214,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjg1ODIxNA==","user":{"login":"wowdyaln","id":17491125,"node_id":"MDQ6VXNlcjE3NDkxMTI1","avatar_url":"https://avatars0.githubusercontent.com/u/17491125?v=4","gravatar_id":"","url":"https://api.github.com/users/wowdyaln","html_url":"https://github.com/wowdyaln","followers_url":"https://api.github.com/users/wowdyaln/followers","following_url":"https://api.github.com/users/wowdyaln/following{/other_user}","gists_url":"https://api.github.com/users/wowdyaln/gists{/gist_id}","starred_url":"https://api.github.com/users/wowdyaln/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wowdyaln/subscriptions","organizations_url":"https://api.github.com/users/wowdyaln/orgs","repos_url":"https://api.github.com/users/wowdyaln/repos","events_url":"https://api.github.com/users/wowdyaln/events{/privacy}","received_events_url":"https://api.github.com/users/wowdyaln/received_events","type":"User","site_admin":false},"created_at":"2018-10-04T01:44:41Z","updated_at":"2018-10-04T01:44:41Z","author_association":"NONE","body":"經過這個實際應用更能記住 closure 是怎樣的概念了"}}
{"actor":{"display_login":"wowdyaln"}}