Javascript对象的方法赋值

2022-09-02 16:28:01

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

自己想这个方法在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;

运行结果如下：

参考网址：

http://www.w3school.com.cn/js/js_objects.asp

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

码农公寓

相关文章