这些JavaScript类定义有缺点吗?

Question

我一直在定义这样的方法:

Class Man {
constructor(name) {
this.name = name;
this.draw = (context) => { drawMan(context, this.name) };
}
}

我已经意识到还有另一种定义方法的方法，它看起来像这样:

Class Man {
constructor(name) {
this.name = name;
}
draw(context) { drawMan(context, this.name) };
}

我的方法有明显的缺点吗?

Answer 1

this。Draw = (context) =>{drawMan(上下文,this.name)};

这一行将在类的实例中创建带有箭头函数的属性。这意味着:

1. 此函数将按实例创建(1000个实例= 1000个函数)。这意味着更多的时间用于实例化，更多的内存使用，更多的垃圾收集器暂停。使用这种方法的好处是，您将不受上下文的困扰，并且可以安全地将此函数作为参数传递给消费者。

画(上下文){drawMan(上下文,this.name)};

2. 这一行在类的原型中创建函数。这意味着无论以后创建多少实例，它都只会被创建一次。但是在这种情况下，您应该知道，这个函数在调用时可能会改变上下文(this)。所以传递它作为参数是不安全的如果它以某种方式使用了this;

所以，在我看来。如果您不使用this中的任何内容，或者函数是内部的(您不打算将其作为参数传递到某个地方)，请使用第二个选项。如果它不是内部的并且使用this-使用第一个

注:如果你想在原型中保留功能，同时保存上下文，那么你可以使用混合方法。你可能想使用bind函数，像这样:

class MyClass {
name = 'test';
test() { console.log(this.name); }
constructor() {
this.test = this.test.bind(this);
}
}
const instance = new MyClass();
const test = instance.test;
test();

在这种情况下，您将在原型中拥有main函数，并且它将仅创建一次。当你创建一个新的实例时，你只需要为这个函数创建一个带有绑定上下文的包装器。