JavaScript 中“in”的解释答案

【问题标题】：Explanation of "in" in JavaScriptJavaScript 中“in”的解释
【发布时间】：2012-09-14 23:41:43
【问题描述】：

请考虑下面的代码示例，并专注于变量赋值。由于我在 C++ 中从未见过这种形式，以下是什么意思：“上传”in new XMLHttpRequest`。

我需要很好地解释以下语句的含义：progress: "upload" in new XMLHttpRequest。特别是，in 不在 C++ 中。 in 应该做什么？

tests = {
  filereader: typeof FileReader != 'undefined',
  dnd: 'draggable' in document.createElement('span'),
  formdata: !!window.FormData,
  progress: "upload" in new XMLHttpRequest
};

谢谢。

【问题讨论】：

developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/…
@Dennis：+1，嗨丹尼斯。完整的答案在该链接中。谢谢。

标签： javascript web-services web-applications web

【解决方案1】：

如果“y”包含名为“x”的属性，'x' in y 将返回 true

顺便说一句，您不应该期望 Javascript 和 C++ 如此相似。它们完全不同。

【讨论】：

+1，嗨，比利。是的，我已经发现 JavaScript 和 C++ 是不同的语言。然而，许多事情仍然是相似的。了解 C++ 有助于我更快地理解 JavaScript。顺便说一句，谢谢你的正确回答。

【解决方案2】：

语句'draggable' in document.createElement('span') 返回一个布尔值。它检查元素（在本例中为跨度）是否具有 draggable 属性，如果有则返回 true，如果没有则返回值为 false。没有别的了。

如果你看到这样的代码：

for (varName in obj)
{
    //some stuff
}

您真正看到的只是对象的可枚举属性的循环 (obj)。假设一个看起来像这样的对象：

var obj = {foo:'bar',non:'sense'};

然后varName 将等于foo，然后non 等等......换句话说：“x in y 语句”的主要目标是检查一个可枚举（公共）属性的存在对象

【讨论】：

+1，感谢 Elias 的详细回答。很好的解释和附加信息。非常感谢。
@Bunkai.Satori：很高兴能提供帮助，不过是一句友好的警告。我注意到您说 C++ 和 JS 之间有很多相似之处，但是有一个重要（非常重要）的区别：C++ 是面向对象的，JS 是 functional （例如 lisp 和 scheme）。当您尝试将您从 C++ 中知道的相同逻辑很快应用到 JS 时，相似性就结束了。从本质上讲，JS 与乍看之下相比 LESS 有很多相似之处
我明白了.. 谢谢你的警告。我认为 JavaScript 是有限的 C++。 C++ 可用于过程编程，尽管您是对的，它主要用于 OO 编程。另一方面，JS 有创建对象的可能性，但那些是一种非常有限的对象，或者可能是函数的实例。我同意你的观点，JS 和 C++ 有很多不同。
JavaScript 是面向对象的，它只是使用原型而不是类。
@Dennis：JavaScript 在它的婴儿期被认为是功能性的。为了让语言感觉更熟悉，它变成了我们今天所知道的多范式语言。说它是 OO 不成立恕我直言。当然，它有一个对象模型，但它也适用于 Scheme/Lisp 风格的编程。在许多情况下，我发现功能方法比 OO 结构更受欢迎。那当然是个人的事情。但是：JS 不支持真正的 OO 数据隐藏概念，为此，您必须求助于函数式技术（lambda 函数-> 闭包）

【解决方案3】：

Chapter 11.8.7 - The in operator 说

返回调用rval的[[HasProperty]]内部方法的结果，参数为ToString(lval)。

这意味着

(lval in rval)

当rval 是一个对象并且它有一个名为String(lval) 的属性时为真。

in 也用于for (... in ...) 循环，但这只是类似的语法，而不是使用此运算符。

"upload" in new XMLHttpRequest

这是在询问“XMLHttpRequest 实例是否有一个名为 'upload' 的属性？”它可以有效地检查此浏览器是否具有可能并非所有浏览器都存在的特定功能。

upload 特别是在XMLHttpRequest Level 2 中指定为一个对象，supports certain event handler 让您监控上传进度：

interface XMLHttpRequestEventTarget : EventTarget {
  // event handlers
  [TreatNonCallableAsNull] attribute Function? onloadstart;
  [TreatNonCallableAsNull] attribute Function? onprogress;
  [TreatNonCallableAsNull] attribute Function? onabort;
  [TreatNonCallableAsNull] attribute Function? onerror;
  [TreatNonCallableAsNull] attribute Function? onload;
  [TreatNonCallableAsNull] attribute Function? ontimeout;
  [TreatNonCallableAsNull] attribute Function? onloadend;
};

【讨论】：

嗨，迈克。 +1，谢谢你的回答。在我看来，这是最好的答案，我将其标记为推荐答案

【解决方案4】：

tests = {
  filereader: typeof FileReader != 'undefined',
  dnd: 'draggable' in document.createElement('span'),// Basically checks the draggable property of span
  formdata: !!window.FormData,
  progress: "upload" in new XMLHttpRequest// checking for the upload property of XMLHttpRequest/, you can add an eventlistner to check the progress event. 
};

就“in”而言，它只是检查元素是否存在。它返回一个布尔值

【讨论】：

【解决方案5】：

typeof FileReader != 'undefined'
- true 如果存在名为 FileReader 的对象，false 否则
'draggable' in document.createElement('span')
- true 如果元素允许 draggable 属性/方法，false 否则
!!window.FormData
- true 如果 window 对象有一个名为 FormData 的属性/方法，false 否则
"upload" in new XMLHttpRequest
- true 如果 XMLHttpRequest 对象有一个名为 upload 的属性/方法，false 否则

【讨论】：

+1，您好，感谢您的回答和其他信息。这个答案是我接受答案的候选人#2。我收到了代码示例中所有行的解释。