Javascript Douglas Crockfords-如何将基方法调用到继承类中

我正在尝试使用Crockford的继承模式构造基类形状。使用这个基本形状，我试图画一个圆，一个矩形和一个三角形。我有点困了。我不知道如何调用/修改基本方法

function points(x,y) {
     x = this.x;
     y = this.y;
}

function Shape() {
    return {
            this.points: [ ],

    init : function(){
    if(typeof this.context === ‘undefined’){
            var canvas = document.getElementById(‘canvas’);
                var context = canvas.getContext(‘2d’);
            }
     },
     draw: function(){ 
             var context = this.context;
             context.beginPath();
             context.moveTo(this.points[0].x, this.points[0].y);
             for(var i=1; i< this.parameter.length; i++){
                context.lineTo(this.parameter[i].x, this.parameter[i].y);
             }
             context.closePath();
             context.stroke();
     }
};
}

function Circle(x, y, r){
var points = Shape();
    point.x = x;
    points.y = y;
    points.r = r; 
    var baseMethod = that.draw;
       that.draw = function(){
       /*how to modify the base method to draw circle*/
    };

}
function Rectangle(a, b, c, d){
var points = Shape();
    point.a = a;
    points.b = b;
    points.c = c;
    points.d = d 
    var baseMethod = that.draw;
       that.draw = function(){
       /*how to call base method to draw rectangle*/
    };

}

功能点（x，y）{
x=这个.x；
y=这个。y；
}
函数形状（）{
返回{
此点：[]，
init:function（）{
if（typeof this.context===“未定义”）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
}
},
draw:function（）{
var context=this.context；
context.beginPath（）；
context.moveTo（this.points[0].x，this.points[0].y）；
对于（var i=1；i

您的代码有很多问题。首先，您需要确保在继续使用更复杂的形状（如圆形和矩形）之前，已经使用了基本的绘图代码。从画线开始。我已经整理了你的代码，让它可以画直线：

//returns basic point object which has
//two properties x & y
function point(x, y) {
    return {
        x: x,
        y: y
    }
}


//function that returns a shape object with all the 
//mechanisms for drawing lines between points
function Shape(canvasID) {
    return {
        points: [], //not 'this.points' (which would most likely be window.points)
        addPoint: function(x, y) {//adding a point to a shape is an operation of shape
            this.points.push(point(x, y))
        },
        init: function() {
            if (typeof this.context === 'undefined') {
                var canvas = document.getElementById(canvasID);
                var ctx = canvas.getContext('2d');
                this.context = ctx; //add the context reference to the current shape object
            }
        },
        draw: function() {
            this.init();
            var context = this.context;
            context.beginPath();
            var that = this; //create a local reference to the current 'this' object.
            //insures us against any possible 'this' scope problems
            context.moveTo(that.points[0].x, that.points[0].y);
            for (var i = 1; i < that.points.length; i++) {
                context.lineTo(that.points[i].x, this.points[i].y);
            }
            context.closePath();
            context.stroke();
        }
    };
}

//Simple Line object - good for testing your
//basic drawing functionality
function Line(canvasID, x, y, x2, y2) {
    var shape = Shape(canvasID);
    shape.addPoint(x, y);
    shape.addPoint(x2, y2);
    shape.draw();

}

//Execute your drawing functionality after the 
//window has loaded to make sure all your objects exist before 
//trying to use them
window.onload = function() {
    Line('canvas', 100, 100, 200, 200);
}

//返回具有
//x&y的两个性质
功能点（x，y）{
返回{
x:x，
y:y
}
}
//函数，该函数返回具有所有
//点之间绘制线的机制
函数形状（canvasID）{
返回{
点：[]，//不是“this.points”（最有可能是window.points）
addPoint:function（x，y）{//向形状添加点是形状的操作
这个点推动（点（x，y））
},
init:function（）{
if（typeof this.context===“未定义”）{
var canvas=document.getElementById（canvasID）；
var ctx=canvas.getContext（'2d'）；
this.context=ctx；//将上下文引用添加到当前形状对象
}
},
绘图：函数（）{
this.init（）；
var context=this.context；
context.beginPath（）；
var that=this；//创建对当前“this”对象的本地引用。
//确保我们不受任何可能的“本”范围问题的影响
context.moveTo（that.points[0].x，that.points[0].y）；
对于（var i=1；i

我并不认为这是实现您正在做的事情的最佳方法，但DC的基本方法是创建对象，而不必使用“new”关键字。因此，他使用JavaScript对象表示法从函数调用返回一个对象

现在您可以绘制一条线了，下一步是依次绘制一系列连接线（路径）。然后，创建矩形。您需要一些代码来告诉您的代码从何处开始绘制矩形（开始x/y坐标）然后，您可以拥有表示矩形高度和宽度的参数，这些参数将用于计算矩形角点的坐标，并传递给要绘制的形状对象，与绘制一系列连接线的方式相同。不过，需要注意的是，检查上下文对象上是否存在某种类型的“createRectangle”函数（对于圆也是如此）。我并不了解自己，因为我没有在HTML5/canvas中做过这种工作——尽管我在其他环境中也做过

编辑

忘了提到您需要确保html的doctype声明是html5。许多IDE会自动将您的html声明为html4。Html5只需要：

另外，请确保在html正文中声明一个画布元素，如下所示：

<canvas id="canvas" width="300" height="150">   
   </canvas>

在点中，

x=this.x

应该是

this.x=x

（同样适用于

y

）。在

形状中，this.points=[]`应该是
点：[]
var context=
应该是
this.context=
。在你的代码中，它的一系列声明性语句/短语并不是一个问题：）聪明的引号让我在里面死了一点。从基础开始。字符串、循环、数组、条件、函数。学习使用控制台进行调试。您发布的代码乱七八糟。编辑代码时，它看起来像是存在复制和粘贴错误，我忘记了将canvasID参数传递给Shape函数。