Question

我在从原型函数中的对象访问公共变量时遇到问题......从我所读过的内容来看，这应该可行，但也许有经验的人可以指出我做错了什么。

在此，我正在尝试编写自己的动画对象，其他管理员可以使用自删除。 callback是一个写成字符串的命令，x＆amp; y是起始位置，x2，＆amp; y2是结束位置，time是以秒为单位的时间，element是移动的元素。 doTime是在页面加载时执行的基准函数的结果，用于正确设置timeOut偏移量。

我可以用内部函数创建一个工作版本，但是由于这个对象被多次创建，我想要对函数进行原型设计以提高创建速度。

测试表明，没有this.vars在原型函数中读取。

function circDelta(progress) {
    if (progress < .5)
        return (1 - Math.sin(Math.acos(progress))) / 2
    else
        return (2 - (1 - Math.sin(Math.acos(2*(1-progress))))) / 2
}

function animation(element,x,y,x2,y2,time,callback){
    this.e = element;
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.t = time * 1000;
    this.c = callback;
    this.cT = 0;
    this.id = setTimeout(this.frame, doTime);
}

animation.prototype.frame = function(){
    this.cT+=doTime;
    if(this.cT>=this.t)
    {
        this.e.style.left = this.x2+'px';
        this.e.style.top = this.y2+'px';
        if(typeof this.c === 'function')
            this.c();
    }
    else
    {
        this.e.style.left = ((this.x2-this.x)*circDelta(this.t/this.cT))+this.x+'px';
        this.e.style.top = ((this.y2-this.y)*circDelta(this.t/this.cT))+this.y+'px';
        this.id = setTimeout(this.frame, doTime);
    }
};

我正在使用这样的功能：

this.curr_anim = new animation(hC.menus[0],0,0,0,30,1.5,hC.anim_finished);

任何帮助将不胜感激....提前谢谢。

Answer 1

您可能会在setInterval来电，

中遇到范围问题

因为setInterval将在指定的时间间隔后调用，并且具有window对象的范围，因此它将无法使用它来访问对象数据，

所以你需要使用局部变量传递对象的引用，你可以通过使用setInterval中的闭包来实现这个

var me = this;
this.id = setTimeout(function() {
    me.frame();
}, doTime);

所以你的最终代码看起来像这样

function circDelta(progress) {
    if (progress < .5)
        return (1 - Math.sin(Math.acos(progress))) / 2
    else
        return (2 - (1 - Math.sin(Math.acos(2*(1-progress))))) / 2
}

function animation(element,x,y,x2,y2,time,callback){
    this.e = element;
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.t = time * 1000;
    this.c = callback;
    this.cT = 0;

    var me = this;
    this.id = setTimeout(function() {
          me.frame();
    }, doTime);
}

animation.prototype.frame = function(){
    this.cT+=doTime;
    if(this.cT>=this.t)
    {
        this.e.style.left = this.x2+'px';
        this.e.style.top = this.y2+'px';
        if(typeof this.c === 'function')
            this.c();
    }
    else
    {
        this.e.style.left = ((this.x2-this.x)*circDelta(this.t/this.cT))+this.x+'px';
        this.e.style.top = ((this.y2-this.y)*circDelta(this.t/this.cT))+this.y+'px';

        var me = this;
        this.id = setTimeout(function() {
             me.frame();
        }, doTime);
    }
};

Javascript - Prototype不是读取构造函数变量

1 个答案: