如何将对象与函数属性结合起来？ JS答案

【问题标题】：How to combine objects with function properties? JS如何将对象与函数属性结合起来？ JS
【发布时间】：2020-12-28 18:55:33
【问题描述】：

我有以下 js 代码，其中有 2 个常量，用于接收一个对象。两个对象都具有函数属性。我们也可以看到他们重复了代码。重复 onApprove、onError 和 onCancel 属性。

我寻求的是：如何将两者混合在一个新的 const 中，然后这两个对象都将继承新的 const + 额外属性。所以我总共有 3 个 const，在新的 const 中，我将重复使用 onApprove、onError 和 onCancel 的代码，而 PaypalSubscription 和 PaypalOffer const 将分别只有 createSubscription 和 createOrder。

我尝试了一些概念，但到目前为止没有任何效果。

知道如何做到这一点吗？谢谢！

const PaypalSubscription = {
  createSubscription(data, actions) {
    ...
  },

  onApprove(res) {
    return postCallback('approve', res);
  },
  onError(res) {
    return postCallback('cancel', res);
  },
  onCancel(res) {
    return postCallback('cancel', res);
  },
}

const PaypalOffer = {
  createOrder(data, { order }) {
    ...
  },
  onApprove(res) {
    return postCallback('approve', res);
  },
  onError(res) {
    return postCallback('cancel', res);
  },
  onCancel(res) {
    return postCallback('cancel', res);
  },
};

【问题讨论】：

用其他两个类扩展的共享方法创建一个基类似乎是一种不错的方法
否则您可以将共享方法拉出到另一个对象变量中，然后Object.assign 将它们拉到另外两个对象中。

标签： javascript object merge

【解决方案1】：

那里不需要类，使用对象：


const commonProps = {
  onApprove(res) {
    return postCallback('approve', res);
  },
  onError(res) {
    return postCallback('cancel', res);
  },
  onCancel(res) {
    return postCallback('cancel', res);
  },
}
const PaypalSubscription = {
  ...commonProps,
  createSubscription(data, actions) {
    // do something
  },
}

const PaypalOffer = {
  ...commonProps,
  createOrder(data, { order }) {
    // do something
  },
};

【讨论】：

我发誓我确实做了这个解决方案，使用了扩展运算符。我会再试一次，可能我搞砸了。

【解决方案2】：

“我们也可以看到他们重复了代码”

如果你有重复的代码，你可能想看看面向对象编程 (OOP) 的原则。

“这两个对象都将继承”

如果你想让对象继承方法，那么使用真正的OOP继承。

class PaypalTransaction {
  onApprove(res) {
    return this.postCallback('approve', res);
  }
  onError(res) {
    return this.postCallback('cancel', res);
  }
  onCancel(res) {
    return this.postCallback('cancel', res);
  }
  postCallback(status, res) {
    console.log(`${status}`);
  }
}

class PaypalSubscription extends PaypalTransaction {
  createSubscription(data, actions) {
    // ...
  }
}

class PaypalOffer extends PaypalTransaction {
  createOrder(data, { order }) {
    // ...
  }
}

const transactions = [
  new PaypalSubscription(),
  new PaypalOffer()
];

transactions.forEach(tx => tx.onApprove('foo'));

【讨论】：

谢谢！我已经有几年不接触 OOP 了，需要重新审视一些概念。但我确实记得继承，你的代码已经恢复了一些隐藏的知识。谢谢！ :)

【解决方案3】：

您正在寻找扩展运算符 (...) [ES6 特性] 或 Object.Assign()。

const SubscribeBase = {
   createSubscription(data, actions) {
      ...
   }
};

const OfferBase = {
   createOrder(data, { order }) {
      ...
   }      
};

const ResponseBase = {
   onApprove(res) {
      return postCallback('approve', res);
   },
   onError(res) {
     return postCallback('cancel', res);
   },
   onCancel(res) {
     return postCallback('cancel', res);
   }
}

const PaypalSubscription = {
   ...SubscribeBase,
   ...ResponseBase
}

const PaypalOffer = {
   ...OfferBase,
   ...ResponseBase
}

一个很好的教程可以在这里找到Merge Objects

【讨论】：