Question

第一种方式：

const logger = () => ({
  log(msg) {
    console.log(msg)
  }
})
class Component {
  constructor() {
    Object.assign(this, logger())
  }
}

第二种方式：

const logger = {
  log(msg) {
    console.log(msg)
  }
}
class Component {
  constructor() {
    Object.assign(this, logger)
  }
}

现在，两者有什么区别？

const obj = new Component()
obj.log('what is the difference?')

我在人们的代码中多次看到第一个模式。这种IFFE模式是否有名称？在什么情况下我们使用这种模式？

我将其简化为第二段代码，仍然可以使用。似乎工作一样吗？

Answer 1

第一个示例每次创建log的实例时都会创建一个新对象（和一个新的Component函数）。

第二个示例每次都重复使用同一示例（因此，对log所做的任何更改都将被共享）。

Answer 2

简而言之，它们将在您的示例中产生相同的结果。这是因为Object.assign本身将始终返回一个新对象，该对象由您作为参数传递的对象组成。在这两种情况下，您都使用相同的参数来调用它，例如，您正在调用工厂函数来创建对象，或者正在传递简单的对象文字，因此实例对象上的任何更改都不会影响原始对象。

区别在于，在第二种情况下，log函数在所有实例之间共享，这是因为运行工厂函数每次都会创建一个新对象，因此会创建一个新函数，但是将其放在对象内部并引用该对象。对象将返回相同的功能。

如果必须传递参数以基于它们创建动态对象，则第一种方法将很有用。这种方法的危险在于，由于每次都返回一个新函数，因此可能要创建一些性能问题，具体取决于要创建的实例数。您可以通过第三个选择来解决此问题

const log = (msg) => console.log(msg);

const logger = () => ({ log });

class Component {
  constructor() {
    Object.assign(this, logger())
  }
}