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;

.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; }

 

运行结果如下：

参考网址：

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

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

Javascript对象的方法赋值的更多相关文章

  1. javascript对象属性的赋值解析

    代码如下: function Animal(){} function Dog (age){ this.name = 'fuck you' ; this.age = age } var dog = ne ...

  2. 3种创建、调用JavaScript对象的方法

    hey you guys,两个月没有写技术博客了.作为一名有理想.有抱负的程序员,两个月不写技术博客,真该打.业精于勤,荒于嬉.行成于思,毁于随.勤奋是必不可少的,今后养成一周至少一篇博客的习惯.好了 ...

  3. javascript对象与方法

    对象与方法 一.数组(Array) 1.使用new关键字创建数组 var box = new Array();                                     //创建了一个数 ...

  4. 创建javaScript对象的方法

    一.工厂模式 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=functi ...

  5. 知识点整理01- 引用对象被子方法赋值后不改变；CheckBox 取消选择不可用问题

    1. Class 实体是引用类型,但传入方法时是null的情况在子方法中不论怎么赋值当 FirstService.SetPerson(person,ref tempMsg); 执行后Person都是n ...

  6. [JavaScript]对象创建方法

    1.使用Object或对象字面量创建对象 (1)使用Object创建对象 var cat= new Object(); cat.name = "Tom"; cat.color= & ...

  7. javascript对象bind()方法兼容处理

    bind() 函数在 ECMA-262 第五版才被加入:它可能无法在所有浏览器上运行.你可以部份地在脚本开头加入以下代码,就能使它运作,让不支持的浏览器也能使用 bind() 功能 if (!Func ...

  8. 获取JavaScript对象的方法

    写定义一个对象,如var a = new Array(),debugger,然后执行F12控制台的开发者模式下,进入断点,断点里面 会显示所有的方法的. var a = new Array(); de ...

  9. Javascript对象属性与方法汇总

    Javascript对象属性与方法汇总 发布时间:2015-03-06 编辑:www.jquerycn.cn 详细介绍下,javascript对象属性与对象方法的相关知识,包括javascript字符 ...

随机推荐

  1. bootstrap学习笔记【转】

    bootstrap是由Twitter公司研发的一个基于HTML,CSS,JavaScript的开源框架,最重要的部分是它的响应式布局.(国内文档翻译官网:http://www.bootcss.com/ ...

  2. html5shiv.js and respond.min.js

    因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...

  3. web-inf目录和meta-inf目录

    /WEB-INF/web.xml Web应用程序配置文件,描述了 servlet 和其他的应用组件配置及命名规则. /WEB-INF/classes/ 包含了站点所有用的 class 文件,包括 se ...

  4. JAVA使用SAX解析XML文件

    在我的另一篇文章(http://www.cnblogs.com/anivia/p/5849712.html)中,通过一个例子介绍了使用DOM来解析XML文件,那么本篇文章通过相同的XML文件介绍如何使 ...

  5. ［ios］新手笔记－。－UIPickerView 关于伪造循环效果和延时滚动效果

    查找了网上资料,循环效果绝大部分都是增加行数来制造循环的错觉,延时滚动就是利用NSTimer间隔出发滚动事件来制造滚动效果. 代码: #import <UIKit/UIKit.h>#imp ...

  6. git超详细教程

    GitHub操作总结 : 总结看不明白就看下面的详细讲解. GitHub操作流程 : 第一次提交 : 方案一 : 本地创建项目根目录, 然后与远程GitHub关联, 之后的操作一样; -- 初始化Gi ...

  7. Default Parameter Values in Python

    Python’s handling of default parameter values is one of a few things that tends to trip up most new ...

  8. 安卓动态调试七种武器之离别钩 – Hooking（上）

    安卓动态调试七种武器之离别钩 – Hooking(上) 作者:蒸米@阿里聚安全 0x00 序 随着移动安全越来越火,各种调试工具也都层出不穷,但因为环境和需求的不同,并没有工具是万能的.另外工具是死的 ...

  9. 分分钟用上C#中的委托和事件

    每一个初学C#的程序猿,在刚刚碰到委托和事件的概念时,估计都是望而却步,茫然摸不到头脑的.百度一搜,关于概念介绍的文章大把大把的,当然也不乏深入浅出的好文章.可看完这些文章,大多数新手,估计也只是信心 ...

  10. 【腾讯Bugly干货分享】美团大众点评 Hybrid 化建设

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/rNGD6SotKoO8frmxIU8-xw 本期 T ...