console.log无输出问题：跟随Head First JavaScript示例后的困惑

我正在学习《Head First JavaScript》，尝试完成书中所有习题。最初按自己思路编写的代码可正常输出，但参考书中示例修改代码后，console.log无法输出内容，找不到问题所在。

修改后无输出的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Coffee(roast, ounces) {
            this.roast = roast;
            this.ounces = ounces;
            this.getSize = function() {
            if (this.ounces === 8) {
                return "small";
            } else if (this.ounces === 12) {
                return "medium";
            } else (this.ounces === 16); {
                return "large";
            }
        };
            this.toString = function() {
                return "You have ordered a " + this.getSize() + " " + this.roast + " coffee.";
            };
        }
        var csmall = new Coffee ("House Blend",  "8");
        var cmedium = new Coffee ("House Blend", "12");
        var clarge = new Coffee ("Dark Roast", "16");
        var coffees = [csmall, cmedium, clarge];

        for (var i = 0; i < coffees.length; i++) {
            coffees[i].toString();
        }
    </script>
</head>
<body>
    
</body>
</html>

最初可正常运行的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Coffee(roast, size, ounces) {
            this.roast = roast;
            this.size = size;
            this.ounces = ounces;
            this.getSize = function() {
            if (this.ounces === 8) {
                console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
            } else if (this.ounces === 12) {
                console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
            } else (this.ounces === 16); {
                console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
            }
            };
        }
        var csmall = new Coffee ("House Blend", "small",  "8");
        var cmedium = new Coffee ("House Blend", "medium", "12");
        var clarge = new Coffee ("Dark Roast", "large", "16");
        var coffees = [csmall, cmedium, clarge];

        for (var i = 0; i < coffees.length; i++) {
            coffees[i].getSize();
        }
    </script>
</head>
<body>
    
</body>
</html>

问题原因及修复方案 #

1. 没有调用console.log输出结果 #

修改后的代码里，你只是调用了coffees[i].toString()，但这个方法仅返回字符串，并没有主动输出到控制台。必须把返回值传给console.log()才能看到内容：

for (var i = 0; i < coffees.length; i++) {
    console.log(coffees[i].toString());
}

2. 类型不匹配导致getSize返回undefined #

创建Coffee实例时，你传入的ounces是字符串类型（比如"8"），但getSize里用**严格相等===**和数字8比较，字符串与数字永远不相等，三个条件都不会触发，最终getSize会返回undefined。

修复方式：创建实例时传入数字而非字符串：

var csmall = new Coffee ("House Blend", 8);
var cmedium = new Coffee ("House Blend", 12);
var clarge = new Coffee ("Dark Roast", 16);

3. getSize方法的else语法错误 #

else (this.ounces === 16);存在两个错误：

• else不能带条件，带条件需用else if
• 末尾的分号会断开条件与后续代码块，导致不管条件是否满足，都会执行return "large";

修复后的getSize方法：

this.getSize = function() {
    if (this.ounces === 8) {
        return "small";
    } else if (this.ounces === 12) {
        return "medium";
    } else if (this.ounces === 16) {
        return "large";
    } else {
        return "unknown size";
    }
};

完整修复后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Coffee(roast, ounces) {
            this.roast = roast;
            this.ounces = ounces;
            this.getSize = function() {
                if (this.ounces === 8) {
                    return "small";
                } else if (this.ounces === 12) {
                    return "medium";
                } else if (this.ounces === 16) {
                    return "large";
                } else {
                    return "unknown size";
                }
            };
            this.toString = function() {
                return "You have ordered a " + this.getSize() + " " + this.roast + " coffee.";
            };
        }
        var csmall = new Coffee ("House Blend", 8);
        var cmedium = new Coffee ("House Blend", 12);
        var clarge = new Coffee ("Dark Roast", 16);
        var coffees = [csmall, cmedium, clarge];

        for (var i = 0; i < coffees.length; i++) {
            console.log(coffees[i].toString());
        }
    </script>
</head>
<body>
    
</body>
</html>

内容的提问来源于stack exchange，提问作者Andres