为什么在使用 OOP 时字符串旁边有一个 "undefined"？

Question

我目前正在使用 OOP 来显示烹饪食谱。一切都很好，除了我使用 document.write 方法时。显示 price 时，文本显示为“$2.00undefined”和“$6.00undefined”。这是我的代码：

<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", ".00");
var Bagel = new Recipe("Ham and cheese bagel", "Bagel (preferably an everything bagel), ham, cheese (of any type), pepper (just a little)", ".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 实例时有问题，所以我尝试更改一些语法但无济于事。

Answer 1

问题是您在 document.write 函数内部调用函数 describe。它写 undefined 因为描述 return 什么都没有。

发生的事情是：首先，describe 函数在文档中写入 html 文本。然后，你尝试在文档中写describe函数的return

你不需要把describe函数放在里面document.write.只要用你想要的参数调用就可以了

Answer 2

你可以return你的函数像这样。

因为您没有返回任何值。那个 undefined

function Recipe(name, ingredients, price) {
    this.name = name;
    this.ingredients = ingredients;
    this.price = price;
}

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

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

document.write(describe(instantRamen.name, instantRamen.ingredients, instantRamen.price));
document.write(describe(Bagel.name, Bagel.ingredients, Bagel.price));

<html>
    <body>
    <p id = "p"></p>
</body>
</html>

我删除了 document.write 和 return 字符串。

Answer 3

现在可以使用了

<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", ".00");
var Bagel = new Recipe("Ham and cheese bagel", "Bagel (preferably an everything bagel), ham, cheese (of any type), pepper (just a little)", ".00");

//edited
describe(instantRamen.name, instantRamen.ingredients, instantRamen.price);
describe(Bagel.name, Bagel.ingredients, Bagel.price);
document.getElementById("p").innerHTML = "Your browser version is " + navigator.appVersion;
</script>
</body>
</html>

Answer 4

这里的问题与OOP模式无关，这个问题类似于这个问题“why there is undefined when i run this”

这个问题主要是因为您在 document.write(...) 上执行双重调用，一开始你调用它来打印 describe(...) 函数返回的任何一个，在这种情况下它总是 undefined，因此对 document.write 的原始调用将准确地打印出来.

简而言之，问题出在您的代码中，与此处使用 OOP 无关。

这是删除 document.write:

的双重调用后的代码

<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) {
                // >>>> Removed the call to `document.write`, and replaced it with
                //      `return `
                return "<h2> Recipe name: " + name + "</h2> Ingredients: " + ingredients + "<br />Price: " + price;
            }
            
            var instantRamen = new Recipe(
                "Ramen", 
                "Ramen noodles, hot water, salt, (optional) green pepper", 
                ".00");

            var Bagel = new Recipe(
                "Ham and cheese bagel", 
                "Bagel (preferably an everything bagel), ham, cheese (of any type), pepper (just a little)", 
                ".00");
            
            document.write(describe(instantRamen.name, instantRamen.ingredients, instantRamen.price));
            document.write(describe(Bagel.name, Bagel.ingredients, Bagel.price));
        </script>
    </body>
</html>

为什么在使用 OOP 时字符串旁边有一个 "undefined"？

Why is there an "undefined" next to a string when using OOP?

javascript

undefined