Показать значения свойств объекта, используя метод объекта

Question

Я новичок в JS, и недавно я изучал объекты и функции.Здесь я хочу вызвать функцию для каждого объекта в массиве объектов.Я использую forEach для этого.Результат равен undefined для каждого свойства.

function showDetail() {
  console.log(`name: ${this.name}
         price: ${this.price}
         sold: ${this.sold}
         console: ${this.console}
         `);
}
const games = [{
    name: ' Crash Bandicoot N. Sane Trilogy',
    price: 1060,
    sold: 20,
    console: 'PS4',
  },
  {
    name: 'Lego Marvel Super Heroes',
    price: 700,
    sold: 25,
    console: 'XBOX',
    showDetail: function() {
      console.log(this.name);
    }
  },
  {
    name: 'Gta V',
    price: 1449,
    sold: 30,
    console: 'PS4',
    showDetail: function() {
      console.log(this.name);
    }
  }
];
games.forEach(showDetail);

Результат для каждого объекта такой:

name: undefined
     price: undefined
     sold: undefined
     console: [object Object]
 games.forEach(showDetail);

Answer 1

Когда вы пишете

games.forEach(showDetail);

showDetails является функцией обратного вызова forEach, и ей передается объект в качестве первого параметра, и, следовательно, вы будете писать

function showDetail(game) {
  console.log(`name: ${game.name}
         price: ${game.price}
         sold: ${game.sold}
         console: ${game.console}
         `);
}

, когда вы this внутри showDetail значение this равно not binded для контекста объекта и, следовательно, this.name не возвращает значение объекта.Однако если вы напишите

games.forEach(game => {
   showDetail.call(game);
});

, вы предоставите контекст для объекта, и этот случай this.name внутри showDetail будет работать

Answer 2

Может быть, вы имеете в виду это

// constructor

function Game(parms) {
  this.name = parms.name;
  this.price = parms.price;
  this.sold = parms.sold;
  this.gconsole = parms.gconsole;
}

// toString override

Game.prototype.toString = function() {
  return `name: ${this.name}
         price: ${this.price}
         sold: ${this.sold}
         gconsole: ${this.gconsole}
         `;
}

const games = [
  new Game({
    name: ' Crash Bandicoot N. Sane Trilogy',
    price: 1060,
    sold: 20,
    gconsole: 'PS4'
  }),
  new Game({
    name: 'Lego Marvel Super Heroes',
    price: 700,
    sold: 25,
    gconsole: 'XBOX'
  }),
  new Game({
    name: 'Gta V',
    price: 1449,
    sold: 30,
    gconsole: 'PS4'
  })
];
games.forEach(function(g) {
  console.log(g.toString());
});

Answer 3

Вы должны передать 'game' в качестве параметра функции и распечатать ее свойства, а не из 'this'

function showDetail(game){
   console.log(`name: ${game.name}
   price: ${game.price}
   sold: ${game.sold}`);
}

const games = [ ..... ]
games.forEach( function(game) { showDetail(game) });
//if there is support for arrow functions, it's cleaner
games.forEach( game => showDetail(game) );
//also, as mentioned by Máté in the comments
games.forEach( showDetail ); //will work

Если вы хотите, чтобы функция 'showDetail' работала с этим 'this', вам следует привязать 'game' к функции

games.forEach( game => showDetail.bind(game)() );
function showDetail(){
   //here the 'this' is the 'game', because it has been bounded via .bind() method
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind