JavaScript函数中的奇怪行为

Question

如果我在以下代码片段中执行测试函数：

function pointInside( r, p ) {
    var result =
        ( p.x >= r.location.x - r.size.width * 0.5 ) &&
        ( p.x <= r.location.x + r.size.width * 0.5 ) &&
        ( p.y >= r.location.y - r.size.height * 0.5 ) &&
        ( p.y <= r.location.y + r.size.height * 0.5 )
    ;
    return result;
}

function test() {
    var rect = {};
    rect["location"] = { x:6, y:5 };
    rect["size"] = { width:10, height:8 };
    var p = { x:10, y:8 };
    var inside = pointInside( rect, p );
    console.log( inside ? "inside" : "outside" );
}

然后在控制台上输出了“inside”文本。很好。现在，如果我将pointInside函数更改为以下内容：

function pointInside( r, p ) {
    return
        ( p.x >= r.location.x - r.size.width * 0.5 ) &&
        ( p.x <= r.location.x + r.size.width * 0.5 ) &&
        ( p.y >= r.location.y - r.size.height * 0.5 ) &&
        ( p.y <= r.location.y + r.size.height * 0.5 )
    ;
}

当我调用测试函数时，“outside”被写入控制台。进一步调查后，我发现pointInside函数实际上返回了未定义的值。为什么？我看不出两个版本的pointInside之间有任何有意义的区别。有人能给我解释一下吗？

- R Ellingworth

Answer 1

在JavaScript中，; 是可选的（在语句结尾处）...... 因此，您的函数返回“undefined”（它是假值），该函数中的其余代码将被有效地忽略......太棒了，不是吗！ 请尝试以下内容。

function pointInside( r, p ) {
    return (
        ( p.x >= r.location.x - r.size.width * 0.5 ) &&
        ( p.x <= r.location.x + r.size.width * 0.5 ) &&
        ( p.y >= r.location.y - r.size.height * 0.5 ) &&
        ( p.y <= r.location.y + r.size.height * 0.5 )
    );
}

这种愚蠢的行为可能永远无法解决，因为它会破坏太多（可怜的）代码。

- Jaromanda X

Answer 2

很不幸，许多JavaScript解析器试图宽容处理缺失的分号。如果你写了"return"然后换行，许多解析器会认为你忘了写分号，导致出现"undefined"。

- Max Murphy

---

虽然我不同意很多细节，但总体感觉还是比较准确的：https://www.youtube.com/watch?v=D5xh0ZIEUOE - Max Murphy

这是规范的一部分，不是许多口译员尝试做的事情，而是所有口译员都必须做的事情。 - Jörg W Mittag

也许他们必须这样做，但通常情况下现实和标准并不总是相交。我目前正在使用tiny-js，这是一个用于微控制器的嵌入式解释器。在这里，返回需要等待分号，因此在这方面它不符合标准。不处理奇怪的规则可能不符合标准，但它可以使代码保持小巧，并且易于验证安全问题。 - Max Murphy