coffee-script之面向对象初体验

最新推荐文章于 2022-04-11 22:19:25 发布

zfc2201

最新推荐文章于 2022-04-11 22:19:25 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

分类专栏： Coffeescript 文章标签： coffee-script之面向对象初体

本文链接：https://blog.youkuaiyun.com/zfc2201/article/details/8552776

Coffeescript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了如何使用CoffeeScript简化面向对象编程的过程，通过对比传统JavaScript语法与CoffeeScript的简洁表达，展示CoffeeScript如何让代码更加优雅和易于阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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