使用 Javascript 对象模型

Question

我想要实现的是通过遵循更好的模式来创建一些对象。我正在使用 Raphael.js 库来创建图形形状。

问题出在以下行：

X: "" + this.canvas_X + this.paper["width"]/2 - self.width/4,

我得到的错误是：

Uncaught TypeError: Cannot read property 'width' of undefined

我发现错误在 this.paper["width"]/2。我刚开始使用 javascript，无法理解我在做什么错误

var Graphics={
        create_canvas: function(){
                $("#canvasdiv").append("<div id='id1' width='80px' height='50px'></div>");
        },
        canvas_X:get_LEFT_TOP("canvasdiv")[0],
        canvas_Y:get_LEFT_TOP("canvasdiv")[1],
        canvas_width:function(){return $("#canvasdiv").width()},
        canvas_height:function(){return $("#canvasdiv").height()},
        paper:{
            width:900,
            height:700,
            create: function(){
                return new Raphael(document.getElementById('canvasdiv'),this.width,this.height);
            }
        },
        vswitch:{
            color:"Black",
            text:"vSwitch",
            width:"150",
            height:"150",
            X: "" + this.canvas_X + this.paper["width"]/2 - self.width/4,
            Y: Graphics.canvas_Y,
            delay:"2000",
            create: function(paper){
                setTimeout(function(){
                        paper.rect(X,Y,width,height).attr({fill : "black"})
                        },delay);
            }
        },
}

这是拨打电话的方式：

 Graphics.create_canvas();
    p=Graphics.paper.create();
    Graphics.vswitch.create(p);

Answer 1

输入代码后，尝试：Graphics.paper 它应该不会抛出任何错误。但是 this.paper["width"] 没有纸作为属性。在这种情况下，this 指的是正在创建的对象，它将被称为 vswitch.

查看此代码：

var obj = { x: 0, y: this.x }

浏览器没有抱怨，但是 y 是未定义的。根据创建对象的规则，当它去创建 y 时，它并不知道 this 或 obj 上存在 x。

以下作品：

var obj = { x: 0 }
obj.y = obj.x

提示：您在错误的时间使用 this，我建议您探索 this 的含义。我给你概要。

打开控制台并输入：

this
// Window -> blah blah

var f = function() {
    console.log(this);
}
f()
// Window -> blah blah

var me = {}
me.f = f
me.f()
// Object { f: f() }

简而言之，this指的是函数的所有者。否则它指的是 Window，如果你正在创建一个对象 this 直到对象完成（即在括号的末尾）才被绑定。

使用 Javascript 对象模型

working with Javascript object model

javascript

raphael