Javascript - 调用外部函数作为对象的属性答案

【问题标题】：Javascript - calling an external function as a property of an objectJavascript - 调用外部函数作为对象的属性
【发布时间】：2020-11-23 18:21:31
【问题描述】：

我有一个对象数组，此时里面只有一个对象。在这个对象中，我有一个函数可以详细说明同一对象的某些属性。该函数在数组外处理，但结果为 NaN，我不知道如何正确传递值..

例子

let arrayObj = [{
  number1: 1,
  number2: 2,
  sum: sum(this.number1 , this.number2)
}
]

function sum(n1, n2) {
  return console.log(n1 + n2);
}

结果：NaN。

for (let i in arrayObj){
  console.log(arrayObj[i])
}

结果：{number1: 1, number2: 2, sum: undefined}

【问题讨论】：

属性值还没有绑定到对象的this。
@TravisJ 如果函数 sum() 是箭头函数，它会起作用吗？
否@ozgur，问题是对象的 this 绑定何时被分配，并且与 sum 函数调用无关。
@TravisJ 感谢您的澄清

标签： javascript function object

【解决方案1】：

您可以在迭代对象时将该属性添加到对象。

const arrayObj = [{
    number1: 1,
    number2: 2,
}];

function sum(n1, n2) {
  return n1 + n2;
}

for (let i in arrayObj){
  arrayObj[i].sum = sum(arrayObj[i].number1, arrayObj[i].number2)
  console.log(arrayObj[i])
}

【讨论】：

很高兴帮助朋友

【解决方案2】：

如果您想要在对象创建期间完全可用的对象，请使用 Function 对象。

let arrayObj = [new function(){
  this.number1 = 1;
  this.number2 = 2;
  this.sum = sum(this.number1 , this.number2)
}]

// minor edit to return the sum instead of returning the result of the console log
function sum(n1, n2) {
  console.log(n1 + n2);
  return n1 + n2;
}

for (let i in arrayObj){
  console.log(arrayObj[i])
}

但是，如果您以后需要此函数，并且希望所有这些对象都可以访问它，那么请停止使用匿名对象并创建一个实际的类或原型。

原型：

function Point(number1, number2){
 this.number1 = number1;
 this.number2 = number2;
}
Point.prototype.sum = function(){
 return this.number1 + this.number2;
}

let arrayObj = [
 new Point(1,2),
 new Point(3,4),
 new Point(15,30)
];

for (let i in arrayObj){
  console.log(arrayObj[i].sum())
}

类：

class Point {
  constructor(number1, number2){
    this.number1 = number1;
    this.number2 = number2;
  }
  get sum(){
      return this.number1 + this.number2;
  }
}

let arrayObj = [
 new Point(1,2),
 new Point(3,4),
 new Point(15,30)
];

for (let i in arrayObj){
  console.log(arrayObj[i].sum)
}

【讨论】：

在这种情况下，我无法添加相似的 obj，它不起作用。让 arrayObj = [new function(){ ... }, { this.number1 = 10; this.number2 = 20; this.sum = sum(this.number1 , this.number2) }] 好吧，也许不是我解决问题的方法不正确。我想创建一个外部函数来调用不同的 obj 并传递不同的参数
@Fedoro - 您将为创建期间希望拥有的每个对象创建一个新函数。因此，在您的评论示例中，您需要在两个空间中使用新功能。如果您希望传入一个值，您可以在函数调用中这样做，尽管它与设置略有不同。如果您稍微扩展一下您的情况，我也可以证明这一点。
@Fedoro - 如果您打算为对象提供更多结构，请确保逻辑位于正确的位置。稍后将 sum 属性添加到对象中，如 Ori 的回答所示，效率低下（原型和类仅将其逻辑存储在解释器中一次），并且也是糟糕的设计（因为您的逻辑现在位于该点调用而不是在创建点）。相反，请使用类或原型。

【解决方案3】：

你不必制作单独的函数，你也可以在对象本身中编写求和函数。现在，当您访问对象中的 sum 字段时，它会将两个值相加并返回。

let arrayObj = [{
    number1: 1,
    number2: 2,
    sum: function() {
        return this.number1 + this.number2;
    }
}]

console.log(arrayObj[0].sum());

【讨论】：

这需要调用函数，并且不会在对象创建过程中赋值。
我想分离函数以在其他对象中调用它，并使用其他参数
在这种情况下，Travis 的回答确实更合适。