coffeescript之面向对象初体验

在没有使用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

原文地址:https://www.cnblogs.com/zfc2201/p/2881511.html