首先将所有对象的公共部分定义成一个构造器，即Shape。然后基于这个构造器分别构建Triangle、Rectangle和Square构造器，它们将全部继承于Shape。其中Square实际上可以被当作一个长宽相等的Rectangle，因此当构建Square时可以直接重用Rectangle。
Shape体系中共有属性主要包括：
一个能根据给定的point绘制出图形的draw()方法；
一个getParimeter()方法；
一个用于存储point对象的数组属性；
其他必须的属性与方法；
关于绘制部分用到<canvas>标签。
<canvas width="600" height="800" id="canvas"></canvas>需要两个辅助构造器，Point和Line。其中，Point用于定义图形，而Line则用于计算给定点之间的距离。
首先是定义辅助构造器Point
function Point (x, y) {
this.x = x;
this.y = y;
}构造器Line，根据勾股定理计算出给定两点之间的直线距离
function Line (p1, p2) {
this.p1 = p1;
this.p2 = p2;
this.length = Math.sqrt(
Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)
);
}Shape构造器的定义
function Shape () {
this.points = [];
this.lines = [];
this.init();
}定义Shape.prototype的方法。用对象标识法来定义所有的方法
Shape.prototype = {
constructor: Shape,//重置constructor属性
init: function () {
if (this.context === undefined) {
var canvas = document.getElementById('canvas');
Shape.prototype.context = canvas.getContext('2d');
}
},
//遍历所有点，画出一个形状
draw: function () {
var ctx = this.context;
ctx.strokeStyle = this.getColor();
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i < this.points.length; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.closePath();
ctx.stroke();
},
//随机生成颜色
getColor: function () {
var rgb = [];
for (var i = 0; i < 3; i++) {
rgb[i] = Math.round(255 * Math.random());
}
return 'rgb(' + rgb.join() + ')';
},
//遍历所有点，生成线条实例，并添加进this.lines
getLines: function () {
if (this.lines.length) {
return this.lines;
}
var lines = [];
for (var i = 0; i < this.points.length; i++) {
lines[i] = new Line(this.points[i], this.points[i + 1] || this.points[0]);
}
this.lines = lines;
return lines;
},
//由子对象实现
getArea: function () {},
//计算所有线条的长度
getPerimeter: function () {
var perim = 0, lines = this.getLines();
for (var i = 0; i < lines.length; i++) {
perim += lines[i].length;
}
return perim;
}
};接着是自对象构造器，从Triangle开始：
function Triangle(a, b, c) {
this.points = [a, b, c];
this.getArea = function () {
var p = this.getPerimeter();
var s = p / 2;
return Math.sqrt(
s * (s - this.lines[0].length) * (s - this.lines[1].length)
* (s - this.lines[2].length)
);
};
}Rectangle构造器，它接收的参数是一个point对象（即左上角位置）和两边的长度。
function Rectangle (p, side_a, side_b) {
this.points = [
p,
new Point(p.x + side_a, p.y),
new Point(p.x + side_a, p.y + side_b),
new Point(p.x, p.y + side_b)
];
this.getArea = function () {
return side_a * side_b;
};
}最后一个子对象构造器是Square。由于Square是Rectangle的一种特例，所以对于它的实现，可以重用Rectangle，而其中最简单的莫过于构造器借用法了；
function Square (p, side) {
Rectangle.call(this, p, side, side);
}
所有构造器的实现都已经完成。开始处理它们之间的继承关系，几乎所有的仿传统模式（即工作方式是基于构造器而非对象的模式）都符合这里的需求。下面试着将其修改为原型链模式，并提供一个简化版本。该模式中，需要新建一个父对象实体，然后直接将其设置为自对象的原型。这样一来，就没有必要为每个子对象的原型创建新的实体了-----因为它们可以通过原型实现完全共享。
(function () {
var s = new Shape();
Triangle.prototype = s;
Rectangle.prototype = s;
Square.prototype = s;
})();
测试：
//定义Triangle的三个point
var p1 = new Point(100, 100);
var p2 = new Point(300, 100);
var p3 = new Point(200, 0);
//将这三个point传递给Triangle构造器，以创建一个Triangle实例
var t = new Triangle(p1, p2, p3);
t.draw();
console.log(t.getPerimeter()); //输出482.842712474619
console.log(t.getArea()); //输出10000.000000000002
//Rectangle的实例化
var r = new Rectangle(new Point(200, 200), 50, 100);
r.draw();
console.log(r.getArea()); //输出5000
console.log(r.getPerimeter()); //输出300
//Square的实例化
var s = new Square(new Point(130, 130), 50);
s.draw();
console.log(s.getArea()); //输出2500
console.log(s.getPerimeter()); //输出200
//重用triangle的point
new Square(p1, 200).draw();最终测试结果下图所示：