W16_JavaScript 核心與物件導向_學習筆記整理

本文為學習 JavaScript 核心與物件導向的整個學習過程

W16 學習計畫

本週重點

1. 物件導向

2. 瀏覽器在運行 JavaScript 時的 Event Loop 機制

3. JavaScript 基礎：scope、hoisting、closure、prototype、this

4. 看影片

   a. JS201

   b. 所以說event loop到底是什麼玩意兒？| Philip Roberts | JSConf EU 34 mins

5. 看七篇文章

6. W16 直播檢討：01:08:00

作業概覽：

透過解釋程式碼運作方式，判斷是否有理解下面各個主題

hw1: Event Loop

hw2: Event Loop + Scope

hw3: Hoisting

hw4: What is this?

hw5: 本週學習心得

練習題：待補

筆記內容：

一、scope -> hoisting -> closure -> prototype -> this -> event loop

1. JavaScript 變數型態判斷及賦值

2. JavaScript 變數生存範圍：var, let, const and scope

3. 從 Hoisting 理解 JavaScript 底層運作機制

4. 從 Closure 更深入理解 JavaScript 底層運作機制

5. The prototype chain in JavaScript

6. What on earth is THIS?

7. How does Event Loop work?

二、W16 直播檢討

三、學習計畫：

本週規劃了開頭的學習計畫，但真正做才發現，下面的學習曲線是比較好的：

JS201 代表 Lidemy 裡的教學影片：

1. JS201: 先從變數開始談起

2. 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？

3. JS201: 變數的生存範圍：Scope

4. Hoisting

   a. JS201: 從 Hoisting 理解底層運作機制

   b. 我知道你懂 hoisting，可是你了解到多深？

5. closure

   a. 所有的函式都是閉包：談 JS 中的作用域與 Closure

   b. JS201: 從 Closure 更進一步理解 JS 運作

6. prototype

   這裡開始採循環模式，文章 -> 影片 -> 文章 -> 影片這樣。大致上把影片掃過一遍，接著先努力讀懂了下面兩篇文章，

   Javascript继承机制的设计思想

   从设计初衷解释 JavaScript 原型链

   然後再把正文 該來理解 JavaScript 的原型鍊了 看了幾遍。

   接著做完影片的筆記，再試著看一遍文章。

   但我不覺得有完全通透 prototype ，可能之後實作或遇到更多以後會更理解。

7. this

   a. JS201: 先學完物件導向，學 this 才有意義

   b. 淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂

8. Event Loop

   a. 所以說event loop到底是什麼玩意兒？| Philip Roberts | JSConf EU

   b. JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！

9. 覺得 JavaScript function 很有趣的我是不是很奇怪

四、心得與心態調整：

剛好遇上感恩節，跟朋友聚會，很久沒有跟生人聊天了，有點太興奮，體悟到情緒管理的課題，也想出下次能夠更加改善進步的地方，nice!