JavaScript中"in"的解释

Question

请看下面的代码示例，重点关注变量赋值。由于我从未在C++中见过这样的形式，请问以下内容的含义是什么："upload" 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
};

谢谢。

- Bunkai.Satori

---

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/in - Dennis

@Dennis：+1，你好Dennis。完整的答案在那个链接里。谢谢。 - Bunkai.Satori

Answer 1

第11.8.7章 - in运算符 表示：

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

也就是说：

(lval in rval)

当rval是一个对象且其具有名为String(lval)的属性时，此条件成立。

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

---

"upload" in new XMLHttpRequest

这里是在询问“一个 XMLHttpRequest 实例是否有一个名为 'upload' 的属性?” 它实际上是在检查此浏览器是否具有可能不在所有浏览器中存在的特定功能。 upload 特别地在 XMLHttpRequest Level 2 中被指定为一个对象，该对象支持某些事件处理程序，以让您监视上传进度：

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;
};

- Mike Samuel

---

嗨，Mike。+1，谢谢你的回答。在我看来，这是最好的答案，我将其标记为“推荐答案”。 - Bunkai.Satori

Answer 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 语句"的主要目的是检查对象的可枚举（公共）属性是否存在。

- Elias Van Ootegem

---

+1，谢谢Elias详细的回答。解释得很好，还有额外的信息。非常感谢。 - Bunkai.Satori

@Bunkai.Satori：很高兴能帮忙，但友情提醒一下。我注意到你说C++和JS之间有许多相似之处，但有一个非常重要（真的很重要）的区别：C++是面向对象的，而JS是_函数式_的（例如lisp和scheme）。当你尝试将从C++中所知道的逻辑应用于JS时，相似之处很快就会结束。实际上，JS比起初看起来要少得多相似。 - Elias Van Ootegem

我明白了，感谢您的警告。我认为JavaScript是一种有限制的C ++。C++可以用于过程式编程，尽管您正确，它主要用于面向对象编程。另一方面，JS有可能创建对象，但那些只是非常有限的对象或者说函数的实例。我同意您的看法，JS和C++有很多不同之处。 - Bunkai.Satori

JavaScript 是面向对象的，它只是使用原型而不是类。 - Dennis

@Dennis：JavaScript 在其初期被认为是一种函数式语言。为了使语言更加熟悉，它成为了我们今天所知道的多范式语言。在我看来，说它是面向对象的是站不住脚的。它有一个对象模型，但它也适用于 Scheme/Lisp 风格的编程。在许多情况下，我发现函数式方法比面向对象的构造更可取。当然，这是个人的事情。然而：JS 不支持真正的面向对象数据隐藏概念，为此，您将不得不转向函数式技术（lambda 函数->闭包）。 - Elias Van Ootegem

Answer 3

• typeof FileReader != 'undefined'
  • true表示存在名为FileReader的对象，false表示不存在
    
    
• 'draggable' in document.createElement('span')
  • true表示 <span>元素允许使用draggable属性/方法，false则表示不允许
    
    
• !!window.FormData
  • true表示 window对象具有名称为FormData的属性/方法，false则表示不存在
    
    
• "upload" in new XMLHttpRequest
  • true表示XMLHttpRequest对象具有名称为upload的属性/方法，false则表示不存在

- inhan

---

+1，你好，感谢你的回答和额外提供的信息。这个答案是我接受答案的第二选择。我已经收到了代码示例中所有行的解释。 - Bunkai.Satori

Answer 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”而言，它只是检查元素是否存在。它返回一个布尔值。

- Rahul

Answer 5

'x' in y 会在 "y" 包含一个名为 "x" 的属性时返回 true。

顺便说一下，你不应该期望 Javascript 和 C++ 如此相似。它们是非常不同的。

- billy

---

+1，嗨Billy。是的，我已经发现JavaScript和C++是不同的语言了。然而，许多东西仍然很相似。对C++的了解帮助我更快地理解JavaScript。顺便说一下，谢谢你的正确答案。 - Bunkai.Satori