如何使用這樣的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))

但結果是這樣的： “{“Cow”:{“name”:“Peppa”,“age”:12},“Sheep”:{“name”:“Shirley”,”;年齡“：7}”，“貓”：{“名稱”：“費利佩”，“年齡”：8}}”

我必須承認這很丑

如何使用 JSON Stringify 顯示我需要的方式，并查看為什么它沒有在此處顯示聲音，在此先感謝

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

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 }

標籤：javascript html 目的 句法

上一篇：桌面影像未在瀏覽器上加載

下一篇：如何在反應應用程式中從服務器回應創建childElement