about javascript this keyword

結論:

於某物件的方法(函式)之最外層(不在其他函式底下)執行環境(註1)中，this 指向該物件本身。
其餘其他情況， this 都指向 global 物件

註1:
每個函式被呼叫時js engine都會為各函式建立一個執行環境

範例


避免 this 關聯混淆的方法:

範例


特殊情況:

可使用call、apply於每次執行函式時傳入物件做為 this 參照
call 與 apply 的首個參數都是 this 參照的 obj，差別在於 call 第2個參數開始是一般參數傳入，apply則是第2個函數為陣列，內容為一般參數

使用函式的通用 bind 方法可綁定函式中 this 指向的物件， bind 方法接收 this 指向的物件，並傳回綁定 this 物件後的新函式


arrow function:

其中的 this 是延用其 lexical context 的 this
白話說就是該 arrow function 所在 scope 的 this 指向的物件
arrow function 中的 arrow function 關聯到的 this 都相同

特殊情況中指定 obj 的方式對 arrow function 沒有作用，不影響其 this 指向的物件

網路設定memo

中華小烏龜為base，分接出來的網路線接到其他分享器的情況下

1、從小烏龜分接出來的網路線總是接到分享器的wan插孔

2、分享器的設定方式:
a.此分享器想獨立pppoe撥接時，則其wan連線方式選pppoe，設定好帳密連線即可。其本身獨立管理自己的dhcp server

b.此分享器單純做為ap，單純從小烏龜的dhcp領取1個ip，不獨立撥接，則其wan連線方式選浮動ip，通常會自動取得小烏龜的dhcp配發ip，亦可自行設定想要的ip，在dhcp範圍內不衝突即可。其本身一樣有獨立的dhcp server

生活心得

1、合作、分享

如果什麼事都自己來，那成果必定限，因為人的壽命有限

以科技為例，如果個人的研究成果沒有分享出來，那每次都重頭開始，那人類頂多百歲的壽命就會是科技發展的上限

另一方面，如果個人的研究成果有分享出來，但其他人並沒有利用其研究成果，而是閉門造車，那結果也是一樣

所以，合作才是合理的做為，因為唯有合作才能有幾何的成長，才能累積成果，持續發展


2、持續、累積

積沙成塔，稱得上是成就的事，都一定需要相對應的付出，而阻礙自己的，通常是無法持續
明智的做法是把進度切割成較小的單位，然後每天做一點，只要能夠持之以恆，終會完成

3、80分的藝術

一件事情做到80分需要花費的時間可能是10，但做到90分可能要花費15，到100分可能要30，雖然時間比例不一定是這樣，不同種類的事情比例也會不同，但基本概念是對的
所以如果每件事都要做到100分，能做的事就少

這個世界很多事情都是符合2/8法則，生活中的事情也是，懂得對較不重要的8的部份只做到80分才能有更多的時間做更多的事

例如研究投資與打掃，研究投資是值得做到100分，打掃相對而言就不需要
但更彈性一點可以進一步延伸，雖然打掃不算是非常重要的事，但看不見的地方的灰塵和明顯的空間相對而言明顯的空間更需要被打掃乾淨

所以這是一門藝術

sass 重點

名詞解釋:
SASS (Syntactically Awesome Stylesheets)
SCSS (sassy CSS)



1、檔名開頭以"_"前綴，讓sass知道這是要被import的檔案，先不要compile，import後再一次compile

scss主檔(裡面會import其他scss檔案)本身命名不需要加"_"

在其中import其他scss時可省略被import的scss檔案的檔名的"_"

例如:

main.scss 是主檔

_variables.scss 是要被引入的scss檔


在主檔中，import語法如下

@import "variables" 

學習心得1

人的精神層面的各種能力是有限量的

耐心、思維力、理解力等等皆同

因為大腦連續接收處理相同性質的資訊是會疲乏的，應該均衡利用各部位

理解這個道理，妥善安排並充分利用各種能力，就能進步的很快

例如連續閱讀需要消化的程式相關知識，其實每天都有一個額度，超過了就事倍功半

比較以下兩種分配兩個工作天的方式:

a方式:
連續一整天閱讀react相關學習資源
連續一整天畫設計圖

b方式:
半天閱讀、半天畫圖
半天閱讀、半天畫圖

我認為b方式是比較高效率的

lifecycle methods 重點

1、lifecycle methods(下稱lm)是指在元件的生命周期中的特定時間點被呼叫的methods

你可以寫一個lm在一個元件第1次render之前呼叫

你可以寫一個lm在一個元件每次render之後呼叫，除了第1次render

你可以在元件的生命周期中的諸多不同時機點執行lm

2、lm有3種類別:
mounting、updating、unmounting

mounting monent:

元件在它首次render時掛載(mounts)，這也是mounting類別的lm執行的時機點

mounting lm有3種:
componentWillMount//在render之前執行(html元素載入之前)
render(載入html元素)
componentDidMount//在render之後執行(html元素載入之後)

當元件掛載時依序執行這3個lm
除了render(同時屬於updating類別)，另外兩個只在首次render時執行 


componentDidMount(下稱cdm)在render之後執行，如果你用ajax來取得初始資料，則cdm很適合用來執行這個工作，它也適合用來連結外部應用，例如web api或是js framework，也很適合用它來設定timers，使用setTimeout或setInterval

updating moment:

元件在首次render時沒有update，元件在每次render時update，除了第1次，每個元件每次update都會自動執行它的updating lm

updating lm有5種依執行先後順序排列如下:

componetWillRecieveProps(下稱cwrp)

shouldComponentUpdate(scu)

componentWillUpdate(cwu)

render

componentDidUpdate(cdu)


cwrp只有在元件有接收props的情況下會被呼叫，時機點如下例(引用codecademy範例)所示

// componentWillReceiveProps will get called here:
ReactDOM.render(
  <Example prop="myVal" />,
  document.getElementById('app')
);

// componentWillReceiveProps will NOT get called here:
ReactDOM.render(
  <Example />,
  document.getElementById('app')

);

cwrp自動接收一個nextProps參數，這個參數是一個物件，內容和即將傳入的props相同，一般用來事前比對，符合條件才render該prop或是做其他處理

scu在cwrp之後執行，自動接收兩個參數，nextProps, nextState，並回傳true或false，若回傳true則正常update，但若回傳的是false，則不會執行後續的3個updating lm，包含render 。通常用來比對nextProps和this.props以及nextState,thisState，依據結果回傳true or false，判斷是否update

範例: https://codepen.io/anon/pen/wqPxYX?editors=1011


cwu在scu之後執行，同樣自動接收兩個參數nextProps以及nextState，你不能在cwu中呼叫setState
cwu通常用來和react結構之外的物件互動，如果你需要在元件render之前做一些非react的設定，例如檢查window size或是和外部api互動，那麼cwu是一個適合的地方


render觸發ui重渲染，需注意的是即使未從parent component接收任何props，當parent re-render時其所有children component都會觸發render，而有時因為html架構需求，即使不需要從parent接收props，仍會有成為其child的需要，因此有時會需要使用scu判斷是否需要re-render以避免parent更新時child進行不必要的re-render


cdu在rendered html完成載入後執行，並自動接收prevProps, prevState兩個參數，它們參照到update之前的元件props和state，可以用來和"現況"的props還有state比較
cdu通常和cwu一樣是用來和react環境之外的物件互動，例如browser和api，差別只在它是render之後


unmounting moment:

一個元件的unmounting期間發生在元件從dom中移除時，這可以發生在dom rerender，但未包含該元件時，或是使用者導向到其他網頁，或是關閉瀏覽器時

unmounting moment只有一個lm:

componentWillUnmount(cwun)

cwun在元件從dom移除之前被呼叫，因此如果即將被移除的元件曾經設定需要被清理的方法(例如用setInterval設定的timer)，那麼該元件的cwun就是適合你清理這些方法的時機和地方

form 重點

1、controlled component(下稱cc) and uncontrolled component(下稱ucc):

cc與ucc是描述元素是否在react控制之下

例如一般情況下 input元素維護自己的狀態，使用者輸入什麼，它就顯示什麼，我們可以透過value屬性在任何時間點向它取值

但當一個input元素是透過react render出來的，並且有賦於它value屬性，而我們又希望能在使用者keyin內容時掌控state並在特定元素上顯示，所以我們會設定一個eventhandler去監控input內容，並呼叫setState方法改變狀態，setState方法會呼叫render方法更新畫面，這時因為我們有賦於value屬性值，在重新render時等同重置內容，此時這個input便不在是自我控制，而是受react控制，所以稱之為cc，cc與ucc是對於react而言

如果我們希望cc的input元素之value值能依使用者輸入而改變，只要將value屬性值與元件的state狀態連結即可，render方法的return內容會是像下列這樣

<input type="text" onChange={handleUserInput} value={this.state.userInput} />

handleUserInput方法中會呼叫setState方法更新元件的userInput狀態

jsx input元素的value值則和userInput狀態連結

如此一來，便將一個input元素轉換為受控的react input元素

或是換個方式說，在react環境下當我們想要設定有value屬性的元素(例如input)的value初始值，同時希望能用setState方法記錄狀態，又希望能正常反映使用者的輸入內容時(否則會在setState呼叫render方法時重置為初始值，無法正常反映輸入內容)，就必須這樣操作，像是把它納入react控制，所以稱之為cc，有value屬性的元素不多，有value屬性又有上述需求的元件就更少，所以大部份的元件都是ucc類型

不想轉換為cc但又想設定初始值的方式:
用以下列屬性替代value屬性設定始初值
defaultValue (for input, select元素)
defaultChecked (for checkbox, radio)


2、form的用途是讓使用者輸入資料，一般方式是使用form元素搭配submit元素，在點擊submit時一次性傳送整個form元素裡面的資料

但是在react有很不一樣的處理方式，它是在使用者輸入每一個字元時都傳輸資料(有變化的部份)，所以你可以不需要一個submit按鈕，甚至也不需要一個form元素，僅僅只需要一個input元素即可讓使用者提交資 料

當然你還是會使用form元素和submit按鍵，例如在表單輸入過程中即時比對輸入內容與server端資料並做相應的處理，然後使用者按下送出的動作做為一種確認方式，區分"進行中"與"已完成"，但在某些情況下，僅僅只需要簡單的input元素即可滿足需求