CoffeeScript 物件導向簡單用法

      最近開始寫Javascript中發覺要把JS寫成像是物件導向的方式有點難寫,還有JS是
Prototype Oriented  Language,後來想到之前去很多研討會想是JSDC, COSCUP之類的
研討會總是會聽到CoffeeScript,想說來試試看好不好用,沒想到一用下去發現,出乎
我意料的好用。

     接下來著我就開始寫簡單的物件導向的例子:(以下的範例我拿官方的例子來改寫)

class Animal
  constructor: (@name) ->
  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5


sam = new Snake "Sammy the Python"

sam.move()


       CoffeeScript的寫法有點像是Ruby and Python的結合,所以寫出來的程式碼非常的簡潔
,如果有學過Ruby跟Python的話,寫CoffeeScript非常快可以上手。廢話不多說,來講解
一下上面的程式碼。

      首先先建立一個類別Animal,然後這個類別有兩個方法一個是constructor另一個是move
,constructor這個方法只有在建立instance的時候會被呼叫,我們可以看到他帶的一個參數
@name這就是Animal的內部的變數,move這個是Animal的方法,裡面只有做了一件事就是跳出視窗說明這個動物移動了幾公尺。


     接著建立一個新的類別Snake並且他繼承了Animal,所以他也會有Animal所有的功能,接著我們override他的move的方法裡面加了說明他是怎麼動作的說明“Slithering”,如果你要去呼叫父類別Animal的move的方法,就用super這個關鍵字。

   
    但我在寫的過程中也發現了一件事,如果你在子類別也建立了constructor這個方法,會導致
父類別的constructor被取代掉,這一開始也讓我很煩惱,後來我想到一個方法,雖然不一定正確,但也解決了這個問題。

我先寫constructor會被取代的例子:


class Animal
  constructor: (@name) ->
   @foot = 4

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  constructor: (@name) ->

  move: ->
    alert "Using #{@foot} to Slithering..."
    super 5


sam = new Snake "Sammy the Python"

sam.move()


    像這個例子我在Animal中的constructor中建立一個類別的變數@foot,如果我在Snake中重新
定義了constructor那麼他就會取代掉父類別的constructor,那麼@foot就沒有被定義到,所以在
Snake的move中如果去使用@foot的話就會出現undefined。

接下來是我想到解決的方法 :


class Animal
  constructor: (@name) ->
   @foot = 4
   @init()

  init: ->    
  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal

 move: ->
    alert "Using #{@foot} to Slithering..."
    super 5

sam = new Snake "Sammy the Python"

sam.move()


   很簡單的我在父類別的constructor中加入呼叫init的方法,那麼只要子類別要建立自己的
constructor的話,就將資料寫在init中就可以避免掉constructor被蓋掉的問題了。




張貼留言

這個網誌中的熱門文章

解釋scope.$apply用來做什麼? -- AngularJS

Unions 在C語言的簡單介紹

JavaScript的Timer用法