Question

我有一个类：

function run(){
this.interval;
this.start = function(){
    this.interval = setInterval('this.draw()',1000);
};
this.draw = function(){
    //some code
};} var run = new run(); run.start();

但是我似乎无法在setInterval中引用/调用this.draw()，它说this.draw()不是函数，如果我删除引号它说无用的setInterval调用，我在做什么错？

Answer 1

根据函数的调用方式设置this的值。使用new将函数作为构造函数调用时，this将引用正在创建的对象。类似地，当您使用点标记run.start()调用函数时，this将引用run。但到setInterval运行的代码被称为this时，并不意味着您的想法。您可以做的是保存对this的引用，然后使用该引用，如下所示：

function Run(){
  var self = this;

  self.start = function(){
    self.interval = setInterval(function() { self.draw(); },1000);
  };

  self.draw = function(){
    //some code
  };
}

var run = new Run();

run.start();

另请注意，您已创建了一个名为run 的函数和一个名为run的变量 - 您需要为它们指定不同的名称。在我的代码中（记住JS区分大小写）我已经将函数名称更改为以大写“R”开头 - 这是要作为构造函数运行的函数的约定。

编辑：好的，看看其他答案我可以看到可能我过度复杂了它和只要draw()不需要访问{{1}只需说：就可以了。

this

但是我没有给你的构造函数和后来的变量同名的观点仍然存在，我将留下所有this.interval = setInterval(this.draw, 1000);内容，因为如果self这样做，这是一种技术需要访问draw()。如果要向this函数添加参数，则还需要这样做。

Answer 2

bind()方法！

请参阅 ES6 ：

中的以下示例

＆＃13;

<!DOCTYPE html>
<html>

<body>
    <canvas id="canvas" width="200" height="200" style="border: 1px solid black"></canvas>

    <script>
        class Circles {
            constructor(canvas, r = 5, color = 'red') {
                this.ctx = canvas.getContext('2d')
                this.width = canvas.width
                this.height = canvas.height

                this.r = r
                this.color = color

                setInterval(
                    this.draw.bind(this),
                    1000
                )
            }

            draw() {
                this.ctx.fillStyle = this.color

                this.ctx.beginPath()
                this.ctx.arc(
                    Math.random() * this.width,
                    Math.random() * this.height,
                    this.r,
                    0,
                    2 * Math.PI
                )

                this.ctx.fill()
            }
        }
    </script>

    <script>
        var canvas = document.querySelector('#canvas')
        var circles = new Circles(canvas)
    </script>
</body>

</html>

＆＃13;

Answer 3

function run(){
    this.interval;
    this.start = function(){
        this.interval = setInterval(this.draw,1000);
    };
    this.draw = function(){
        //some code
    }
;} 

var run = new run();
run.start();

如何setInterval来调用类中的函数

3 个答案: