coffee-script之面向對象初體驗

在沒有使用coffee-script之前，我們寫類是這樣寫的，感覺會有點繁鎖：

//-------------抽象類形狀--------------
function Shape(edges) {
    this.edges = edges;
}

Shape.prototype.getArea = function() {
    return -1;
}

Shape.prototype.getEdges = function() {
    return this.edges;
}

//--------------三角形----------------
function Triangle(bottom, height) {
    Shape.call(this, 3);
    this.bottom = bottom;
    this.height = height;
}

//繼承
Triangle.prototype = new Shape();
//重寫方法
Triangle.prototype.getArea = function() {
    return 0.5 * this.bottom * this.height;
}

//---------------矩形----------------
function Rectangle(bottom, height) {
    Shape.call(this, 4);
    this.bottom = bottom;
    this.height = height;
}

//繼承
Rectangle.prototype = new Shape();
//重寫方法
Rectangle.prototype.getArea = function() {
    return this.bottom * this.height;
}

//-------------測試-------------------
var tri = new Triangle(4, 5);

document.write(tri.getEdges() + "<br>");
document.write(tri.getArea() + "<br>");

var rect = new Rectangle(20, 40);
document.write(rect.getEdges() + "<br>");
document.write(rect.getArea() + "<br>"); 

我們使用coffee-script寫的話只要象下面這樣寫就可以了，看起來優雅了很多，對於習慣了java等語言的面向對象方式開發的人來說，這種方式好理解多了，而且代碼少了一半。

class Shape 
  constructor: (@edges) ->
  getEdges : () -> @edges
  calcArea : () -> -1

class Triangle extends Shape
  constructor : (@bottom, @height) -> super 3
  calcArea : () -> @bottom*@height*0.5
  
class Rectangle extends Shape
  constructor : (@bottom, @height) -> super 4
  calcArea : () -> @bottom*@height
  
tri = new Triangle 4,5
rect = new Rectangle 4,5

console.log tri.getEdges()
console.log tri.calcArea()

console.log rect.getEdges()
console.log rect.calcArea()

實際后台生成的js文件內容是：

(function() {
    var Rectangle, Shape, Triangle, rect, tri;
    var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
        for (var key in parent) {
            if (__hasProp.call(parent, key))
                child[key] = parent[key];
        }
        function ctor() {
            this.constructor = child;
        }

        ctor.prototype = parent.prototype;
        child.prototype = new ctor;
        child.__super__ = parent.prototype;
        return child;
    };
    Shape = (function() {
        function Shape(edges) {
            this.edges = edges;
        }

        Shape.prototype.getEdges = function() {
            return this.edges;
        };
        Shape.prototype.calcArea = function() {
            return -1;
        };
        return Shape;
    })();
    Triangle = (function() {
        __extends(Triangle, Shape);
        function Triangle(bottom, height) {
            this.bottom = bottom;
            this.height = height;
            Triangle.__super__.constructor.call(this, 3);
        }

        Triangle.prototype.calcArea = function() {
            return this.bottom * this.height * 0.5;
        };
        return Triangle;
    })();
    Rectangle = (function() {
        __extends(Rectangle, Shape);
        function Rectangle(bottom, height) {
            this.bottom = bottom;
            this.height = height;
            Rectangle.__super__.constructor.call(this, 4);
        }

        Rectangle.prototype.calcArea = function() {
            return this.bottom * this.height;
        };
        return Rectangle;
    })();
    tri = new Triangle(4, 5);
    rect = new Rectangle(4, 5);
    console.log(tri.getEdges());
    console.log(tri.calcArea());
    console.log(rect.getEdges());
    console.log(rect.calcArea());
}).call(this);

 如果你想詳細了解coffee-script的內容，訪問以下鏈接：http://blog.csdn.net/zfc2201/article/details/8551013