第二天的時候有該一下還有28天
第28天的時候也該一下還有兩天(°ཀ°)

每次聽技術主管聊程式設計總是可以收獲很多
譬如偷偷寫個日誌，把使用者的神操作紀錄下來
方便debug，或著拿來自保
有時候需要把功能拆的細一點，方便程式reuse
有時候不要太在意一些片段重複使用，維持他的完整性
將來維修的時候不用追得很辛苦
其他包括資料庫設計、設計模式的取捨 、系統架構思考
異常狀態處理等等等

他也說工程師不能依賴try/catch
我們要盡量把所有的異常想到，並執行他對應的處理
而真正特別的異常紀錄才用log下來，來判斷是使用者神操作
還是自己有邏輯漏洞

這個技術主管的料真的很多呀

我同學亂嗆，不要去隨便找幾個熱門連結就當好文介紹
好，為了證明我沒有，分享幾篇過往也不錯的鐵人文

2017 iT 邦幫忙鐵人賽
Half-Stack Developer 養成計畫 系列

其中最厲害的一篇應該是day 21

你走你的陽關道，我走我的獨木橋：前後端分離
非常清楚的講解甚麼是MVC，與現在流行的前後端完全分離
我去我們還不好好用html，常常在html上寫php或乾脆直接寫jsp
而這篇非常清楚地把前端MVC架構，與後端MVC架構寫得清清楚楚
(是的，後端沒有V)

2017 iT 邦幫忙鐵人賽
實作小範例入門 Vue & Vuex 2.0 系列
不像我，這邊亂講一點，那邊亂講一點
而是非常認真盡責地把VUE給好好說完了
還尻除了一個小實例

新手御三家小火龍、傑尼龜、妙蛙種子
前端御三家Angular、React、Vue
(連顏色都一樣，原本想說航海王，但黃猿是黃的)

至於為甚麼小農會比較VUE?
不是因為大家都沒選妙蛙種子

這兩篇有稍微比較一下
前端框架學習總結之Angular、React與Vue的比較詳解
與
JavaScript 框架大比拼：Vue、React、AngularJS 與 Angular2
反正簡單來說
Angular:學習曲線太陡峭，還有摸到一點後端
react:view的處理非常強大，但資料的處理就需要考慮一下
vue:我很懶，ajax抓進來，資料處理一下我jquery都不用寫了，還有cli懶人包

是的，小農我就是偏袒vue

但為了不要被說工程師怎麼可以這樣挑東西學
其實沒有，我是真的學過Angular2，但實在麻煩

希望去玩玩的話我是參考這篇實作的

2017 iT 邦幫忙鐵人賽
Angular 2 之 30 天邁向神乎其技之路 系列

其他廢話就不說，各位看官們可以自己去體會一下

文也介紹完了、閒聊也完了，那我們開始今天的JS物件導向與原型繼承屬性

關於js繼承那件事

先來簡單說一下何謂繼承
繼承表示一個物件可以取用另一個物件的屬性與方法
在一般情況下，只要父類別沒有特別封起來，子類別都可以取用
如同人類的繼承，你爸可以給你房子、車子都隨你用
但特別封起來的不行，例如你媽

物件導向的繼承目前有兩種

1. 古典繼承

   • 語言:java、C#
   • 說明:古典繼承解決了相當多的問題，可以完成介面、複寫、多型...等等非常多功能，設計模式也需要對於繼承一定程度的熟練

2. 原型繼承

   • 說明:類似於後端設計模式中的原型模式（Prototype Pattern），實現發法為克隆一個既有類，當我們調用一個方法，操作中的類找不到，變會往上查找，這種繼承連原本的優缺點也一起帶過來了
     • 優點： 1、性能提高。 2、逃避構造函數的約束。
     • 缺點： 配備克隆方法需要對類的功能進行全盤考慮，這對於全新的類不是很難，但對於已有的類不一定很容易，特別當一個類引用不支持串行化的間接對象，或者引用含有循環結構的時候

非常坦白的說，對於會java與C#的我來說，js的繼承我相當不能理解
因為js的class只是個語法糖，並不是一個特別的類別

但都來參加鐵人賽了，就是要學點東西，是吧?

今天終於給他用懂了

搞了半天，用個粗淺 ，但可能容易出錯的方式理解
只要我們宣個了物件，他即為一個類
當我們obj2.__ proto __ =obj1時
他就會拷貝obj2沒有，而obj1有的東西進obj2

底下為範例

var obj1={
    param1:'obj1_param1',
    param2:'obj1_param2',
    printParam:function(){
        console.log(this.param1+"**"+this.param2)
    }
}

var obj2={
    param1:'obj2_param1',
    param2:'obj2_param2',   
}
obj2.__proto__ =obj1;

如果這時候執行  
obj2.printparam();
會發生甚麼事呢?  

//是的，當我們執行完obj2.__ proto __ =obj1;
//obj2在window中其實長這樣
var obj2={
    param1:'obj2_param1',
    param2:'obj2_param2',   
     printParam:function(){
        console.log(this.param1+"**"+this.param2)
    }
}

那麼如何會說obj2沒有，而obj1有的東西進obj2是拷貝呢?

我們再來一個更殘缺的obj3吧

var obj3={
    param1:'obj3_param1',
}
obj3.__proto__ =obj1;

如果這時候執行  
obj2.printparam();
會發生甚麼事呢?  

//因為obj3並沒有param2，因此js自動把obj1的拷貝了過去
//所以在運行環境中其實obj3是長這樣的  
var obj3={
    param1:'obj3_param1',
    param2:'obj1_param2',
    printParam:function(){
        console.log(this.param1+"**"+this.param2)
    }
}

###　關於js的this這件事

一般來說this是指向這個物件的屬性
而js的this卻在少部分時是指向js自動生成的全域物件(window)
看了很多的教程或許都會覺得莫名其妙

我們可以不理解，但一定要學會避免

那麼我們該如何避免這個問題呢

var obj = {
    
    param1:'obj1_param1',
    param2:'obj1_param2',
    printParam:function(){
        var vm = this;
        console.log(vm.param1+"**"+vm.param2)
    }
}

在確定且安全的地方，把this存起來
我們確定這個this是指向obj這個物件
然後我們直接把這個指向存入vm這個變數之中
就可以避免this發生我們意料之外的錯誤

其中比較需要注意的是ES6之中的=>箭頭函數並沒有this指向物件的概念

來到倒數兩天啦
明天簡單介紹一下如何利用IDE來加速方法的查找與物件的管理
然後再來解說一下解讀框架的順序與設計框架時應該注意甚麼
我就可以從這屆鐵人幫完賽啦~~~