javascript - 在 typescript 中过度使用 'this'

Question

我刚开始学习 typescript/Angular，我有 c++/java 背景，以前从未接触过任何 Web 开发的东西。我用一些 FormControl 编写了一小段代码，有人提出了我不理解的改进建议。

代码如下:

this.myFormData = { ...data };    
this.myForm.controls['name'].setValue(this.myFormData.name);
this.myForm.controls['address'].setValue(this.myFormData.address);
this.myForm.controls['age'].setValue(this.myFormData.age);
this.myForm.controls['gender'].setValue(this.myFormData.gender);
this.myForm.controls['mailing_list'].setValue(this.myFormData.mailing_list);

有人告诉我应该将其更改为:

this.myFormData = { ...data };
const formControls = this.myForm.controls;
formControls['name'].setValue(this.myFormData.name);
formControls['address'].setValue(this.myFormData.address);
formControls['age'].setValue(this.myFormData.age);
formControls['gender'].setValue(this.myFormData.gender);
formControls['mailing_list'].setValue(this.myFormData.mailing_list);

原因是它会节省内存。我质疑这一点，认为这可能是一些过早的优化，但同行评审员确信每次访问“this”并搜索“myForm”并获取“controls”都是不好的做法，说明 DRY软件开发原则。

我仍在学习，所以我想我应该只听审稿人的话，但我真的很想了解发布的示例中的差异以及为什么一个比另一个更好。我在网上搜索了答案，但没有成功(可能是因为不知道要搜索的技术术语？)。

对新手的解释会很好，或者链接到我可以找到答案的地方也会有帮助。

Answer 1

Angular 使用 Uglify 将重写以下代码。

丑化之前

this.myFormData = { ...data };    
this.myForm.controls['name'].setValue(this.myFormData.name);
this.myForm.controls['address'].setValue(this.myFormData.address);
this.myForm.controls['age'].setValue(this.myFormData.age);
this.myForm.controls['gender'].setValue(this.myFormData.gender);
this.myForm.controls['mailing_list'].setValue(this.myFormData.mailing_list);

丑化后

this.a={ ...data };this.b.controls['name'].setValue(this.a.name);this.b.controls['address'].setValue(this.a.address);this.b.controls['age'].setValue(this.a.age);this.b.controls['gender'].setValue(this.a.gender);this.b.controls['mailing_list'].setValue(this.a.mailing_list);

在 Angular 中，这会自动发生，并且它所带来的性能提升远远超过最小化 this 的使用，但这里的问题不是 references 内存。这是源代码生成的较大文件。

让我们重写源代码以支持缩小。

const data = { ...data };    
const controls = this.myForm.controls;
controls['name'].setValue(data.name);
controls['address'].setValue(data.address);
controls['age'].setValue(data.age);
controls['gender'].setValue(data.gender);
controls['mailing_list'].setValue(data.mailing_list);

这将像这样缩小:

const a={ ...data };const b=this.myForm.controls;b['name'].setValue(a.name);b['address'].setValue(a.address);b['age'].setValue(a.age);b['gender'].setValue(a.gender);b['mailing_list'].setValue(a.mailing_list);

从 CPU 性能的 Angular 来看，您的两个源代码示例之间的可测量速度没有差异。

从文件大小的 Angular 来看，会有一个可以用字节来衡量的增益。这是你在编写源代码时获得的东西，大多数人没有时间稍后返回并重写代码行只是为了缩小几个字节。

将一个大型项目减少 100kb 可能会对应用程序启动所需的时间产生很大影响。