Javascript 为什么在使用OOP时，字符串旁边会有一个“未定义的”？_Javascript_Undefined

Javascript 为什么在使用OOP时，字符串旁边会有一个“未定义的”？

javascript

Javascript 为什么在使用OOP时，字符串旁边会有一个“未定义的”？,javascript,undefined,Javascript,Undefined,我目前正在使用OOP来显示烹饪食谱。除了使用document.write方法外，一切都很好。显示价格时，文本显示为$2.00未定义和$6.00未定义。这是我的密码： <html> <body> <p id = "p"></p> <script> function Recipe(name, ingredients, price) { this.name = name; this.ingr

我目前正在使用OOP来显示烹饪食谱。除了使用document.write方法外，一切都很好。显示价格时，文本显示为$2.00未定义和$6.00未定义。这是我的密码：

<html>
    <body>
    <p id = "p"></p>
<script>
function Recipe(name, ingredients, price) {
    this.name = name;
    this.ingredients = ingredients;
    this.price = price;
}

function describe(name, ingredients, price) {
    document.write("<h2> Recipe name: " + name + "</h2> Ingredients: " + ingredients + "<br  />Price: " + price);
}

var instantRamen = new Recipe("Ramen", "Ramen noodles, hot water, salt, (optional) green pepper", "$2.00");
var Bagel = new Recipe("Ham and cheese bagel", "Bagel (preferably an everything bagel), ham, cheese (of any type), pepper (just a little)", "$6.00");

document.write(describe(instantRamen.name, instantRamen.ingredients, instantRamen.price));
document.write(describe(Bagel.name, Bagel.ingredients, Bagel.price));
</script>
</body>
</html>

预期结果类似于菜名：拉面断线配料：拉面，热水，盐，可选青椒线价格：$2.00，但价格变为$2.00未定义。其他一切都可以

我最初认为创建instantRamen和Bagel实例时出错，因此我尝试更改一些语法，但没有效果。

问题是您正在调用document.write函数中的函数descripe。它写入未定义的内容，因为descripe不返回任何内容

发生的事情是：首先，descripe函数在文档中编写html文本。然后，尝试在文档中编写descripe函数的返回

您不需要将descripe函数放在document.write中。只需使用所需的参数调用它。

问题是您正在调用document.write函数中的函数descripe。它写入未定义的内容，因为descripe不返回任何内容

发生的事情是：首先，descripe函数在文档中编写html文本。然后，尝试在文档中编写descripe函数的返回

您不需要将descripe函数放在document.write中。只需使用所需的参数调用它。

您可以像这样返回函数

因为您没有返回任何值。那是未定义的

功能名称、成分、价格{ this.name=名称；这个。成分=成分；这个价格=价格； } 功能描述名称、成分、价格{ 返回配方名称：+名称+配料：+配料+价格：+价格； } var instantRamen=新的接受者，拉面，热水，盐，可选青椒，2.00美元； var Bagel=新的RecipeHam和奶酪百吉饼，百吉饼最好是所有的百吉饼，火腿，任何类型的奶酪，胡椒粉一点点，6.00美元； document.writedescriptioninstantramen.name、instantRamen.components、instantRamen.price； document.writedescrippebagel.name、Bagel.配料、Bagel.price；

您可以像这样返回函数

因为您没有返回任何值。那是未定义的

现在它开始工作了

功能名称、成分、价格{ this.name=名称；这个。成分=成分；这个价格=价格； } 功能描述名称、成分、价格{ 文件。填写配方名称：+名称+配料：+配料+价格：+价格； } var instantRamen=新的接受者，拉面，热水，盐，可选青椒，2.00美元； var Bagel=新的RecipeHam和奶酪百吉饼，百吉饼最好是所有的百吉饼，火腿，任何类型的奶酪，胡椒粉一点点，6.00美元； //编辑 descripbeinstantramen.name，instantRamen.components，instantRamen.price；描述Bagel.name、Bagel.配料、Bagel.price； document.getElementByIdp.innerHTML=您的浏览器版本为+navigator.appVersion；现在它开始工作了

这里的问题与OOP模式无关，这个问题与这个问题类似

问题主要是因为您正在对文档执行双重调用。请编写。。。，正如在第一次你调用它打印，无论是由描述返回。。。函数，在本例中，函数始终是未定义的，因此原始调用document.wr 我会把它打印出来

简而言之，问题出在代码中，与这里使用OOP无关

以下是删除对document.write的双重调用后的代码：

功能名称、成分、价格{ this.name=名称；这个。成分=成分；这个价格=价格； } 功能描述名称、成分、价格{ //>>>删除了对“document.write”的调用，并将其替换为 //”“回来` 返回配方名称：+名称+配料：+配料+价格：+价格； } var instantRamen=新配方拉面，拉面、热水、盐、可选青椒、， $2.00; 新配方火腿奶酪百吉饼，百吉饼最好是百吉饼，火腿，奶酪，胡椒粉， $6.00; document.writedescriptioninstantramen.name、instantRamen.components、instantRamen.price； document.writedescrippebagel.name、Bagel.配料、Bagel.price；

这里的问题与OOP模式无关，这个问题与这个问题类似

问题主要是因为您正在对文档执行双重调用。请编写。。。，正如在第一次你调用它打印，无论是由描述返回。。。函数，在本例中该函数始终是未定义的，因此对document.write的原始调用将精确打印该函数

简而言之，问题出在代码中，与这里使用OOP无关

以下是删除对document.write的双重调用后的代码：

这里有一个JSFIDLE:。在编辑问题时，我尝试使用运行代码片段，但@jornsharpe将其更改回原来的状态。descripe的返回值未定义，您也会写出document.writedescripe。删除文档。在这里写，或者最好在descripe中删除它，然后返回字符串。类似的问题是：你基本上是在调用document.writedocument.write。。。；和document.write仅返回undefinedHere's JSFIDLE:。在编辑问题时，我尝试使用运行代码片段，但@jornsharpe将其更改回原来的状态。descripe的返回值未定义，您也会写出document.writedescripe。删除文档。在这里写，或者最好在descripe中删除它，然后返回字符串。类似的问题是：你基本上是在调用document.writedocument.write。。。；而document.write只返回未定义的值此答案是正确的。一个建议是，更好的代码实践是划分职责，让descripe函数只返回字符串，然后将结果与document.write一起使用。这个答案是正确的。建议，一种更好的代码实践是划分职责，使descripe函数只返回字符串，然后将该结果与document.write一起使用。