如何使用这样的JavaScript在控制台中显示对象？

Question

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

2个属性：名称，年龄和1个功能：声音，我需要创建以下从“动物”延伸的对象：牛，绵羊，猫（我可以使用任何名称，年龄），然后覆盖功能“声音”以表示每只动物的每种特定声音：

• 牛具有声音“ moo”
• 绵羊的声音“蜜蜂” 绵羊的声音
• cat具有声音“ Meow” “

我必须使用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))

但结果是： “ {; ; quot;：{; qu来'name; quot; quole; ;

：

; qu来 我需要与Json Stringify一起使用，看看为什么它不在这里显示的声音，谢谢

Answer 1

使用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实际上没有类，它仅具有功能。 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();
});

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