如何在控制台中用 javascript 像这样显示一个对象？

Question

我已经定义了一个“动物”原型对象：

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

但是结果是这样的： "{"Cow":{"name":"Peppa","age":12},"Sheep":{"name":"Shirley","age" ;:7},"Cat":{"name":"Felipe","age":8}}"

我必须承认这很丑

如何使用 JSON Stringify 显示我需要的方式，看看为什么这里没有显示声音，提前致谢

Answer 1

如果你想让它更具可读性，你可以console.log(Animal)。但是，正如@Barmar 指出的那样，这不是实例化 class 的正确方法。更合适的方法是：

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 }

Answer 2

使用 OLOO 模式

您可以使用 OLOO（对象链接到其他对象）模式使用 Object.create 方法实现继承。

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实际上没有classes，它只有功能。 ES6 class 语法被转换为原型链函数，如下所示。 @oerol 使用 JS classes.

提供了答案

阅读Inheritance and the prototype chain

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

如何在控制台中用 javascript 像这样显示一个对象？

how to display an object in the console with javascript like this?

html

javascript

syntax

object

使用 OLOO 模式

使用原型链