iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
1
Modern Web

大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧系列 第 28

三本柱大混戰 # 28 我學了java,搞不懂js的繼承是怎樣怎麼辦?來看懶人包吧

第二天的時候有該一下還有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來加速方法的查找與物件的管理
然後再來解說一下解讀框架的順序與設計框架時應該注意甚麼
我就可以從這屆鐵人幫完賽啦~~~


上一篇
三本柱大混戰 # 27 JS不能多載?沒關係我們自己寫
下一篇
三本柱大混戰 # 29 一樣的事情做一次就好,重複的字也打一次就好,前端工程師們別打架
系列文
大家都在鐵人賽跑JS,這條鹹魚不只翻身還被煎得有點焦了,我們來點實務吧31

尚未有邦友留言

立即登入留言