window是主要的JavaScript对象根，也就是浏览器中的全局对象，它也可以被视为文档对象模型的根。您可以作为窗口访问它。

窗口。Screen或只是Screen是一个关于屏幕物理尺寸的小信息对象。

窗口。document或仅仅是document是潜在可见(或者更好:呈现)的文档对象模型/DOM的主要对象。

因为window是全局对象，你可以用属性名引用它的任何属性——所以你不需要写下window。-它将由运行时计算出来。

window包含了所有东西，所以你可以调用window。屏风和窗户。文档来获取这些元素。看看这个小提琴，漂亮地打印每个对象的内容:http://jsfiddle.net/JKirchartz/82rZu/

你也可以在Firebug/开发工具中看到对象的内容，如下所示:

console.dir(window);
console.dir(document);
console.dir(screen);

window是所有东西的根，screen只有屏幕尺寸，document是顶级DOM对象。所以你可以把它想象成一个超级文档…

window是主要的JavaScript对象根，也就是浏览器中的全局对象，它也可以被视为文档对象模型的根。您可以作为窗口访问它。

窗口。Screen或只是Screen是一个关于屏幕物理尺寸的小信息对象。

窗口。document或仅仅是document是潜在可见(或者更好:呈现)的文档对象模型/DOM的主要对象。

因为window是全局对象，你可以用属性名引用它的任何属性——所以你不需要写下window。-它将由运行时计算出来。

在控制台，通过编写

this

or

窗口

然后按回车键，我们就可以访问这个窗口，它是浏览器中的顶级对象——甚至也可以使用window的其中一个属性:

top

父

self

globalThis

甚至两者结合。

实际上，检查上述任何一对都将返回true:

This === window // true

window === globalThis // true

This === self // true

Parent === window // true

Top === parent // true

甚至是它们的多种组合，这是可能的，因为

窗口。Window === Window // true

因为window也是它自己的属性，所以我们甚至可以写window。window。window === window，甚至像window。window。self。top。parent。globalthis === window，所有这些都返回true。

唯一的例外是我们不能在最后一个位置使用this，因为它不是一个属性(因此window.window.this === window // false，因为实际上window.window.this === window // false)。this === undefined // true，因为窗口没有这样的属性)。

因此，我们不能编写self。这上面。这一点,父母。这个窗口。唯一可能的方法是将它替换为globalThis在最后一个位置，作为window的属性，比如在top中。globalThis等等。

---

When having a webpage with frames, each frame document would belong to an own separate window object, that separate window being a child of the previous top level window shown earlier - you can simply test that on a platform with frames (like jsfiddle, codepen, w3schools) where writing and executing in the frame console.log(window.parent === window); will return false while if you write window.parent === window directly in console will return true. In the frame, window.parent will access the global window (the parent of frame window object being obviously not the same as the frame window object itself). You can check content of each these windowS separately running in the frame the codes (and seeing results like):

console.log (window.document.all);// HTMLAllCollection(6) [html, head, body, p#demo，按钮，脚本，demo: p#demo]

分别

console.log(window.parent.document.all); // HTMLAllCollection(335) [html, head, script, script, title, meta, meta, meta, meta, meta, meta, meta, meta, link, link, link, link, script, script, script, script, script, script, script, script, script, style, script, script, script, script, style, script, meta, meta, meta, meta, meta, meta, meta, meta, script, argprec0, argprec1, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, …] - therefore much more elements contained in the parent document

做同样的检查，但这次是从控制台:

window.document.all // HTMLAllCollection(335) [html, head, script, script, title, meta, meta, meta, meta, meta, meta, meta, meta, link, link, link, link, script, script, script, script, script, script, script, script, script, style, script, script, script, script, style, script, meta, meta, meta, meta, meta, meta, meta, meta, script, argprec0, argprec1, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, …] - again the same huge elements list

正如我们所看到的，控制台(用F12打开它)可以访问最顶层的窗口作用域/上下文(而下面的框架包含在它自己有限的上下文/范围中)，因此它一次显示所有元素。这和我们一开始提到的环境是一样的。

---

进一步了解主要概念，还有更多需要理解的内容。 在说窗口是浏览器中的顶级对象时，我们应该理解它是浏览器(称为客户端软件)内存中的某种表示，浏览器将从那里绘制(渲染)可见页面(我们将其称为文档-再次，作为窗口的属性可访问)。

As such, we can access the document in console - to see its structure - simply using window.document where we can see everything in it by clicking on #document. Again, we will see there a representation of the document, not the document itself. That representation seen in console is the DOM, being a Model of the original file, and is created by taking PLUS improving in a certain way, where needed, the data parsed from source code of the original document by the JavaScript engine of the browser. The source code is immutable (the browser doesn't change the html file received from internet), while the DOM is mutable (and the mutations are made by JavaScript code ran into the browser either before or after the page is rendered on the device hardware). For clarity: what we see in console is DOM, what we see in browser is the rendering and what we see in source code is the original file. They're not the same, everyone is different from the other two.

To help you understand, I would compare that process with client software being in "real life" some talented person visiting the Louvre museum and seeing the Monalisa painting (the source code file). The image of Monalisa in tourist mind isn't the same as the original painting made by Leonardo, it's just a mental representation of it. From it, the talented tourist will then recreate again on his brain some "own" Monalisa, improving here and there what should be improved or changed before finally painting when back at home on a canvas all the colors of the original image plus even more.

Therefore, we have 3 'entities' (a- html file, immutable, containing the source code, b- one representation of it, created after the source code is parsed and "understood" by the browser or improved, c- the rendering itself that is displayed on the screen). The primary improvement mentioned can be like adding closing tags where missing previously in the source file, adding or deleting elements inside the Model, according to the script instructions contained in the source file, changing them, requesting further resources (as images, fonts, css files, media files to be used as assets of the final full page, etc) and so on.

尽管名称相似，但与特定文档相关的窗口和浏览器窗口不应该被视为同一件事，第一个窗口附加到后一个窗口(并且可以作为它的属性访问)。类似地，当有多个浏览器窗口(例如10个实例)时，每个窗口都有多个选项卡(或没有)，这些选项卡附加到浏览器窗口，它们的对象可由窗口[0]到窗口[9]访问。

Regarding the screen, browser client is a software (a code) that runs and executes another software (source code) for the purpose of finally displaying that (second) code on the hardware device (monitor / screen) through several layers. For this purpose, browser software has also actually its own separate programming routines able to interact with the operating system in order to detect the screen resolution, size, color depths, some settings and more, therefore it acts as a bridge between the operating system and the files meant to be displayed on its rendering area.

使用console.log(window.screen)将向我们返回浏览器从操作系统收集到的关于设备监视器的详细信息(并存储在内存中)，例如{availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24，…}

可以使用一个更简单的代码(不需要总是写窗口字)并提取例如设备的宽度:

Console.log (screen.width) // 1920

例如，您甚至可以使用这些数据来执行一些纯粹基于JavaScript而不使用CSS的伪媒体查询

function goMobile() {
    if (screen.width < 900) {location.replace("/index-mobile.html");}
}
goMobile();

As a conclusion: window and document belong to DOM, screen doesn't. You need all of them, however because document and screen are both properties of window object, you can just invoke them directly in your code (shortening the code). More, screen being about the hardware part, not any browsers' rectangular available area to render on, it hasn't the meaning of document.body. At most, you can put screen data to use in order to optimize your loading page, for example limiting the assets downloads for a better mobile device experience and so on.

简单地说，下面会有更多的细节，

window是执行上下文和该上下文JavaScript的全局对象 文档包含通过解析HTML初始化的DOM Screen描述物理显示器的全屏

有关这些对象的详细信息，请参阅W3C和Mozilla参考文献。三者之间最基本的关系是每个浏览器选项卡都有自己的窗口，而一个窗口又有一个窗口。文档和窗口。屏幕上的属性。浏览器选项卡的窗口是全局上下文，所以document和screen指的是window。文档和window.screen。关于这三个对象的更多细节，请参见Flanagan的《JavaScript:权威指南》。

窗口

每个浏览器选项卡都有自己的顶级窗口对象。每个<iframe>(和已弃用的<frame>)元素也有自己的窗口对象，嵌套在父窗口中。每个窗口都有自己独立的全局对象。窗口。Window总是指窗口，但是Window。父和窗口。Top可能指的是封闭窗口，允许访问其他执行上下文。除了下面描述的文档和屏幕外，窗口属性还包括

setTimeout()和setInterval()将事件处理程序绑定到计时器 location给出当前URL 使用back()和forward()方法给出选项卡的可变历史 描述浏览器软件的导航器

文档

每个窗口对象都有一个要呈现的文档对象。这些对象之所以容易混淆，部分原因是HTML元素在分配唯一id时被添加到全局对象中。例如，在HTML片段中

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

段落元素可以被下列任意元素引用:

window.holyCow or window[“holyCow”] document.getElementById（“holyCow”） document.querySelector（“#holyCow”） document.body.firstChild 文档.身体.儿童[0]

屏幕

window对象还有一个screen对象，其属性描述物理显示:

屏幕属性宽度和高度是全屏 屏幕属性availWidth和availHeight省略了工具栏

显示呈现的文档的屏幕部分是JavaScript中的视口，这可能会令人困惑，因为在讨论与操作系统的交互时，我们将应用程序的屏幕部分称为窗口。任何文档元素的getBoundingClientRect()方法都将返回一个对象，该对象具有上、左、下和右属性，用于描述元素在视口中的位置。

窗口是载入浏览器的第一个东西。这个窗口对象具有大多数属性，如长度，innerWidth, innerHeight，名称，如果它已关闭，它的父属性等等。

那么文档对象呢?文档对象是你的html、aspx、php或其他将被加载到浏览器中的文档。文档实际上是在窗口对象中加载的，并具有可用的属性，如标题、URL、cookie等。这到底是什么意思?这意味着如果你想访问窗口的属性，它就是window。属性，如果是document，它就是window。document。Property也可以简写为document。Property。

这似乎很简单。但是一旦IFRAME被引入会发生什么呢?

详见:http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf