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);