Javascript - calling an external function as a property of an object - Stack Overflow

admin管理员组

文章数量:1414628

I have an array of objects, at this moment there is just one object inside. In this object i have a function that elaborate some properties of the same object. The function is processed outside the array, but the result is NaN, i dont know how pass correctly the values..

Example

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

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

Result: NaN.

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

Result: {number1: 1, number2: 2, sum: undefined}

I have an array of objects, at this moment there is just one object inside. In this object i have a function that elaborate some properties of the same object. The function is processed outside the array, but the result is NaN, i dont know how pass correctly the values..

Example

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

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

Result: NaN.

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

Result: {number1: 1, number2: 2, sum: undefined}

• javascript
• function
• object

Share Improve this question Follow asked Nov 23, 2020 at 18:21 FedoroFedoro 9111 silver badge77 bronze badges 4

• The property value does not have this bound to the object yet. – Travis J Commented Nov 23, 2020 at 18:24
• @TravisJ if function sum() was an arrow function, would it work? – Ozgur Sar Commented Nov 23, 2020 at 18:31
• No @ozgur, the issue is when the object's this binding is assigned, and is unrelated to the sum function call. – Travis J Commented Nov 23, 2020 at 18:32
• @TravisJ thanks for the clarification – Ozgur Sar Commented Nov 23, 2020 at 18:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

If you want a fully usable object during object creation, then use a Function object.

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])
}

However, if you are in need of this function at a later time, and want it accessible for all of those objects, then stop using anonymous objects and create an actual class or prototype.

Prototype:

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:

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)
}

You can add that property to the object when you are iterating over it.

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])
}

There has a simple solution. you can put an instant function in your sum property and under that function, send the other required values of the object by converting them into variables. See below:

function sum(n1, n2) {
    return n1 + n2;
}
const arrayObj = [{
        'number1': 1,
        'number2': 2,
        'sum': function () {
            let num1 = this.number1, num2 = this.number2;
            return sum(num1, num2);
        }
    }];

console.log(arrayObj.sum())

You don't have to make a seperate function, you can also write the sum function in the object itself. Now when you access the sum field in your object, it will sum the two values and return it.

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

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

I have found another interesting solution (I don't remember where I had found it.) for this problem. Using getter function of javascript the problem can solve easily.You can use this in your object directly to use the external function. If a property (key) of an object se the external function to get a value and it have to behave like normal "key:value" pair (not being a method/function), then the getter function is the best way to use to get the value. To know more about it please read it.

function sum(n1, n2) {
    return n1 + n2;
}
const arrayObj = 
      {
        get sum() {return sum(this.number1, this.number2)},
        number1: 1,
        number2: 2,
        number3: 4,
        get totalsum() {return sum(this.sum, this.number3)} //using the sum property (that used external function) in another property.
      };


console.log(arrayObj);
console.log('the sum of '+arrayObj.number1+' & '+arrayObj.number2+' is: '+arrayObj.sum); 

console.log('the sum of '+arrayObj.sum+' & '+arrayObj.number3+' is: '+arrayObj.totalsum);

本文标签： Javascriptcalling an external function as a property of an objectStack Overflow