ES6模块中导出构造函数原型失效问题求助

嘿，我一眼就看出问题所在了——你的Product构造函数里显式返回了一个新创建的item对象，这直接导致new Product()得到的实例和Product.prototype完全脱节了！

为什么会失效？ #

在JavaScript里，当你用new调用构造函数时：

• 正常情况下，如果构造函数没有显式返回对象，JS会自动返回this（也就是继承了构造函数原型的实例）
• 但你这里return item，把原本应该返回的Product实例替换成了一个全新的、和Product.prototype毫无关系的普通对象，自然找不到printThat方法

修复方案有两种，选适合你的就行： #

方案1：不要返回新对象，直接修改构造函数的this

这是最常规的构造函数写法，把属性直接挂载到this上，这样new出来的实例就是Product的原型继承者：

export function Product(unprocessedItem) {
  // 把unprocessedItem的属性拷贝到this上
  Object.assign(this, unprocessedItem);
}
Product.prototype.printThat = function() {
  console.log('Yo, it worked!')
}

方案2：如果必须返回新对象，让它继承Product的原型

要是你因为某些原因一定要返回新对象，那就用Object.create()让这个对象关联Product.prototype：

export function Product(unprocessedItem) {
  // 创建一个以Product.prototype为原型的对象，再拷贝属性
  let item = Object.assign(Object.create(Product.prototype), unprocessedItem);
  return item;
}
Product.prototype.printThat = function() {
  console.log('Yo, it worked!')
}

两种方案都能让你在其他文件里正常调用product.printThat()～

内容的提问来源于stack exchange，提问作者Modermo