带有存在函数的setinterval与js中class的lambda表达式之间的区别

Question

我正在用 javascript 制作一个简单的游戏，你可以向敌人发射子弹。其实我没有任何问题但是:

我为我的子弹做了一个class，它有一个移动功能，我想为它设置一个间隔但是当我像这样在我的构造函数中设置一个间隔时：

    setInterval(this.Move, 0);

我看到这个错误：

未捕获类型错误：无法读取未定义的属性（读取 'style'）在移动 (game.js:152)

但是当我这样设置和 inverval 时：

    setInterval(() => {
        this.Move();
    }, 0);

它没有任何问题。

我只是想知道第一个有什么问题，我认为第二种方式，你正在做一个额外的东西（lambda 表达式）。

项目符号 Class：https://i.stack.imgur.com/q23Lk.png

Answer 1

这是个好问题。关键区别在于箭头功能的使用。箭头函数旨在绑定到它们定义的范围。

通过简单地将 this.Move 传递给 setInterval，setInterval 将调用函数而不绑定到 class/instance 范围。

下面的代码演示了几种可以将 this.Move 传递给 setInterval 的方法。有些有正确的范围，有些则没有，希望这对您的理解有所帮助。

let outside_function = undefined;

class X {

    constructor() {
        this.message = 'moving'

        // function is not bound to instance
        setInterval(this.move, 1000); // undefined

        // function is bound to instance
        setInterval(this.move.bind(this), 1000) // 'moving'

        // arrow function binds to 'this'
        setInterval(() => this.move(), 1000) // 'moving'

        // outside_function has no relationship with the class
        outside_function = this.move;
        setInterval(outside_function, 1000); // undefined
        setInterval(outside_function.bind(this), 1000) // 'moving'
    }

    move() {
        console.log(this.message)
    }
}

// also note that we can call the function like this
// again, no class instance here
X.prototype.move() // undefined

new X();

带有存在函数的setinterval与js中class的lambda表达式之间的区别

Difference between setinterval with an exist function and lambda expression for class in js

javascript

function

oop

setinterval

bullet