工厂函数中的“This”答案

【问题标题】："This" in Factory Functions工厂函数中的“This”
【发布时间】：2020-11-09 12:59:13
【问题描述】：

如果这是一个非常愚蠢的问题，我很抱歉。我已经搜索过它并找不到明确的答案。网络上的教程中有一个工厂函数，如下所示。我主要了解“This”如何在其他地方工作，但我不能完全理解“This”如何在这里帮助我们。即使我删除“This”，该代码仍然有效。我也不明白为什么删除“return color;”会破坏“color.rgb()”。

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    //const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  return color;
}

const newColor = makeColor(50, 100, 150);
newColor.rgb();

console.log(newColor); // {r: 50, g: 100, b: 150, rgb: ƒ}
console.log(newColor.rgb()); //rgb(50, 100, 150)

【问题讨论】：

r, g, b 被构造函数中的变量封闭。在newColor.rgb() 之前尝试newColor.r = 0，看看使用this 和不使用this 之间的区别。
如果你删除 return color，那么你的 makeColor 函数不会返回任何东西，所以变量 newColor 将是未定义的，因此 newColor.rgb() 不会做任何事情
非常感谢你们俩！ @deceze 您的评论现在让我非常清楚范围将如何在这里工作！
@TKoL 我现在明白为什么不返回任何内容会破坏代码。
这能回答你的问题吗？ How does the "this" keyword work?

标签： javascript function oop this factory

【解决方案1】：

const { r, g, b } = this; 在这一行中this 指的是创建的对象实例，如果删除这一行，它将起作用，因为函数方法中的参数名称与构造对象的属性名称匹配。这就是代码“有效”的原因。

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    //const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  return color;
}

const newColor = makeColor(50, 100, 150);
newColor.rgb();

console.log(newColor); // {r: 50, g: 100, b: 150, rgb: ƒ}
newColor.b = 0;
console.log(newColor.rgb()); // this still prints 150 where it should print 0
// cause b refers to the argument passed into the makeColor function not instance member 

function makeColor2(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  return color;
}

const newColor2 = makeColor2(50, 100, 150);
newColor2.b = 0;
console.log(newColor2.rgb()); // b is 0 as expected

对于第二个问题，工厂方法是构建一些东西，然后你通过从函数中返回它来生产那个东西。如果您不返回它，它将保持本地状态并且根本没有任何用处。

【讨论】：

现在非常清楚范围在这里是如何工作的。我没有想到这种情况。

【解决方案2】：

即使我删除“This”，代码仍然有效

我假设你的意思是它仍然适用于注释掉的这一行

//const { r, g, b } = this;

原因是您实际上对变量 r、g 和 b 有一个闭包，因此您仍然可以读取它们。

我也不明白为什么要删除“返回颜色；”打破“color.rgb()”。

删除换行符一切，因为现在您的makeColor 函数返回未定义：

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    //const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  };
  //return color;
}

const newColor = makeColor(50, 100, 150);
//newColor.rgb();

console.log(newColor); // undefined
//console.log(newColor.rgb()); //rgb(50, 100, 150)

return color 行返回具有属性r、g、b 和函数rgb() 的对象

【讨论】：

【解决方案3】：

当您删除 const { r, g, b } = this; 时，rgb(${r}, ${g}, ${b}) 引用您分配给 color 的 makeColor 的参数。

当您调用makeColor 时，它会执行函数中的任何操作，然后返回一个值。在您的情况下，该值是makeColor 中定义的color 对象。如果去掉return，就会返回undefined

【讨论】：

我现在明白为什么不返回任何内容会破坏代码。