Javascript对象编程学习中，一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中，又犯了一个低级错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Javascript对象的方法</title>
</head>
<body>
<p>
通过自定义一个球的对象。在页面加载完成时，在canvas上绘制一个球。
</p>
<canvas id="mycanvas" width="400" height="300">
您的浏览器不支持HTML5 Canvas标签。
</canvas>
<script type="text/javascript">
var ctx;
function Ball(sx,sy,rad,styleString){
this.sx=sx;
this.sy=sy;
this.rad=rad;
this.fillStyle=styleString;
this.draw=drawball();
this.moveit=moveball();
}
function drawball(){
ctx.fillStyle=this.fillStyle;
ctx.beginPath();
ctx.arc(this.sx,this.sy,this.rad,0,Math.PI*2,true);
ctx.fill();
}
function moveball(){
//todo
}
var aball=new Ball(100,100,10,"rgb(234,20,200)");
function init(){
var canvas=document.getElementById("mycanvas");
ctx=canvas.getContext("2d");
aball.draw();
}
window.addEventListener("load",init,false);
</script>
</body>
</html>
自 己想这个方法在init()函数里面调用，ctx怎么会为”undefined”，不可能。监听事件不会出错呀。那问题说明这个函数在init()之前就 运行了。断点跟踪就证明自己猜想是对的，但是这是一个对象，我只是new一下，不可能回去调用它的方法呀！并且drawball()方法也是在 init()函数里面调用的。仔细一行一行的看代码，看到底哪里出了问题。最后发现下面两行很低级错误的代码，它们是：
this.draw=drawball(); this.moveit=moveball();
本意是在自定义对象里面，给对象一个方 法。我给了它方法，但是后面的()会马上调用这个方法。这是不应该的。this.draw指向一个函数的地址，但是在这里不需要马上调用它。所以在函数 init()还没有进行时，这个drawball()函数就开始运行了。所以此时的ctx确实为undefined。
正确的做法是把方法的名字赋值给对象的方法。代码改为下面就正常运行:
this.draw=drawball;
this.moveit=moveball;
运行结果如下：
扫一扫
2420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
