Как отобразить объект в консоли с помощью javascript, как это?

У меня есть определить объект-прототип «Животное» с помощью:

2 свойства: имя, возраст и 1 функция: звук, мне нужно создать следующие объекты, которые расширены из «Животного»: корова, овца, кошка (я могу использовать любое имя и возраст), а затем переопределить функцию «звук» на представлять каждый конкретный звук каждого животного, например:

  • Корова издает звук «му-у-у».
  • У овцы звук "пчела" звук овцы
  • У кота звук "мяу"

Я должен использовать console.log для вывода следующего результата:

Название и возраст каждого вида животных и звук каждого вида животных

Я уже составил это:

const Animal = {

  Cow: {
    name: "Peppa",
    age: 12,
    sound: function cowSound() {
      alert("Moo!");
    }
  },
  Sheep: {
    name: "Shirley",
    age: 7,
    sound: function sheepSound() {
      alert("Baa!");
    }
  },
  Cat: {
    name: "Felipe",
    age: 3,
    sound: function catSound() {
      alert("Meow!");
    }
  },
};

console.log(JSON.stringify(Animal))

Но результат таков:"{"Корова":{"имя":"Пеппа","возраст":12},"Овца":{"имя":"Ширли","возраст":7}, "Кот":{"имя":"Фелипе","возраст":8}}"

Что довольно уродливо, я должен признать

Как я могу отобразить то, что мне нужно, с помощью JSON Stringify и посмотреть, почему звук здесь не отображается, заранее спасибо

Это не то, как вы расширяете класс. Вы создаете вложенные свойства, а не новые типы. Вам нужно перечитать учебник по наследованию JavaScript.

Barmar 23.04.2022 08:03

Но что говорит лиса?

mplungjan 23.04.2022 08:20
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
2
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете сделать console.log(Animal), если хотите, чтобы текст был более читабельным. Однако, как указал @Barmar, это неправильный способ создания экземпляра класса. Более подходящим подходом будет:

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sound() {
    alert("Make Sound");
  }
}

class Cow extends Animal {
  sound() {
    alert("Moo!");
  }
}

class Sheep extends Animal {
  sound() {
    alert("Meh!");
  }
}

class Cat extends Animal {
  sound() {
    alert("Miau!");
  }
}

let cow = new Cow("Peppa", 12) // Create a new object

cow.sound() // "Moo!"
console.log(cow) // Cow { name: 'Peppa', age: 12 }
Ответ принят как подходящий

Использование шаблона OLOO

Вы можете использовать шаблон OLOO (объект, связанный с другими объектами) для достижения наследования с использованием метода Объект.создать.

const Animal = {
  init: function(name, sound) {
    this.name = name;
    this.sound = sound;
  },
  makeSound: function() {
    console.log(`${this.name} has the sound "${this.sound}"`);
  },
};

// inheritance via Object.create
const Cow = Object.create(Animal);
const Sheep = Object.create(Animal);

const Cat = Object.create(Animal);
// any other methods specific to Cat
Cat.purr = function() {
  conslo.log(`${this.name} "purrs"`);
};

const animals = [];

// initializing objects
var cow = Object.create(Cow);
cow.init("Cow", "moop");
animals.push(cow);

var sheep = Object.create(Sheep);
sheep.init("Sheep", "bee");
animals.push(sheep);

var cat = Object.create(Cat);
cat.init("Cat", "meow");
animals.push(cat);

// printing
animals.forEach((animal) => {
  animal.makeSound();
});

Использование цепочки прототипов

На самом деле в Javascript нет классов, в нем есть только функции. Синтаксис класса ES6 преобразуется в связанные функции прототипа, как показано ниже. @oerol предоставил ответ, используя классы JS.

Читать Наследование и цепочка прототипов

function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}
Animal.prototype.makeSound = function() {
  console.log(`${this.name} has the sound "${this.sound}"`);
};

// inheritance via prototype chaining
function Cow(name, sound) {
  Animal.call(this, name, sound);
}
Cow.prototype = Object.create(Animal.prototype);

function Sheep(name, sound) {
  Animal.call(this, name, sound);
}
Sheep.prototype = Object.create(Animal.prototype);

function Cat(name, sound) {
  Animal.call(this, name, sound);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.purr = function() {
  conslo.log(`${this.name} "purrs"`);
};

// initializing new objects
const animals = []

var cow = new Cow("Cow", "mooo");
animals.push(cow)

var sheep = new Sheep("Sheep", "bee");
animals.push(sheep)

var cat = new Sheep("Cat", "meow");
animals.push(cat)

// printing
animals.forEach((animal) => {
  animal.makeSound();
});

Другие вопросы по теме