如何解决将所有实例方法设为箭头函数以避免丢失绑定是否有任何缺点?
让所有的实例方法都变成箭头函数有什么坏处吗?这样,我们就不会出现“丢失绑定”的问题。
例如,以下内容具有丢失绑定问题。我们通常不会编写代码来以这种方式调用 this.foo()
,但在 ReactJS 中,例如,我们使用 onClick={this.foo}
,它转换为 createElement({ ...,onclick: this.foo,...})
,因此那里丢失了绑定。
class Dog {
constructor(name) {
this.name = name;
}
giveSound() {
console.log(`${this.name} says woof`);
}
giveAlert() {
console.log("I am alert");
const f = this.giveSound;
f();
}
}
const woofie = new Dog("woofie");
woofie.giveSound();
woofie.giveAlert();
所以如果一切都是箭头函数,那么就没有这种担心了:
class Dog {
constructor(name) {
this.name = name;
}
giveSound = () => {
console.log(`${this.name} says woof`);
}
giveAlert = () => {
console.log("I am alert");
const f = this.giveSound;
f();
}
}
const woofie = new Dog("woofie");
woofie.giveSound();
woofie.giveAlert();
但是有什么缺点吗?
解决方法
有几个缺点,但正如您所指出的,还有一个优点,所以这完全取决于您。
我知道的两个主要缺点是:
-
每个实例为每个方法获取自己的函数对象(三个月 = 每个实例三个函数对象),而不是通过原型共享。这意味着:
-
在创建实例时创建了更多的对象(函数代码是共享的,但每个实例都有自己的函数对象),并且
-
继承可能更棘手
-
-
这使得方法更难模拟以进行测试,因为它们不在原型上,而是内置在每个实例中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。